landmark-no-duplicate-banner
Web validation
banner (header) landmark.The banner landmark represents the global site header. Only the page‑level header, the one that frames the entire site should be exposed as a banner. A native HTML <header> becomes a banner only when it is scoped to the <body>, or when it is explicitly given role="banner".
Headers nested inside <article>, <aside>, <main>, <nav>, or <section>, or inside an element with the equivalent role (article, complementary, main, navigation, or region), do not map to the banner landmark. They simply provide local structure.
Therefore, it is perfectly legitimate to have many <header> elements, yet there should be just one banner landmark. Duplicating the banner landmark forces assistive‑technology users to guess which header is the true site header, defeating the shortcut the landmark is meant to provide.
Pass Patterns
A page contains one banner landmark
The document exposes one top-level header only.
<header role="banner">
Visit Your Local Zoo!
</header>
<main>
…main content…
</main>
<footer>
<p>Brought to you by North American Zoo Partnership</p>
</footer>A page uses an implicit banner landmark
The lone <header> sits directly under <body>, so it is the sole banner landmark.
<body>
<header>
Visit Your Local Zoo!
</header>
<main>
…main content…
</main>
<footer>
<p>Brought to you by North American Zoo Partnership</p>
</footer>
</body>Section headers avoid the banner role
Although each article header provides structure, none is promoted to a banner landmark, preserving one global banner.
<article>
<header>
<h2>Blog post title</h2>
</header>
…
</article>Fail Patterns
Two top-level headers
Assistive-technology users encounter two banner landmarks and cannot tell which is primary.
<body>
<header>
Visit Your Local Zoo!
</header>
<header>
Visit the gift shop!
</header>
<main>
…main content…
</main>
<footer>
<p>Brought to you by North American Zoo Partnership</p>
</footer>
</body>Explicit ARIA role overrides HTML semantics
The role="banner" annotation forces the <header> to masquerade as a banner, though it's not at the document top level, creating a duplicate landmark if there is already a banner on the site.
<article>
<header role="banner">
<h2>Blog post title</h2>
</header>
…
</article>Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader and go to the elements list (NVDA
Insert+F7, VoiceOverControl+Option+U). - Navigate to the “Landmarks” section.
Expected results: The landmark list contains only one banner element.
Actual results: The landmark list contains more than one banner element.
FAQ
Why is this rule considered a best practice?
HTML does not prevent a page from containing several banner landmarks, but limiting the page to one enhances landmark navigation and reflects modern HTML semantics. It prevents ambiguity for assistive-technology users without altering visual design.
Why is this issue marked as Moderate?
Duplicate banner landmarks scatter orientation cues. Users relying on landmarks waste time exploring redundant regions, especially on complex sites. Because the workaround of navigating linearly remains possible, the severity is moderate rather than serious.