Document should not have more than one banner landmark

WCAG 1.3.1
Info and Relationships

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.

Why this matters and how to fix it

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 that only one `<header>` (or any element with `role="banner"`) is treated as the global site header and appears as a top-level landmark. Section or article headers should not use `role="banner"`; they should simply be `<header>` elements without a landmark role.

Automated detection · Manual review recommended

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 Examples

Before

<div id="app">
  <header>Company Name</header>
  <main>
    <article>
      <header>Case Study Header</header>
    </article>
  </main>
</div>
<!-- Screen readers announce two banners → 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. 1. Open Chrome DevTools → Accessibility → Landmarks.
  2. 2. Confirm that there is **exactly one** `banner` landmark.
  3. 3. Ensure the `banner` is a direct child of `<body>` (or global layout wrapper), not nested inside `<main>`, `<article>`, `<section>`, or `<footer>`.
  4. 4. If multiple headers appear visually, verify only the site-wide header uses `role="banner"`.
  5. 5. Turn on a screen reader:
  6. • NVDA: Press D to cycle through landmarks
  7. • VoiceOver: VO + U → Landmarks
  8. • TalkBack: Swipe to navigate landmarks
  9. • Expected: Only one banner landmark is announced.
  10. 6. If multiple banners are announced, remove `role="banner"` from all but the site-wide header.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance