Identify page regions with semantic HTML elements
The region elements, header and nav and main and aside and footer, map to landmarks, and landmarks are what a screen-reader user gets around a page by. W3C lists H101 as sufficient for 1.3.1 Info and Relationships, and it is worth noticing where W3C does not list it. Landmarks are not on the sufficient list for bypassing repeated blocks, and the reason is fair. A main element gives a screen-reader user somewhere to jump to and gives a sighted keyboard user nothing at all, which is why a visible skip link still exists as a separate technique. Two conditions catch people out. A header counts as a banner landmark only when it is a direct child of body, so a header inside an article is not one. And a region that needs an accessible name before it is exposed, section being the usual case, is simply not a landmark until you name it.
How we find it in an audit
Missing landmarks, content sitting outside every landmark, and more than one main are quick automated checks. The comparison is the human part. We put the landmark list next to the visual layout for each template and check that every region a sighted visitor can see is a region a screen-reader user can jump to, the search form included.
How affected users experience it
Landmarks are the map of the page. With them, one keystroke moves between navigation, main content and footer, which is the ear's version of the glance a sighted reader does without thinking about it. Without them the page is one undifferentiated column, and the only route to the content runs through everything above it, on every single visit.
Passes vs. fails
Passes
<header>Site name</header>
<nav aria-label="Main">Menu links</nav>
<main>Article</main>
<footer>Contact details</footer>Fails
<div id="header">Site name and menu</div>
<div id="content">Article</div>
<div id="footer">Contact details</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
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
- 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
This guide is our interpretation of W3C technique H101: Using semantic HTML elements 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.