• June 1, 2025

Unique Landmarks Accessibility Guide

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

How to Fix the Problem

To resolve the “landmark-unique” issue, ensure that every landmark (like <main>, <header>, <footer>, <nav>, or elements with landmark roles such as role="banner", role="form", etc.) has a unique combination of role and accessible name.

Here’s how you can do this:

✅ Correct Usage Examples

1. Unique landmark elements:

   html

   KopierenBearbeiten

   <main id="pass-main">Only main</main>
<header id="pass-header">Only header</header>
<footer id="pass-footer">Only footer</footer>


2. Forms with unique aria-labels:

   html

   KopierenBearbeiten

   <form id="pass-form-aria-label-1" aria-label="form-label-1"></form>
<form id="pass-form-aria-label-2" aria-label="form-label-2"></form>


3. Forms with unique aria-labelledby references:

   html

   KopierenBearbeiten

   <div id="form-label-1">form-with-label-1</div>
<form id="pass-form-aria-labelledby-1" aria-labelledby="form-label-1"></form><div id=“form-label-2”>form-with-label-2</div>
   <form id=“pass-form-aria-labelledby-2” aria-labelledby=“form-label-2”></form>

4. Asides with unique labeling:

   html

   KopierenBearbeiten

   <form id="pass-aside-aria-label-1" aria-label="aside-label-1"></form>
<form id="pass-aside-aria-label-2" aria-label="aside-label-2"></form>


❌ Incorrect Usage Examples (What to Avoid)

1. Duplicate landmark roles:

   html

   KopierenBearbeiten

   <main id="violation-main-1">First main</main>
<main id="violation-main-2">Second main</main> <!-- Fails -->


2. Same aria-label used more than once:

   html

   KopierenBearbeiten

   <form aria-label="form-label"></form>
<form aria-label="form-label"></form> <!-- Duplicate label -->


3. Duplicate aria-labelledby values pointing to same element:

   html

   KopierenBearbeiten

   <div id="label1">Form</div>
<form aria-labelledby="label1"></form>
<form aria-labelledby="label1"></form> <!-- Not unique -->


4. Same role without additional label:

   html

   KopierenBearbeiten

   <div role="banner"></div>
<div role="banner"></div> <!-- Duplicate without distinction -->


Best Practices

• Always label landmarks uniquely using aria-label, aria-labelledby, or by ensuring a single occurrence per role.

• Avoid copy-pasting landmark sections without modifying labels or IDs.

• If you need to use the same role more than once (e.g., multiple <nav>), provide each with a unique accessible name.

Why it Matters

Screen readers and other assistive technologies use landmarks to help users quickly navigate through content. When landmarks are not uniquely identified:

• Users can become confused when encountering multiple indistinguishable regions.

• Navigation aids such as rotor menus or landmark lists may present multiple identical entries, which undermines their usefulness.

• It becomes difficult for users to understand the layout or structure of a page, especially for those relying solely on keyboard or screen reader navigation.

Unique landmark labels enable a more predictable and accessible browsing experience.

Rule Description

Each landmark region must be uniquely identifiable. This can be achieved either by:

• Having only one landmark of that type on a page (e.g., one <main>).

• Providing unique accessible names when multiple landmarks of the same type exist.

The Algorithm (in simple terms)

1. Find all elements with landmark roles (main, banner, navigation, etc.).

2. For each, extract its role and accessible name (aria-label, aria-labelledby, or implicit text).

3. Check that no two landmarks share the exact same combination of role and accessible name.

4. If duplicates exist, flag as a violation.