Complementary landmarks and/or asides are top level

Rule ID: landmark-complementary-is-top-level
User Impact: Moderate
WCAG: Best Practice

Compliance Data & Impact

User Impact

Disabilities Affected

  • Sighted Keyboard Users
  • Blind
  • Deafblind
  • Mobility

Requirement(s)

  • Best Practice

WCAG Success Criteria

  • Not specified, or not applicable

Section 508 Guidelines

  • Not specified, or not applicable

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.