What This Rule Checks
A complementary landmark, typically represented by the <aside> element or role=”complementary”, is meant to hold ancillary content that complements the main content on the page. To maintain a clear structure for screen readers and other assistive technologies, complementary landmarks must not be nested inside other ARIA landmarks like role=”main” or role=”contentinfo. This ensures easier navigation for users relying on assistive technologies.
Who Is Affected
This issue primarily affects: Sighted Keyboard Users users, who can see the screen but navigate exclusively with a keyboard; Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
The complementary landmark helps screen reader users find supplementary content. When nested inside another landmark, it may not appear in the top-level landmark list, reducing its discoverability.
How to Fix
Check Complementary Landmark Placement: Ensure that the element marked with role=”complementary” or the <aside> element is at the top level and not nested within another ARIA landmark like role=”main” or role=”navigation”.
Avoid Nesting Complementary Landmarks: Complementary landmarks should not be contained within other landmarks. This can confuse screen readers and make navigation difficult for users of assistive technologies.
Code Examples
<!-- Aside nested inside main -->
<main>
<aside>
Related content
</aside>
</main>
Copy
<!-- Aside at top level -->
<main>
<p>Main content</p>
</main>
<aside aria-label="Related articles">
Related content
</aside>
Copy
Common Mistakes to Avoid
- Nesting <aside> inside <main> when it contains site-wide content.
- Confusing content-related sidebars (OK inside main) with site-wide complementary regions.
Tip: Landmark regions let screen reader users jump directly to key sections of a page. They serve as the accessibility equivalent of a table of contents for page layout. Label landmarks when multiple of the same type exist.