ARIA Landmark Region Patterns
Based on the W3C ARIA Authoring Practices for Landmark Regions

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.
The aside element without a label is a complementary landmark when not a descendant of any of the following HTML sectioning elements:
  • article
  • aside
  • nav
  • section
The aside element with a label is a contentinfo 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>