Banner landmark should not be contained in another landmark

WCAG 1.3.1
Info and Relationships

Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).

Why this matters and how to fix it

Why this matters

A banner landmark identifies site-wide content like a header. Nesting it inside another landmark breaks landmark navigation for assistive technologies.

How to fix this issue

Ensure the <header> (or role='banner') is only present once and is a direct child of <body>. Do not wrap it inside <main>, <article>, or <section>.

Automated detection · Manual review recommended

Developer guidance

Keep global landmarks (<header>, <main>, <footer>, <nav>) as top-level siblings in the DOM. Verify with browser accessibility tree or Axe DevTools.

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>
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance