English
Site menu

landmark-no-duplicate-banner

Page must not have more than one banner landmark

manualconfidence: mediumseverity: minoroperable

Checks that at most one banner landmark (role="banner" or a non-nested <header>) exists on the page.

Applies to. Applies whenever the page contains at least one banner landmark (explicit role="banner", or an implicit, non-nested <header>, found the same way as in landmark-banner-is-top-level). A custom element whose ElementInternals give it a landmark role (this.attachInternals().role), with no role attribute naming another, is a landmark as a native element with that role is.

Expectation. At most one banner landmark exists on the page. Per WAI-ARIA Authoring Practices, the banner landmark represents site-oriented content that identifies the page as a whole, so having more than one is ambiguous for assistive technology users navigating by landmark.

What a finding reports.

  • count: how many banner landmarks the page exposes to assistive technology, against a limit of 1.

These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.

Examples

pass
<body>
  <header>Site header</header>
</body>

Only one banner landmark exists.

can't tell
<body>
  <header>First</header>
  <header>Second</header>
</body>

Two top-level <header> elements both resolve to the banner role.

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

LANDMARK_DUPLICATE_BANNER

  1. Open a screen reader's landmarks list, or the Accessibility pane, and count the banner landmarks.
  2. For each one the report names, decide whether it is the page-wide header or the header of a section, card or dialog.
  3. Check that hidden or closed copies (such as a header inside a closed menu) are really hidden from assistive technology.

Pass. Assistive technology finds only one banner, the page-wide header.

Fail. More than one banner is exposed, so landmark navigation offers several page headers, a best-practice miss under the WAI-ARIA banner role.

View source