alt-text-for-complex-images
Web validation
Complex images such as charts, graphs, maps, and detailed diagrams carry more information than a short phrase can hold. A short alt text on its own cannot pass on everything the image shows. These images need two things: a short alt text that names the image, and a longer description, available to assistive technology, that lays out the detail. Without the long description, screen reader users miss the information the image conveys.
Pass Patterns
Short alt with a referenced description
The alt names the chart, and aria-describedby points to the full description.
<img src="sales-chart.png" alt="Quarterly sales chart" aria-describedby="sales-desc" />
<div id="sales-desc">
Sales rose from Q1 to Q3, peaking in Q3, then declined slightly in Q4.
</div>Short alt with a nearby visible description
The diagram has a concise alt, and the surrounding text gives the detail for everyone.
<img src="process-diagram.svg" alt="Order fulfillment process diagram" />
<p>
The process starts with order placement, followed by payment verification,
packaging, and shipping to the customer.
</p>Fail Patterns
Short alt with no description
The alt names the chart, but its values and trend are not available anywhere in text.
<img src="sales-chart.png" alt="Quarterly sales chart" />Diagram with no accompanying description
The alt names the diagram, but the steps it shows are not described in text for assistive technology users.
<img src="process-diagram.svg" alt="Order fulfillment process diagram" />Everything packed into the alt text
The alt now contains the full description, but a single long alt cannot be navigated, skimmed, or paused, and the detail is not available to sighted users. A complex image still needs a concise alt plus a separate long description.
<img src="sales-chart.png" alt="Bar chart titled Quarterly Sales 2025. Q1 sales were $100,000, Q2 sales were $130,000, Q3 sales were $150,000, and Q4 sales were $120,000. Sales rose from Q1 to Q3, peaked in Q3, then declined slightly in Q4." />WCAG techniques
Sufficient techniques
A complex image needs a short text alternative and a long description (WCAG Situation B):
- G95: Providing short text alternatives that provide a brief description of the non-text content
- H37: Using alt attributes on img elements
- ARIA15: Using aria-describedby to provide descriptions of images
- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
- 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
Failure techniques
ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Navigate to a complex image such as a chart or diagram.
- Listen to the announced alt text.
- Check whether additional descriptive content is available.
Expected results: The screen reader announces a short label and provides access to a detailed explanation.
Actual results: Only a vague or incomplete alt text is announced, with no way to reach the full details.
Inspecting the browser dev-tools
- Open browser dev tools.
- Select the image element.
- Check the accessibility tree.
- Verify the presence of
altand an associated description, such asaria-describedby.
Expected results: The image has a meaningful accessible name and a referenced description.
Actual results: The image has only a short or unclear name, with no associated description.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires non-text content to have a text alternative that serves the same purpose. A complex image cannot be summed up in a short phrase, so it needs both a short alt and a long description. Without the description, the alternative does not present the same information and the criterion is not met.
Why is this issue marked as Moderate?
Users can still get the short label from the alt text, but they miss the detail needed to fully understand the image. This is a partial barrier that mainly affects people who rely on assistive technology to interpret complex visual information.
Why does this check require human review?
Judging whether a long description fully and accurately conveys a complex image depends on the image's content, which a tool cannot evaluate. This check surfaces complex images so a reviewer can confirm that a complete, correct description is present.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| EN 301 549 | 9.1.1.1 Non-text Content | Same as the WCAG text. |
| Section 508 | 1194.22(a) | A text equivalent for every non-text element shall be provided (e.g., via “`alt`”, “`longdesc`”, or in-element content). |
| 508 Trusted Tester | 1.1.1-meaningful-image-name, 7.A | The accessible name and accessible description for a meaningful image provides an equivalent description of the image. |