ARIA10Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Name images and charts with aria-labelledby

aria-labelledby gives non-text content its name by pointing at text that is already on the page. W3C lists ARIA10 as sufficient for 1.1.1 Non-text Content, with no partner technique and no qualifier, and scopes it to HTML using ARIA. Reach for it where alt is not available, which in practice means inline SVG, canvas, and a figure whose caption already says the thing you would otherwise repeat in an attribute. On an ordinary img element, plain alt is simpler and more robust, so use that. What W3C is describing here is the short name. Where a chart also needs a long explanation, the name and the description are two different jobs and the description belongs in aria-describedby.

How we find it in an audit

An SVG or canvas with no accessible name is an automated find, and so is an aria-labelledby pointing at an id that is not on the page. Then somebody reads the referenced text, because Chart is a name that passes and answers nothing. We check that the words say what the picture shows.

How affected users experience it

An unnamed inline SVG is a hole. Some screen readers say graphic and stop, some say nothing at all, and the caption sitting underneath it is heard as an unattached line of text with no clue what it belongs to. Pointing the SVG at that caption costs one attribute and turns the hole into Website traffic doubled from January to June, image.

Passes vs. fails

Passes: alt text names the product. Fails: the file name is all there is.

Passes

<svg viewBox="0 0 100 40" role="img" aria-labelledby="traffic-cap">
  <polyline points="0,35 30,28 60,15 100,4"></polyline>
</svg>
<p id="traffic-cap">Website traffic doubled from January to June</p>

Fails

<svg viewBox="0 0 100 40">
  <polyline points="0,35 30,28 60,15 100,4"></polyline>
</svg>
<p>Website traffic, Jan to Jun</p>

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Element marked as decorative is not exposedA tool can check this
Image accessible name is descriptiveA tool finds candidates, you decide
Image button has non-empty accessible nameA tool can check this
Image has non-empty accessible nameA tool can check this
Link has non-empty accessible nameA tool can check this
Object element rendering non-text content has non-empty accessible nameA tool can check this
SVG element with explicit role has non-empty accessible nameA tool can check this
Image not in the accessibility tree is decorativeA tool can check this

Other ways to satisfy this rule

39 guides on this site are filed under 1.1.1 Non-text Content. 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.

This guide is our interpretation of W3C technique ARIA10: Using aria-labelledby to provide a text alternative for non-text content. 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.