Banner landmark should not be contained in another 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.

The site header (banner) belongs at the top level — never inside main content.

Why this matters and how to fix it

Why this matters

The banner landmark identifies site-wide header content. Assistive technology users rely on landmark navigation to move quickly across major regions of a page. If the banner is nested inside another landmark (like <main> or <article>), the structure becomes unclear and navigation shortcuts no longer work reliably.

How to fix this issue

Ensure the site-wide <header> (or any element with role="banner") is a direct child of <body> and appears only once. Do not nest banners inside <main>, <article>, <section>, or component wrappers.

Automated detection · Manual review recommended

Developer guidance

Large design systems and SPA frameworks sometimes wrap header components inside layout containers. Always verify the final rendered DOM, not just the component tree. Only one banner landmark should exist per page (with very rare exceptions, like multiple brand contexts).

Code examples

Incorrect Implementation

<main>
  <header role='banner'>
    <h1>Site Title</h1>
  </header>
</main>

Correct Implementation

<header role='banner'>
  <h1>Site Title</h1>
</header>
<main>
  <!-- Page content -->
</main>

Real-World Examples

Before

<div id="app">
  <main>
    <header>
      <h1>Dashboard</h1>
    </header>
  </main>
</div>
<!-- Screen readers treat banner as part of main content → landmark navigation becomes incorrect -->

After

<div id="app">
  <header>
    <h1>Dashboard</h1>
  </header>
  <main>
    <!-- Page content -->
  </main>
</div>
<!-- Banner landmark is now top-level → landmark navigation works as expected -->

CSS Example (Guidance)

/* If you need to visually position the banner inside layout, use CSS—not nesting */
header[role="banner"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

Manual testing

  1. 1. Open the page in Chrome DevTools → Elements → Accessibility Panel.
  2. 2. Expand the Landmark Regions tree.
  3. • Expected: A single 'banner' landmark appears at the top level, as a sibling to main and navigation.
  4. 3. Turn on a screen reader.
  5. • NVDA: Press D to jump between landmarks. • VoiceOver: VO + U → Landmarks. • TalkBack: Swipe up/down to change granularity to Landmarks.
  6. 4. Confirm that navigating to the banner moves focus to the site-wide header region — not inside the main content.
  7. 5. If the banner appears more than once or appears *inside* main/article/section, refactor layout.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance