Describe complex images in the nearby text
Sometimes the description is already written. The paragraph under the chart explains it, and only a sighted reader can tell the two belong together. G74 closes that gap by naming the location in the short alt, so the alt text says the details follow below and the reader knows to keep going. W3C counts it as sufficient for the non-text-content rule at Level A. The description does not have to be the very next element, and it does have to be near, both on the screen and in reading order. What it has over hiding the description behind a link is that everybody gets it, including the sighted reader who missed something in the picture.
How we find it in an audit
For every complex image the first question is whether the surrounding text already carries the detail, and how often the answer is yes surprises people. Where it does, we read the alt text to see whether it points there. October sales chart clears a scanner and tells a screen-reader user nothing about the paragraph underneath. We check the description is near in reading order as well, since visually near and near in the markup are two different things on a floated layout.
How affected users experience it
The paragraph under the chart gets read out like any other paragraph, and nothing marks it as belonging to the image. So a screen-reader user hears the alt, concludes the chart is out of reach, and skips forward past the very text that explained it. One phrase in the alt changes that completely. Details in the text below turns a dead end into a signpost, and it costs about eight words.
Passes vs. fails
Passes
Alt text reading Line chart of signups, described in the paragraph below, so the image and its explanation are formally introduced.
Fails
A chart with alt text reading chart sits above a paragraph that fully explains it, a connection only sighted readers can make.
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.
- ARIA6sufficientName icon-only controls with aria-label
- ARIA9sufficientAssemble one label from several text pieces
- ARIA10sufficientName images and charts with aria-labelledby
- ARIA15sufficientLink complex images to longer descriptions
- C9sufficientPut decorative images in CSS backgrounds
- G68sufficientDescribe the purpose of live-only streams
This guide is our interpretation of W3C technique G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description. 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.