Landmarks should have a unique role or role/label/title (i.e. accessible name) combination

Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).

Why this matters and how to fix it

Why this matters

Screen reader users rely on unique landmark regions for quick navigation. When multiple landmarks share the same role and name, they become indistinguishable — users can’t tell which one leads to which part of the page.

How to fix this issue

Each landmark must be uniquely identifiable by its role or accessible name. For example, if multiple <nav> elements exist, give each one an aria-label that describes its purpose (e.g. 'Primary navigation', 'Footer links').

Automated detection · Manual review recommended

Developer guidance

Avoid duplicate landmarks with identical names. When you must use multiple landmarks of the same type, label them clearly using aria-label or aria-labelledby. Confirm uniqueness in the browser accessibility tree or with Axe DevTools.


Code examples

Incorrect Implementation

<nav aria-label="Navigation">
  <ul><li><a href="/home">Home</a></li></ul>
</nav>
<nav aria-label="Navigation">
  <ul><li><a href="/contact">Contact</a></li></ul>
</nav>

Correct Implementation

<nav aria-label="Primary navigation">
  <ul><li><a href="/home">Home</a></li></ul>
</nav>
<nav aria-label="Footer links">
  <ul><li><a href="/contact">Contact</a></li></ul>
</nav>
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance