Asides belong at the top level or inside the main landmark

Rule: axe/landmark-complementary-is-top-level
Checks: Aside should not be contained in another landmark
WCAG: none; a best practice, not a WCAG success criterion
Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

People who use a screen reader or a braille display, most of them blind.

How to fix it

An `<aside>` or `role="complementary"` sits inside the site header, the footer, a navigation or a named section

Move it to the top level, beside <main>, or into <main> if it supports the page’s content. If it is only a part of the region it sits in, make it a <div> so that it is not a landmark.

<main>
  <h1>Pricing</h1>
  <p>Plans start at ten dollars a month.</p>
</main>
<aside aria-labelledby="help-heading">
  <h2 id="help-heading">Need help choosing?</h2>
  <p>Our team answers calls on weekdays.</p>
</aside>

An unnamed `<aside>` is a note inside an `<article>` or a `<section>` in `<main>`

Keep it if it suits the content. Browsers expose an unnamed <aside> there as a plain group, not a landmark, so no one is affected, although axe reports it.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.