Unique landmark role/name combinations

Landmarks must have a unique role/name combination without duplicates

Each landmark must be uniquely identifiable by its role or by its role plus an accessible name.

This issue appears in headers, footers, nav, main, asides, regions, search, and forms.

It affects screen reader users and anyone relying on landmark navigation to move through pages quickly.

Why It Matters

Duplicated landmarks make navigation lists confusing. Screen reader users hear repeated items with the same label and cannot tell sections apart.

People with low vision or cognitive disabilities rely on consistent structure. Unclear landmarks increase cognitive load and cause orientation loss.

Multiple mains or banners also break expectations for page structure, making it harder to find the start or end of primary content.

Common Causes

• More than one main landmark in a document.
• Multiple top-level headers or footers that become duplicate banner or contentinfo landmarks.
• Several nav or complementary regions that share the same aria-label text.
• Copy-pasted components reusing the same aria-labelledby target.
• Unlabeled generic regions (role=region) or forms when more than one of that role exists.
• Embedded iframes whose documents add duplicate roles without distinct names.

How to Fix

• Keep exactly one of each page-unique landmark per document: main, banner, and contentinfo.
• If you have multiple instances of the same role (navigation, complementary, search, region, form), give each a unique accessible name.
• Use aria-label for short, descriptive names (e.g., "Primary navigation", "Footer navigation").
• Use aria-labelledby when a visible heading names the landmark. Ensure the referenced ID and text are unique.
• Avoid creating top-level duplicate banners or contentinfo. Use header/footer inside sectioning elements (article, section) when local headers/footers are needed.
• Ensure IDs used by aria-labelledby are unique on the page and point to unique, meaningful text.
• For iframes, give the frame a title and ensure the document inside the frame follows the same uniqueness rules.
• Recommendation: If only one instance of a role exists (e.g., a single navigation), you may omit the name. If multiple exist, each must have a distinct name.

How to Test

• Visual/DevTools:
• Open your browser's accessibility tree or use an automated scanner.
• List landmarks and check that each role appears once or has unique names when repeated.
• Keyboard:
• Tab to any skip links and ensure they target the single main content region.
• Verify focus order is not disrupted by unintended duplicate structural landmarks.
• Screen reader:
• NVDA: Use NVDA+F7 and open the Landmarks list; confirm no duplicate role/name pairs.
• JAWS: Use quick nav for regions (R) or the list of regions; confirm each repeated role has a distinct name.
• VoiceOver (macOS/iOS): Use the Rotor > Landmarks; ensure each item is unique and descriptive.
• Mobile/touch:
• TalkBack or VoiceOver: Open the landmarks list/rotor and confirm repeated roles are uniquely named.

Good Example

<header>Site header</header>
<nav aria-label="Primary navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/shop">Shop</a></li>
  </ul>
</nav>
<main>
  <h1>Spring Catalog</h1>
  <section role="region" aria-labelledby="featured-heading">
    <h2 id="featured-heading">Featured products</h2>
    <!-- content -->
  </section>
</main>
<aside role="complementary" aria-label="Related articles">
  <!-- links -->
</aside>
<form aria-labelledby="newsletter-heading">
  <h2 id="newsletter-heading">Email newsletter signup</h2>
  <label for="email">Email</label>
  <input id="email" type="email">
  <button type="submit">Subscribe</button>
</form>
<nav aria-label="Footer navigation">
  <ul>
    <li><a href="/privacy">Privacy</a></li>
    <li><a href="/terms">Terms</a></li>
  </ul>
</nav>
<footer>Site footer</footer>

Bad Example

<header>Header A</header>
<header>Header B</header> <!-- second banner -->
<nav aria-label="Navigation">
  <!-- links -->
</nav>
<nav aria-label="Navigation"> <!-- duplicate name -->
  <!-- links -->
</nav>
<main>
  <h1>Page Title</h1>
</main>
<main>Second main content</main> <!-- second main -->
<form aria-label="Subscribe"></form>
<form aria-label="Subscribe"></form> <!-- duplicate name -->
<aside role="complementary"></aside> <!-- unlabeled complementary #1 -->
<aside role="complementary"></aside> <!-- unlabeled complementary #2 -->
<footer>Footer A</footer>
<footer>Footer B</footer> <!-- second contentinfo -->

Quick Checklist

• Only one main, one banner, and one contentinfo per document.
• Multiple nav, form, search, region, or complementary landmarks each have a unique accessible name.
• aria-label values are short, descriptive, and not reused for different landmarks.
• aria-labelledby points to unique IDs with unique visible text.
• Local headers/footers live inside sectioning elements to avoid extra banner/contentinfo.
• Iframes have titles, and their documents follow the same landmark rules.
• Screen reader landmarks list shows no duplicate role/name pairs.
• Automated tests show no landmark uniqueness violations.