Document should not have more than one banner landmark
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
There is only one site header — so there is only one banner.
Overview
Why this matters
The `banner` landmark identifies the site-wide header region. Screen reader users rely on this landmark to understand where the global identity and navigation begin. If multiple `banner` landmarks exist, users cannot determine which one is the true site header, leading to confusion when navigating.
How to fix this issue
Ensure only one site-wide banner landmark exists per page (`<header>` at document scope or `role="banner"`). Section/article headers can remain `<header>`, but must not expose additional banner landmarks.
Developer Guidance
In component systems and CMS templates, duplicated headers happen easily. Audit rendered output (not just components) to confirm only one banner landmark. If a secondary header visually resembles the main header (e.g., in blog posts or cards), it must not use `role="banner"`.
Code Examples
Incorrect Implementation
<header role='banner'>Main site header</header>
<article>
<header role='banner'>Article header</header>
</article>Correct Implementation
<header role='banner'>Main site header</header>
<article>
<header>Article header</header>
</article>Real-World Implementation
Before
<div id="app">
<header role="banner">Company Name</header>
<main>
<article>
<header role="banner">Case Study Header</header>
</article>
</main>
</div>
<!-- Two banner landmarks are exposed → confusing -->After
<div id="app">
<header role="banner">Company Name</header>
<main>
<article>
<header>Case Study Header</header>
</article>
</main>
</div>
<!-- Only one banner landmark → correct landmark navigation -->CSS Example (Guidance)
/* If section headers need to look visually similar to the site header, match styling—not semantics */
article > header {
padding: 1rem 0;
border-bottom: 1px solid #ddd;
}Manual Testing
- 1. Open browser accessibility tools and list landmarks.
- 2. Confirm exactly one banner landmark is exposed for the page.
- 3. Verify section/article headers are not surfaced as additional banners.
- 4. Use screen reader landmark navigation and confirm only one banner is announced.
- 5. If duplicates exist, remove `role="banner"` from non-site headers.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance