ARIA15Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Link complex images to longer descriptions

Some images cannot be summarized in a sentence. A chart with a trend in it, a process diagram, a floor plan. ARIA15 lets a short alt name the thing and aria-describedby point at a fuller description that lives on the page as real text. W3C lists it as sufficient for 1.1.1 Non-text Content, and the test check that decides it is worth quoting for how it works. The alt and the description are assessed together, as a combined equivalent, which is exactly why a short alt is acceptable here and would not be on its own. Because the description is page text rather than an attribute value, everybody can read it, it can hold links and lists, and it survives a translation tool that would leave an attribute alone.

How we find it in an audit

Broken references and missing alt are automated. Whether the pair adds up to the image is the human check, and it is a reading job rather than a coding one. We look at the chart, then read the alt and the description together, and ask whether somebody who had only those words would draw the same conclusion the picture invites.

How affected users experience it

Alt reading Chart tells a listener a chart exists and nothing about what it shows, so the argument the page is making has a hole in the middle of it. With a description attached, the same image arrives as Bar chart of quarterly sales, and then the numbers, in words, in the order they matter. The point of the chart survives, which is the only thing the reader wanted from it.

Passes vs. fails

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

Passes

<img src="q-sales.png" alt="Bar chart of quarterly sales" aria-describedby="q-sales-desc">
<p id="q-sales-desc">Sales grew every quarter, from 1.2M in Q1 to 2.1M in Q4, with the sharpest rise in Q3.</p>

Fails

<img src="q-sales.png" alt="Chart">

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 ARIA15: Using aria-describedby to provide descriptions of images. 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.