Mark leftover page areas with role=region
role=region is the generic landmark, for a block of content that deserves its own place on the map and does not fit any of the named roles. A live scores panel, a stock ticker, a portlet on a dashboard. W3C lists it as sufficient for 1.3.1 Info and Relationships, and its test procedure is three checks in the order you should run them. The block has to be important enough to deserve a landmark of its own. No standard role can fit it better. And it has to carry a name. All three have to hold. The name is not decoration, because an unnamed region is not exposed as a landmark, so a region with no name does nothing at all. And the technique is easy to overuse. Ten regions on a page is a map with no shape to it.
How we find it in an audit
The role and the missing name are automated. The first two questions are ours, and they are the ones that decide whether the markup helps. We walk the landmark list against the visual layout and cut anything that landed there because it looked like a box rather than because a listener would want to jump to it.
How affected users experience it
A named region shows up in the landmark list, so somebody following a match can jump to Live scores whenever they want and go back to reading. Without it, that panel is a run of text somewhere in the middle of the page, findable only by reading past everything before it, every time the score changes.
Passes vs. fails
Passes
<div role="region" aria-labelledby="scores-h">
<h2 id="scores-h">Live scores</h2>
</div>Fails
<div class="scores-panel">Live match scores</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
- ARIA24sufficientGive meaningful font icons role=img
This guide is our interpretation of W3C technique ARIA20: Using the region role to identify a region of the 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.