Page must not have more than one banner landmark

Rule ID: landmark-no-duplicate-banner
User Impact: Moderate
WCAG: Best Practice

Compliance Data & Impact

User Impact

Disabilities Affected

  • Sighted Keyboard Users
  • Blind
  • Deafblind

Requirement(s)

  • Best Practice

WCAG Success Criteria

  • Not specified, or not applicable

Section 508 Guidelines

  • Not specified, or not applicable

Rule Description

Ensures the page has at most one banner landmark.

Why it Matters

Landmarks allow blind users to navigate and find content quickly. Missing landmarks require screen reader users to sort through too much extra information to find anything.

JAWS, NVDA, and VoiceOver support the ability to navigate to sections of a web page using ARIA landmarks. Landmarks provide a more elegant solution to the problem of providing a way for users to skip to the main content of the web page. There is no visible alteration to the web design, making it unobtrusive and invisible. Of course, the fact that this technique is invisible is fine for blind screen reader users, but not so fine for sighted keyboard users or screen enlarger users with low vision. In this sense, HTML 5 regions and ARIA landmarks cannot yet replace the old-fashioned “skip navigation” links. Browsers still do not have a built-in way to notify users that HTML 5 regions or ARIA landmarks are present. Screen reader users are the only ones who can take advantage of them. There is a Firefox ARIA landmark extension  available, which adds the ability to navigate by landmarks in Firefox, but this is not a native feature of the browser.

How to Fix the Problem

Ensure that individual HTML pages have only banner landmark.

Decide which banner landmark you want to keep and remove any other banner landmarks.

The role="banner" ARIA landmark should only appear once on an element that is unique to the HTML document even though the HMTL5 specification allows multiple instances of an equivalent header landmark value. It is appropriate in most web designs to have only one banner landmark whether it is specified using ARIA or HTML5.

The Algorithm (in simple terms)

This rule finds all banner landmarks, filters out any landmarks that do not map their role, and verifies that there is no more than one.