W3C Logo

ARIA Landmarks Example

Visually outline the landmarks and/or headings on the page using the following buttons.

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

  • 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>