Page must not have more than one banner landmark

Rule ID: landmark-no-duplicate-banner
Ruleset: axe-core 4.0
User Impact: Moderate
Guidelines: Deque Best Practice
 

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

Moderate
▼
Minor
Critical

Disabilities Affected

  • Sighted Keyboard Users
  • Blind
  • Deafblind

Standard(s)

  • Deque Best Practice

    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.

    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 opens in a new window available, which adds the ability to navigate by landmarks in Firefox, but this is not a native feature of the browser.

    Rule Description

    Ensures the page has at most one banner landmark.

    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.

    Resources

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.0 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: