Structure & headings

The Site Header Sits Inside Another Page Area

The site header is marked as a banner but sits inside another landmark, so screen reader users find a muddled page outline and may miss the header.

landmark-banner-is-top-levelBest 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.

Save as PDF

Why it matters

Landmarks are named areas of a page, like header, menu, main content and footer. Screen reader users jump between them to get around quickly.

The banner is the site-wide header. It should stand on its own at the top. Nested inside another area, it looks like part of that area, and the page outline gets confusing.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear the banner listed inside another area, like main, so the page outline doesn't match what they expect.	Partial impact
Low-vision users (magnification)	Affected only if they also use a screen reader or landmark tool.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	This is a best practice, not a WCAG requirement. It is unlikely to feature in a complaint on its own.	Low impact
Conversion	A muddled outline slows screen reader users down, but rarely stops a sale.	Low impact
SEO	No real search benefit — don't sell it as one.	Low impact
Brand trust	A clean page structure shows care to people who rely on it.	Moderate impact
Cost to fix	Usually a quick move in the shared page template. Fix it once and every page benefits.	High impact

Fixing it in code

Move the site header out of main

Don't

<main>
  <div role="banner">
    <a href="/">Acme</a>
  </div>
  <h1>Our products</h1>
</main>

A screen reader says: “Main landmark… Banner landmark, Acme, link”

<header>
  <a href="/">Acme</a>
</header>
<main>
  <h1>Our products</h1>
</main>

A screen reader says: “Banner landmark, Acme, link… Main landmark, heading level 1, Our products”

The banner now sits at the top level, beside main, not inside it.

A header inside an article

Don't

<article>
  <div role="banner">
    <h2>Summer sale</h2>
  </div>
</article>

A screen reader says: “Article… Banner landmark, heading level 2, Summer sale”

<article>
  <header>
    <h2>Summer sale</h2>
  </header>
</article>

A screen reader says: “Article… heading level 2, Summer sale”

A plain header inside an article isn't a banner, so drop role="banner".

Designer's handoff note

Mark one site-wide header in your page layouts. Keep it outside the main content area.

Headers for cards, articles or sections are just headings, not the site banner.

Quick test

Tool

VoiceOver (opens in a new tab) (on every Mac)

Checklist

Step 1: Press ⌘ F5 to turn VoiceOver on.
Step 2: Press Control Option U to open the rotor.
Step 3: Use the arrow keys to reach the Landmarks list.
Step 4: Check that banner is listed once, as its own item.

Pass: The banner appears once, beside main, and holds the site header.
Fail: The banner sits inside main or another area, or there is more than one.

What a green scan still misses

A scanner sees where the banner sits. It can't tell whether the right content is inside it — check that it holds the site's logo and top menu.

Reference

Rule ID: landmark-banner-is-top-level
Raised by: axe-core: “Banner landmark should not be contained in another landmark”
WCAG: Best practice — not a WCAG requirement
Read more: Deque University: landmark-banner-is-top-level (opens in a new tab)
Last reviewed: 14 October 2026