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.1 Specification: complementary landmark
Design Patterns
complementarylandmarks 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
complementarylandmark, 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>
<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>
<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>
<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>
<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>