A page needs no more than one site header

• Rule: axe/landmark-no-duplicate-banner
• Checks: Document should not have more than one banner 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 second <header> outside <main> holds the page’s own title or hero

Move the page’s own header into <main>, where a <header> without a role is not a banner, and keep one site header at the top level.

<header>
  <a href="/">Acme home</a>
</header>
<main>
  <header>
    <h1>Summer sale</h1>
    <p>Ends June 30</p>
  </header>
  <p>Every plan is half price.</p>
</main>

More than one element has role="banner"

Keep role="banner", or a top-level <header>, on the one header that holds the site-wide content, and remove the role from the others. A top-level <header> is a banner without the role, so move any other into the part of the page it belongs to, or make it a <div>.

Separate headers for small and large screens are both in the page

Render one header and restyle it for each screen size, or hide the inactive one with display: none or the hidden attribute, which also removes it from the accessibility tree.

Fixes that fail

Giving each banner a different aria-label

Names tell landmarks apart, but a page has only one banner. axe still reports this rule, and screen reader users still meet two site headers.

Adding aria-hidden="true" to the extra header

It clears the rule, but the header stays on screen, so screen reader users miss what everyone else sees. Its links still take focus with nothing announced, and axe reports aria-hidden-focus.

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.