R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Avoid Duplicate Banner Landmarks

  • Home
  • Blog
  • Avoid Duplicate Banner Landmarks
  • June 1, 2025

Avoid Duplicate Banner Landmarks

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

How to Fix the Problem

Ensure that each individual HTML page includes only one banner landmark.

The banner landmark identifies site-wide information typically found at the top of a page, such as branding, global navigation, or a logo. Whether you’re using ARIA (role="banner") or the native HTML5 <header> element (which maps to the banner role), it’s essential to avoid duplication.

Steps to fix:

  1. Identify all banner landmarks: Look for elements with role="banner" and <header> elements.

  2. Decide which one to keep: Retain the landmark associated with the primary header for the page, usually containing the site’s logo and main nav.

  3. Remove or repurpose duplicates: Convert any secondary <header> or role="banner" elements into appropriate alternatives such as role="region" or simply remove the role attribute if the landmark role is unnecessary.

Example:

html
<!-- Correct: One banner landmark -->
<header role="banner">
<img src="logo.png" alt="Site Logo">
<nav>...</nav>
</header>

Avoid:

html
<!-- Incorrect: Two banner landmarks -->
<header role="banner"> ... </header>
<section>
<header role="banner"> ... </header> <!-- REMOVE this one -->
</section>

💡 Note: Even though HTML5 allows multiple <header> tags, only one should be recognized as the banner landmark for accessibility.

Why it Matters

Screen reader users rely on landmarks for quick navigation. When a page contains multiple banner landmarks, it introduces confusion and makes it harder for blind or visually impaired users to locate key site-wide information.

Assistive technologies like JAWS, NVDA, and VoiceOver enable users to jump between landmarks efficiently. However, the banner landmark is intended to appear only once per page, representing the global header of the site. Duplicate landmarks break this model and dilute the effectiveness of navigational tools.

Because landmarks are not visibly displayed, sighted keyboard and low-vision users may not benefit from them without additional cues. Still, they remain crucial for screen reader navigation and should be applied consistently and correctly.

Rule Description

This rule ensures that an HTML document includes at most one banner landmark. This landmark should represent the site-wide header content and must not be duplicated within nested page sections or components.

The Algorithm (in simple terms)

  1. Find all elements with role="banner" or HTML5 <header> elements that map to the banner role.

  2. Remove any elements that don’t correctly map or have conflicting roles.

  3. Check that no more than one banner landmark is present on the page.

Tags:
Share:

Leave A Comment