Mark the current page with aria-current
aria-current marks the one item in a set that is current. page for the nav link you are on, step for a checkout stage, date or time for a calendar cell, or a plain true where nothing more specific fits. W3C lists it as sufficient for 1.3.1 Info and Relationships, and as sufficient for the AAA rule about telling people where they are within a site. The scoping is a parity argument and the test states it plainly. Where one item in a set is visually highlighted to show it is current, that item needs aria-current. If nothing is highlighted, nothing is being communicated visually either and there is nothing to match. Only one item in a set carries it at a time, which is the whole meaning of the word.
How we find it in an audit
The attribute and its allowed values are automated finds, including more than one page value inside a single navigation block. The judgment is the parity check. We look for every place the design highlights a current item, then check whether the markup says the same thing.
How affected users experience it
A highlighted nav link is instant for a sighted visitor and invisible by ear. Without aria-current the menu reads Home, link, Pricing, link, Support, link, with no sign that Pricing is where they are standing. A person can end up following a link to the page they were already on, which tells them nothing except that the site is confusing.
Passes vs. fails
Passes
<a class="nav-active" aria-current="page" href="/pricing">Pricing</a>Fails
<a class="nav-active" href="/pricing">Pricing</a>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 when used for making information and relationships conveyed through presentation programmatically determinable, so the condition is part of the test rather than a footnote to it.
- 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 ARIA26: Using aria-current to identify the current item in a set. 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.