probeo

Why do landmarks of the same kind need different labels?

landmark-unique page

The issue

When a page has two landmarks of the same kind with no labels, or the same label, a screen reader lists them as “navigation” and “navigation”. The user can’t tell the main menu from the footer links or the breadcrumb without visiting each one. The landmarks exist, but they don’t help anyone choose.

The cause is usually several <nav> elements, each added by a different component with no aria-label.

Scope

Visible landmarks are grouped by role: banner, complementary, contentinfo, form, main, navigation, region and search. Where a role appears more than once, the landmarks are compared by their accessible name, ignoring case. Each landmark that shares its name with another of the same role is reported, and two landmarks with no name at all count as sharing one.

A <section> counts as a region only when it has an aria-label or aria-labelledby, as in browsers.

This is a best-practice rule, related to WCAG 1.3.1 and 2.4.1.

How to check you have it

  • In probeo: the page reports the landmark-unique rule, “Ensures landmarks are unique”, on each landmark that shares its role and name with another, with moderate impact.
  • By hand: list the page’s <nav>, <aside> and labeled <section> elements, and the aria-label or aria-labelledby on each. Two of the same kind with the same label, or none, are the problem.
  • With a tool: a screen reader’s landmarks list shows each landmark’s role and name. Identical entries are the ones to fix.

The fix

Give each landmark that shares a role with another a label that says what it is.

Use aria-label for a short name, or aria-labelledby pointing at a visible heading. Leave the landmark type out of the label, because the screen reader already announces it: “Main”, not “Main navigation”.

<nav aria-label="Main">…</nav>
<nav aria-label="Breadcrumb">…</nav>
<nav aria-label="Footer">…</nav>

Done when: no two landmarks of the same role share a name, and the check above comes back clean.

Do not

  • Do not give two landmarks of the same role the same label.
  • Do not include the role in the label, as in “Navigation navigation”.
  • Do not add landmark roles to elements that don’t need them just to label them.

FAQ

Does a single navigation landmark need a label?

No. A role that appears once is unique on its own. Labels are needed when the same role appears more than once.

Is aria-labelledby better than aria-label?

When the landmark already has a visible heading, pointing aria-labelledby at it keeps the spoken name and the visible one the same. Otherwise aria-label is simpler.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.