Ensure the Complementary Landmark or Aside Is At the Top Level

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Insights from

July 29, 2024

Disabilities affected: Blind Hearing Mobility

Standards: WCAG 2.2 Level A

Written and researched for humans by humans

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expertly reviewed by

Comments: 0

Web accessibility standards state that the complementary landmark or aside needs to be at the top level

Why It Matters

Complementary content supports the main content 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.

By embedding an <aside> element in another landmark, it may disable screen reader functionality.

Fixing the Issue

Aside elements or elements with role=complementary should not be an internal part of another ARIA landmark. Nesting landmarks create confusing document structures.

Good Code Example

Code example

<main><p>Some text</p></main>
<aside>An aside</aside>

Copy

Bad Code Example

Code example

<main>
  <p>Some text</p>
  <aside><p>An aside</p></aside>
</main>

Copy