Complementary landmarks and/or asides are top level
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Sighted Keyboard Users
- Blind
- Deafblind
- Mobility
Standard(s)
- Deque Best Practice
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>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.
Rule Description
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.
Resources
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: