Complementary landmarks and/or asides are top level
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.
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>
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.
Ensures the complementary landmark or aside is at top level
The Algorithm (in simple terms)
Do not include
<aside> elements or elements containing
role="complementary" within other content marked up as a landmark.