Aside should not be contained in another landmark

Rule ID: landmark-complementary-is-top-level
Ruleset: axe-core 4.7
User Impact: Moderate
Guidelines: Deque Best Practice
 

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

Moderate
▼
Minor
Critical

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

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.7 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: