Do not emulate links with scripted spans
A span with a click handler that navigates is broken in three separate ways at once. F42 is the documented failure that names all three, filed under info and relationships, keyboard, and name, role and value. One repair mends every one of them. There is a middle state worth knowing about, because it is what a partial fix produces. Add a tabindex and a button role and the element becomes reachable and gets announced as a control, and it is still not announced as a link, so it stays out of the links list a screen reader user navigates by. The ARIA link role can technically supply that, and the published advice is against reaching for it, because the anchor element already exists and already does all of this. The answer is an anchor with an href.
How we find it in an audit
Two checks settle it and they are the two the published procedure names. Is the element's programmatically determined role link, and can it be activated from the keyboard. We run both, plus a third of our own, which is whether it appears in the links list, because that is the route most users would actually take to it. Automated tools find click handlers on non-interactive elements reliably, so the shortlist is cheap and the verification is quick.
How affected users experience it
Screen reader users navigate by links, constantly, pulling up every link on a page and reading down the list to decide where to go. A fake link is not in that list, so as far as the fastest route through your site is concerned it does not exist. It is also not reachable by Tab, not addressable by voice, and not marked in braille as anything you can follow. The page looks like it has twelve links and behaves like it has eleven.
Passes vs. fails
Passes
<a href="/pricing">Pricing</a>Fails
<span class="link" onclick="location.href='/pricing'">Pricing</span>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
- Iframe with interactive elements is not excluded from tab-orderA tool can check this
- Scrollable content can be reached with sequential focus navigationA tool can check this
- Image button has non-empty accessible nameA tool can check this
- Link has non-empty accessible nameA tool can check this
- Button has non-empty accessible nameA tool can check this
- Element with aria-hidden has no content in sequential focus navigationA tool can check this
- Element with presentational children has no focusable contentA tool can check this
- Menuitem has non-empty accessible nameA tool can check this
- Summary element has non-empty accessible nameA tool can check this
- Iframe element has non-empty accessible nameA tool can check this
- Iframe elements with identical accessible names have equivalent purposeA tool finds candidates, you decide
The other techniques filed under this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass 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 F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links. 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.