Complementary Landmark

A complementary landmark is a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.

ARIA 1.2 Specification: complementary landmark

Design Patterns

• complementary landmarks should be top level landmarks (e.g. not contained within any other landmarks).
• If the complementary content is not related to the main content, a more general role should be assigned (e.g. region).
• If a page includes more than one complementary landmark, each should have a unique label.

Use the HTML aside element to define a complementary landmark.

HTML Example: One Complementary Landmark on Page

When only one complementary landmark on a page, a label is optional.

<aside>

<h2>Title for complementary area<h2>

.... complementary content area ....

</aside>

HTML Example: Multiple Complementary Landmarks

When there is more than one complementary landmark on a page, each should have a unique label.

<aside aria-labelledby="comp1">

<h2 id="comp1" >Title for complementary area 1</h2>

... complementary content area 1 ...

</aside>

<aside aria-labelledby="comp2">

<h2 id="comp2" >Title for complementary area 2</h2>

... complementary content area 2 ...

</aside>

A role="complementary" attribute is used to define a complementary landmark.

ARIA Example: One Complementary Landmark on Page

When only one complementary landmark exists on a page, a label is optional.

<div role="complementary" >

<h2>Title for complementary area<h2>

.... complementary content area ....

</div>

ARIA Example: Multiple Complementary Landmarks

When there is more than one complementary landmark on a page, each should have a unique label.

<div role="complementary" aria-labelledby="comp1" >

<h2 id="comp1" >Title for complementary area 1</h2>

... complementary content area 1 ...

</div>

<div role="complementary" aria-labelledby="comp2" >

<h2 id="comp2" >Title for complementary area 2</h2>

... complementary content area 2 ...

</div>