Ensure the Complementary Landmark or Aside Is At the Top Level

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

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