Landmarks should have unique labels when there are multiple of the same type.

When a page contains multiple landmarks of the same type, each one needs a unique accessible name. Without distinct labels, screen reader users cannot tell the landmarks apart.

Screen readers provide a way to list and jump between landmark regions on a page. If a page has two <nav> elements and neither has an accessible name, a screen reader will present both as "navigation" with no way to distinguish them. The user has to enter each landmark and read its content to figure out which one they want. This slows navigation considerably and defeats the purpose of landmarks.

The same problem applies to any repeated landmark type: multiple <aside> elements, multiple <section> elements, multiple <header> or <footer> elements when used outside sectioning content, or multiple regions defined with ARIA roles.

This rule relates to WCAG Success Criterion 1.3.1 (Info and Relationships) at Level A and to the general principle that programmatic structure should be distinguishable. When landmarks share the same role and lack unique names, the structural information conveyed to assistive technology is ambiguous.

How to fix it

Add a unique accessible name to each landmark of a given type. There are two main approaches:

1. Use the aria-label attribute to assign a short, descriptive label directly on the element.
2. Use the aria-labelledby attribute to point to a visible heading or other text that already describes the section.

Choose aria-labelledby when the landmark already contains a visible heading that describes its purpose. Choose aria-label when there is no visible heading or when you want a more concise label for assistive technology than the visible heading provides.

Keep labels short and descriptive. A label like "Main navigation" or "Footer navigation" is clear. Avoid redundant phrasing like "Navigation navigation" since the landmark role already communicates that the element is a navigation region.

Examples

Failing: multiple landmarks with no unique labels

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
</nav>

<main>
  <p>Page content here.</p>
</main>

<nav>
  <a href="/privacy">Privacy</a>
  <a href="/terms">Terms</a>
  <a href="/contact">Contact</a>
</nav>

Both <nav> elements are announced as "navigation" with no distinguishing label. A screen reader user listing landmarks will see two identical entries.

Fixed: using aria-label

<nav aria-label="Main">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
</nav>

<main>
  <p>Page content here.</p>
</main>

<nav aria-label="Footer">
  <a href="/privacy">Privacy</a>
  <a href="/terms">Terms</a>
  <a href="/contact">Contact</a>
</nav>

Screen readers will announce these as "Main navigation" and "Footer navigation," making them easy to tell apart.

Fixed: using aria-labelledby with visible headings

<nav aria-labelledby="nav-main-heading">
  <h2 id="nav-main-heading">Main menu</h2>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
</nav>

<main>
  <p>Page content here.</p>
</main>

<nav aria-labelledby="nav-footer-heading">
  <h2 id="nav-footer-heading">Footer links</h2>
  <a href="/privacy">Privacy</a>
  <a href="/terms">Terms</a>
  <a href="/contact">Contact</a>
</nav>

Each landmark is labeled by its visible heading, so the accessible name matches what sighted users see.

Failing: multiple complementary landmarks without labels

<aside>
  <p>Related articles</p>
</aside>

<aside>
  <p>Sponsor information</p>
</aside>

Both <aside> elements are announced as "complementary" with no way to distinguish them.

Fixed: unique labels on complementary landmarks

<aside aria-label="Related articles">
  <p>Related articles</p>
</aside>

<aside aria-label="Sponsors">
  <p>Sponsor information</p>
</aside>

Each <aside> now has a distinct accessible name, so screen reader users can identify them without reading their content first.

Learn more:

W3C Reference

Understanding Success Criterion 1.3.1: Info and Relationships

→

W3C Reference

Using ARIA landmarks to identify regions of a page

→

MDN Reference

Landmark Regions

→