The site header needs to sit outside other landmarks

Rule: axe/landmark-banner-is-top-level
Checks: Banner landmark 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

A header inside an article, a section or `<main>` has `role="banner"`

Remove role="banner". A <header> inside <article>, <aside>, <main>, <nav> or <section> introduces only that part of the page and needs no role. Keep the banner for the one header that holds the site-wide content.

<main>
  <h1>News</h1>
  <article>
    <header>
      <h2>Spring release</h2>
      <p>Published May 2</p>
    </header>
    <p>This release adds saved searches.</p>
  </article>
</main>

A wrapper with a landmark role, such as `<div role="main">` or `<div role="application">`, holds the whole page

Take the role off the wrapper and make the site header, <main> and the footer its children, so that each is top level. A wrapper <div> without a role is fine.

<div class="page">
  <header>
    <a href="/">Acme home</a>
  </header>
  <main>
    <h1>Orders</h1>
    <p>You have no open orders.</p>
  </main>
  <footer>
    <p>Acme Inc.</p>
  </footer>
</div>

Fixes that fail

Removing `role="banner"` from the site header while it stays inside `<main>`

axe stops reporting it, because a <header> inside <main> is not a banner. Screen reader users then lose the landmark that takes them to the site header, and hear its links as part of the page content.

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.