Complementary landmark at top level

Complementary landmark must not be nested inside other landmarks

The complementary landmark (aside or role=complementary) must be at the top level of the page, not contained by other landmarks.

This issue often appears when sidebars are placed inside <main>, <header>, or other landmark containers.

It primarily affects screen reader users who depend on landmark navigation to skip secondary content.

Why It Matters

Screen reader users browse by landmarks to jump to regions like Main, Navigation, and Complementary. If a complementary region is nested inside another landmark, some assistive technologies may not list it or may announce it in a confusing order.

When a sidebar is exposed at the top level, users can skip or find it quickly. Nesting disrupts that structure and increases cognitive load for blind and low-vision users. It can also impact users of speech recognition tools that rely on programmatic region names.

Common Causes

• Placing <aside> inside <main> to keep layout simple.
• Applying role="complementary" to a <div> that sits inside another landmark (e.g., nav, header, footer).
• CMS templates that wrap all content—including sidebars—inside a main container.
• Multiple wrappers (grid or flex containers) that happen to be landmarks.
• Copy-paste patterns that reuse an aside block within article or main components.

How to Fix

1. Find all complementary regions:
   • Search for <aside> elements and any element with role="complementary".
2. Move complementary regions to the top level:
   • Make them siblings of other global landmarks (e.g., <main>, <header>, <nav>, <footer>), not children.
   • Do not nest complementary inside main, navigation, banner, or contentinfo.
3. Use correct semantics if the content belongs in main:
   • If the content is part of the primary narrative, do not use complementary. Use a <section> (optionally role="region") with a proper heading instead.
4. Label multiple complementary regions:
   • Provide unique, descriptive names via aria-label or aria-labelledby (e.g., "Related posts", "Support links").
5. Keep landmark counts sensible (recommendation):
   • One <main> per page.
   • Complementary regions are optional; if present, ensure each serves secondary content related to the page.

How to Test

• Keyboard check:
• Tabbing won’t reveal landmarks, but ensure all interactive elements in the complementary area are reachable and order is logical.
• Screen reader check:
• NVDA (Windows): Use NVDA+F7 and open the Landmarks list, or press D to cycle landmarks. Confirm each complementary region is listed at the same hierarchy level as Main (not inside it).
• JAWS (Windows): Press R to move through regions or use Insert+F3 to list them. Verify complementary regions are separate from Main.
• VoiceOver (macOS/iOS): Use the Rotor (VO+U on macOS) and navigate to Landmarks. Ensure complementary appears as a top-level item.
• Visual/DOM check:
• Inspect the DOM. Make sure <aside> or role="complementary" elements are not descendants of <main>, <nav>, <header>, or <footer>.

Good Example

<header>
  <h1>City News</h1>
</header>
<nav aria-label="Primary">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Local</a></li>
  </ul>
</nav>
<main>
  <article>
    <h2>Storm Updates</h2>
    <p>Latest advisories for the region...</p>
  </article>
</main>
<aside aria-label="Related resources">
  <h2 class="visually-hidden">Related resources</h2>
  <ul>
    <li><a href="#">Emergency shelters</a></li>
    <li><a href="#">Road closures</a></li>
  </ul>
</aside>
<footer>
  <p>© City Channel</p>
</footer>

Bad Example

<main>
  <h1>Storm Updates</h1>
  <p>Latest advisories for the region...</p>
  <aside aria-label="Related resources">
    <ul>
      <li><a href="#">Emergency shelters</a></li>
      <li><a href="#">Road closures</a></li>
    </ul>
  </aside>
</main>

Quick Checklist

• No <aside> or role="complementary" inside other landmarks.
• Complementary is a sibling to <main>, not a child.
• Use complementary only for secondary, related content.
• Provide a unique label for each complementary region.
• If content is primary, don’t use complementary—use a section with a heading.
• Verify with a screen reader that complementary appears at the top level.
• Ensure keyboard focus order through the page remains logical.