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

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If a page has two of the same kind of landmark, name them so users can tell them apart.

Why this matters and how to fix it

Why this matters

Screen reader users navigate pages by jumping between landmarks such as navigation, main content, and complementary regions. If multiple landmarks share the same role and name, they become indistinguishable. Users cannot tell which region they are navigating to, leading to confusion and lost context.

How to fix this issue

If there are multiple landmarks of the same type, give each one a unique accessible name. Use `aria-label` or `aria-labelledby` to clarify purpose — for example, label multiple navigation regions as 'Primary navigation', 'Sidebar navigation', or 'Footer navigation'.

Automated detection · Manual review recommended

Developer guidance

Multiple `<nav>` or `<aside>` regions are common in modern layouts — but they must be individually named. Check the resulting DOM, not component structure. The visible label, heading, or described purpose should inform the accessible name. Consistency in naming patterns should be enforced in design systems.

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>

Real-World Examples

Before

<aside role="complementary" aria-label="Related"></aside>
<aside role="complementary" aria-label="Related"></aside>
<!-- Screen reader: 'Related, complementary region' repeated twice → unclear which is which -->

After

<aside role="complementary" aria-labelledby="related-a"><h2 id="related-a">Related Articles</h2></aside>
<aside role="complementary" aria-labelledby="related-b"><h2 id="related-b">Related Tools</h2></aside>
<!-- Screen reader: clear, distinct supporting regions -->

CSS Example (Guidance)

/* Use layout, not structure, to position multiple nav/aside regions */
.layout {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 2rem;
}

Manual testing

  1. 1. Open Chrome DevTools → Accessibility → Landmarks.
  2. 2. Look for any repeated landmark roles (e.g., multiple nav, complementary, region).
  3. 3. Confirm each has a unique accessible name.
  4. • If two landmarks share the same role and name, label them with aria-label or aria-labelledby.
  5. 4. Turn on a screen reader:
  6. • NVDA: Press D to cycle through landmarks
  7. • VoiceOver: VO + U → Landmarks
  8. • TalkBack: Swipe to navigate landmarks
  9. 5. Expected: Each landmark is announced with a meaningful, distinguishable name.
  10. 6. If users cannot tell landmarks apart, add or adjust labels.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance