landmark-complementary-is-top-level

Complementary landmark must be top-level

Checks that the complementary landmark (role="complementary" or an <aside> that keeps its implicit role) is not nested inside another landmark region.

Applies to. Applies whenever the page contains at least one element carrying the complementary role: explicit role="complementary", or an <aside> that keeps its implicit role (see implementation notes on when it does not).

Expectation. No complementary candidate has an ancestor that is itself a landmark region. Complementary content supports the main content of the page and sits beside it; nested inside another landmark it is a section of that landmark instead, which is not what landmark navigation announces.

Examples

<nav aria-label="Section navigation">
  <div role="complementary">Related links</div>
</nav>

<aside>Related links</aside>

View source