Role Landmark

`complementary`

A landmark for content that supports the main content but is meaningful on its own — sidebars, related-article boxes, supplementary callouts. The <aside> element carries this role when it is at the top level.

When to use

Use <aside> for a top-level sidebar, a “Related articles” rail, an author bio next to a post, or a “What’s new” panel. When <aside> is a direct child of <body> (or sits next to <main>), it is exposed as a complementary landmark.

<aside> nested inside an <article> is NOT promoted to a landmark — it remains a generic group. That distinction is intentional: a complementary landmark is page-level; sidebars internal to one article are not.

role="complementary" on a <div> is appropriate only when you cannot use <aside> (legacy CMS).

The content inside should support the main but stand on its own — if removing it would leave the page incomplete, it is probably not complementary.

When to label

If you have multiple complementary landmarks (a left rail AND a right rail), give each a distinct aria-label or aria-labelledby. With one complementary landmark, a label is optional — screen readers announce it as “complementary”.

Conventional labels: “Related articles”, “Tools”, “Newsletter signup”, “Recently viewed”.

Common failures

<aside> used for callouts inside paragraphs of prose. Too granular — clutters the landmark menu.
Marking the entire site footer’s secondary links as a complementary landmark. Footer-level navigation belongs in <nav> inside <footer>.
Multiple complementary landmarks with no labels.
Putting role="complementary" on a <section> that is the page’s main content. Use <main> instead.
<aside> inside <article> plus an explicit role="complementary" to force landmark exposure — usually a sign the content belongs at page level, not inside the article.

Example

<main>
  <article>
    <h1>Designing for screen readers</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Related articles</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA landmarks explained</a></li>
    <li><a href="/articles/skip-links">Skip links done right</a></li>
  </ul>
</aside>