Add landmarks so users can skip around
Landmark roles carve a page into regions software can list and jump between. banner, navigation, main, complementary, contentinfo, search, form. W3C lists ARIA11 as sufficient for 1.3.1 Info and Relationships. It is also sufficient for 2.4.1 Bypass Blocks, on the path where repeated material is grouped so it can be skipped, and for the AAA rule about identifying the purpose of regions. Native HTML elements produce most of these implicitly, which is the better route where one exists. The role attribute is for the cases HTML has no element for, and search is the one nearly every site misses. Where a page has two landmarks of the same type, two navigation blocks or two regions, each needs its own name before either is useful.
How we find it in an audit
Missing landmarks, content sitting outside every landmark, and duplicate unnamed landmarks are automated finds. The judgment is coverage. We open the landmark list on each template and check it against what a sighted visitor can see, because a page where half the content sits outside any region gives a listener a map with holes in it.
How affected users experience it
Landmark navigation is one keystroke, and it is how a lot of screen-reader users start on an unfamiliar page. With a real map they go straight to main and begin reading the thing they came for. With no landmarks the keystroke does nothing, and the route to the content is through the logo, the utility links, the menu and the promo bar, on every page of the site.
Passes vs. fails
Passes
<header>Site name</header>
<nav aria-label="Main">Menu</nav>
<form role="search" aria-label="Site search">Search field</form>
<main>Article</main>
<footer>Contact details</footer>Fails
<div class="header">Site name</div>
<div class="sidebar">Menu</div>
<div class="content">Article</div>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
- Bypass Blocks of Repeated ContentA tool finds candidates, you decide
- Document has heading for non-repeated contentNothing implements this yet
- Document has a landmark with non-repeated contentA tool can check this
- Block of repeated content is collapsibleNothing implements this yet
- Document has an instrument to move focus to non-repeated contentNothing implements this yet
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.
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA13sufficientName repeated landmarks so they are distinguishable
- 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 ARIA11: Using ARIA landmarks to identify regions of a page. 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.