Name repeated landmarks so they are distinguishable
Two navigation landmarks on one page are two entries in a list, both reading navigation, and nobody can choose between them. ARIA13 names a landmark by pointing aria-labelledby at a heading or other text already on the page. W3C lists it as sufficient for 1.3.1 Info and Relationships, and its test procedure ends on the check that matters, which is whether the referenced text accurately labels that section. A landmark named nav2 passes the first two checks and fails the third. Where there is no visible text to point at, aria-label carries the name instead. Keep the name short, drop the word navigation from it since the role already says that, and give the same treatment to any region role, because those need a name before they are exposed at all.
How we find it in an audit
Duplicate unnamed landmarks and broken id references are automated. The name itself is read by a person. We pull the landmark list on each template and check that somebody hearing only that list, with no page around it, could pick the right entry on the first try.
How affected users experience it
The landmark list is meant to be a shortcut. When it reads navigation, navigation, navigation, region, region, the shortcut has become a guessing game, and a person cycles through five landmarks to find the menu. Named properly it reads Main menu, Pagination, Live scores, and the first press lands.
Passes vs. fails
Passes
<nav aria-labelledby="nav-main-h">
<h2 id="nav-main-h" class="visually-hidden">Main menu</h2>
</nav>
<nav aria-labelledby="nav-pages-h">
<h2 id="nav-pages-h" class="visually-hidden">Pagination</h2>
</nav>Fails
<nav>Site menu</nav>
<nav>Pagination</nav>How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA global properties not used where prohibitedA tool can check this
- ARIA required context roleA tool can check this
- ARIA required owned elementsA tool can check this
- ARIA state or property is permittedA tool can check this
- Table header cell has assigned cellsA tool can check this
Other ways to satisfy this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- ARIA11sufficientAdd landmarks so users can skip around
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA16sufficientName controls from visible text with aria-labelledby
- ARIA17sufficientGroup related form fields with ARIA roles
- ARIA20sufficientMark leftover page areas with role=region
- ARIA24sufficientGive meaningful font icons role=img
This guide is our interpretation of W3C technique ARIA13: Using aria-labelledby to name regions and landmarks. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.