G73Sufficient technique WCAG 1.1.1 Level A Partly scanner-detectable

Link complex images to a long description

A chart, a diagram, a map. Some images need more than a sentence, and G73 puts that description somewhere else with a link to it sitting right beside the image. W3C counts it as sufficient for the non-text-content rule at Level A. Immediately adjacent is the requirement, and it means immediately, before or after the image rather than further down the page. The short alt goes on doing its own job of naming the image, and the link does the rest. Two pieces of housekeeping travel with it. Where the description sits among other text, mark where it ends so a reader knows when to turn back. And if the browser's Back button will not return them to the image, give them a link that will.

How we find it in an audit

Complex images come out of the page first, which means charts, diagrams, maps, infographics and anything where the alt text is doing more work than a sentence can hold. For each one we check the link exists, that it sits immediately beside the image in the markup, and that following it lands on the description for that image rather than on a page of descriptions. Then a reviewer reads the description against the image and lists what a sighted viewer takes away that the words never mention.

How affected users experience it

A blind reader meets a chart, hears its short alt, and needs to know whether the numbers exist anywhere at all. A link right there answers that in one word. Buried three paragraphs down, the same link might as well not exist, because nothing in the alt text told anybody to go looking. The return journey counts just as much. Reaching the end of a long description with no marker and no way back leaves someone stranded in the middle of a page they were only visiting.

Passes vs. fails

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

Passes

The diagram is followed immediately by a link reading Full text comparison of the three plans, and that description ends with a marker.

Fails

A pricing comparison diagram carries alt text reading comparison chart, and the description exists nowhere on the site.

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 G73: Providing a long description in another location with a link to it that is immediately adjacent to the 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.