Ensure the Complementary Landmark or Aside Is At the Top Level

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