Give meaningful font icons role=img
An icon font paints its glyph through a CSS pseudo-element, usually from a private-use character that means nothing outside the font. ARIA24 gives that element role=img, which tells software the thing is an image rather than a stray character, and W3C lists it as sufficient for 1.3.1 Info and Relationships. The role is what W3C's test checks. Whether the icon also needs a name is a separate decision and it is the one that matters in practice. An icon that carries meaning on its own, a status tick, an alert triangle, needs aria-label saying what it means. An icon sitting beside text that already says the same thing is decoration, so hide it with aria-hidden and let the words do the work. The hardest case is the icon-only link, where the icon is the whole of the control and the name has to be there.
How we find it in an audit
This is largely manual, because the glyph lives in CSS rather than in the markup and a scanner sees an empty span. We look at every icon on screen and ask what it is doing. Repeating the text next to it, or carrying information nothing else carries. Then we listen to what each one actually announces.
How affected users experience it
Unmarked icon fonts are the source of the strangest thing screen readers say. A private-use character has no name, so some readers say nothing, some read a description of the code point, and some spell out an unrelated symbol. On a status column where the tick is the only signal, the listener hears a row of noise where the answer should be.
Passes vs. fails
Passes
<p>Status: <span class="icon icon-check" role="img" aria-label="Complete"></span></p>Fails
<p>Status: <span class="icon icon-check"></span></p>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 ARIA24: Semantically identifying a font icon with role="img". 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.