Make sure the complementary landmark or aside is at top level

The landmark-complementary-is-top-level rule checks that <aside> elements or elements with role="complementary" are not nested inside other ARIA landmarks. Nesting landmarks creates confusing document structures and can break screen reader navigation.

What is being tested?

This rule verifies that:

• <aside> and role="complementary" elements are not inside other landmark roles like main, banner, or contentinfo.
• Complementary content is placed at the top level of the page structure, making it easily skippable by assistive technologies.

Failing example

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

Here, the <aside> is incorrectly placed inside the <main> landmark.

Passing example

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

Here, the <aside> is at the top level, separate from other landmarks.

Why it matters

Complementary content is ancillary to the main page content. Screen reader users can choose to skip over complementary sections when they are at the top level of the page structure. If nested inside another landmark, this functionality may break, making navigation more difficult and increasing frustration.

Best practices

• Place <aside> or role="complementary" elements at the top level of the page.
• Do not nest complementary landmarks inside main, banner, or other landmarks.
• Use landmarks and headings together to create a clear, navigable page structure.