Make sure the document has at most one banner landmark

The landmark-no-duplicate-banner rule ensures that an HTML page contains no more than one role="banner" landmark. Although HTML5 allows multiple <header> elements, ARIA banner landmarks should be unique per page.

What is being tested?

This rule verifies that:

• Each HTML page has no more than one element with role="banner".
• If multiple <header> elements are used, only one of them is assigned the role="banner".

Why it matters

Landmarks help screen reader users navigate and understand the structure of a page. When multiple banner landmarks are present, it creates confusion and makes navigation inefficient.

JAWS, NVDA, and VoiceOver allow users to navigate by ARIA landmarks, providing an elegant way to skip to the main sections without changing the visible design. However, this benefit is limited to screen reader users, as browsers currently do not visually expose landmarks to sighted or low-vision keyboard users.

Failing example

<header role="banner">
  <p>Global site header</p>
</header>

<div role="banner">
  <p>Another banner</p>
</div>

Here, there are two banner landmarks, which violates best practice.

Passing example

<header role="banner">
  <p>Global site header</p>
</header>

<header>
  <p>Section-specific header</p>
</header>

Here, only one element has role="banner", even though multiple <header> elements are used.

Best practices

• Assign role="banner" only to the main sitewide header.
• Use additional <header> elements for section headings without the banner role.
• Combine HTML5 landmarks and ARIA roles for maximum accessibility support.