Document should not have more than one banner landmark

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

Multiple banners confuse screen reader users because they expect only one header landmark representing the site’s top-level identity.

How to fix this issue

Use one <header> element or one role='banner' per document. Remove or change extra banners to role='presentation' or a sectioning element.

Automated detection · Manual review recommended

Developer guidance

Global header belongs at the top of the DOM. Section-specific headers should not have 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>
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance