Structure & headings
The Page Has More than One Banner Landmark
Screen reader users jump to the banner to find the site header, but two banners leave them unsure which one is the real one.
landmark-no-duplicate-bannerBest practiceBest practice — not a WCAG requirement, but it helps people all the same.
- Status
- ModerateModerate — An annoyance, with a workaround.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- AutomatedA scanner finds it, and a clean scan means it's fixed.
Why it matters
A landmark is a labelled region of the page that screen readers can jump to. The banner is the site-wide header, with the logo, search and main menu.
There should be only one banner on a page. When there are two, people who jump to the banner may land on a promo strip or a card header instead. They have to search again for the main menu.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "banner" twice in the landmark list and must check both to find the site header. | High impact |
| Low-vision users (magnification) | Affected only if they also use a screen reader to move around the page. | Partial impact |
| Cognitive and neurodivergent users | Screen reader users with memory or attention difficulties may lose track of which banner holds the menu. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | This is a best practice, not a WCAG 2.2 failure on its own. It still adds friction that can feature in a Disability Discrimination Act complaint. | Low impact |
| Conversion | Screen reader users who can't find the main menu or search quickly may give up. | Moderate impact |
| SEO | Search engines don't reward this — don't sell it as an SEO fix. | Low impact |
| Brand trust | A clean landmark structure signals a team that cares about getting the basics right. | Moderate impact |
| Cost to fix | Usually a small fix in the shared page template. Fix it once and every page benefits. | High impact |
Fixing it in code
A promo strip marked up as a second header
Don't
<header class="promo">Free shipping this week</header>
<header>
<a href="/">Acme</a>
<nav>…</nav>
</header>A screen reader says: “Landmarks: banner, banner, navigation”
Do
<div class="promo">Free shipping this week</div>
<header>
<a href="/">Acme</a>
<nav>…</nav>
</header>A screen reader says: “Landmarks: banner, navigation”
A top-level <header> becomes a banner, so the promo strip should be a plain <div>.
A card header given role="banner"
Don't
<section>
<div role="banner">
<h2>Latest news</h2>
</div>
</section>A screen reader says: “Landmarks: banner, banner, main”
Do
<section>
<div>
<h2>Latest news</h2>
</div>
</section>A screen reader says: “Landmarks: banner, main”
role="banner" is only for the one site-wide header, so remove it from smaller headers.
Designer's handoff note
In your page annotations, mark exactly one area as the site header, or banner.
Label promo strips, cookie bars and card headers as ordinary content, not as headers.
Quick test
Tool
VoiceOver (opens in a new tab) (on every Mac)
Checklist
- Pass
- You see "banner" once, and it holds the logo and main menu.
- Fail
- You see "banner" two or more times.
What a green scan still misses
A scanner can count banners, but it can't tell whether the one left is really the site header. Check that it holds the logo, menu and search.
Reference
- Rule ID
landmark-no-duplicate-banner- Raised by
- axe-core: “Document should not have more than one banner landmark”
- WCAG
- Best practice — not a WCAG requirement
- Last reviewed
- 14 October 2026