Complementary landmarks and/or asides are top level
Rule Description
Ensures the complementary landmark or aside is at top level
Why it Matters
Complementary content is ancillary content to the main theme of a document or page. Screen reader users have the option to skip over complementary content when it appears at the top level of the accessibility API. Embedding an <aside>
element in another landmark may disable screen reader functionality allowing users to navigate through complementary content.
How to Fix the Problem
This best practice rule ensures that aside
elements or elements with role=complementary
are not an internal part of another ARIA landmark. Nesting landmarks create confusing document structures. This rule is similar to existing rules that test this same ARIA requirement for the banner, contentinfo, and main roles.
Examples
The following example FAILS the Complementary landmarks are at the top level rule:
<main>
<p>Some text</p>
<aside><p>An aside</p></aside>
</main>
The following example PASSES the Complementary landmarks are at the top level rule:
<main><p>Some text</p></main>
<aside>An aside</aside>
The Algorithm (in simple terms)
Do not include <aside>
elements or elements containing role="complementary"
within other content marked up as a landmark.