landmark-complementary-is-top-level
Web validation
<aside> elements or elements with role="complementary") should sit at the top level of the landmark tree, never inside another landmark region.Complementary regions supply extra context, such as side notes, related links, or promotions that enhance but do not replace the main content.
When you place an <aside> or element with role="complementary" at the top level of the landmark tree, assistive technology can list it separately so users may jump to or skip it. Nesting a complementary region inside another landmark may hide it from quick-navigation commands and muddles the page structure for screen reader users.
Note:
Native HTML elements such as <aside>, <header>, and <footer> may appear inside other landmarks (for example, inside <main>). They do not inflate the landmark list because browsers expose them to AT only when they occur at the document root.
In contrast, ARIA roles are always exposed. When you nest <div role="complementary"> inside another landmark, every screen reader receives an extra landmark entry. The result is an over-crowded landmark rotor, making navigation slower and error-prone.
Pass Patterns
The <aside> element is in the document’s top level
A complementary region is top-level, separate from other landmarks.
<body>
<main>
<!-- Main content goes here -->
</main>
<aside>
<!-- Complementary content goes here -->
</aside>
</body>Fail Patterns
The element with role="complementary" is a descendant of the <main> landmark
The complementary landmark is nested inside another landmark, breaking the top-level rule.
<body>
<main>
<!-- Main content goes here -->
<div role="complementary">
<!-- Complementary content goes here -->
</div>
</main>
</body>Try It Yourself
Inspecting the browser dev-tools
- In the browser dev tools, go to the Accessibility tree.
- Expand the tree to the
bodynode. - Check the position of the
complementarylandmark.
Expected result: The complementary element appears as a direct child of <body>.
Actual result: The complementary element appears under another landmark element.
FAQ
Why is this validation considered a best practice?
HTML permits an <aside> inside many contexts, yet placing it at the top landmark level gives assistive-technology users predictable, skip-friendly navigation. Following this pattern produces cleaner page maps and fewer surprises for everyone.
Why is this issue marked as Moderate?
Nesting a complementary region rarely blocks access to critical content, but it does hide useful context and forces users to wade through extra landmarks. The impact varies across screen readers and browsers, so the concern is notable but not critical.