Don’t: hide everything in alt
alt="Chart q1 18 q2 28 q3 39 q4 52 green bars..."Long alt is difficult to navigate, reference, and reuse.
Prerequisite: Write alt text for the image’s purpose.
The principle
Complex image principle
A short alternative identifies the chart. A long description communicates the relationships, values, and conclusions needed for the same task.
Complete pattern
Summary first. Data on demand.
The visible summary helps everyone. The table supplies exact values and remains available to screen readers, zoom users, search, and copy-and-paste.
Long description and values
Resolved issues rose from 18 in Q1 to 28 in Q2, 39 in Q3, and 52 in Q4. The largest increase was 13 issues between Q3 and Q4.
Show the data table
| Quarter | Issues |
|---|---|
| Q1 | 18 |
| Q2 | 28 |
| Q3 | 39 |
| Q4 | 52 |
Do / Don’t
Match detail to the task.
Neither a filename nor a paragraph crammed into an alt attribute gives people a practical route through complex content.
Do: layer the information
alt="Issues resolved increased every quarter"
<p>Summary…</p>
<table>Exact values…</table>Keep a concise equivalent with the image and full information in structured HTML.
Decision path
Choose the needed depth.
- Identify the purpose: trend, comparison, process, map, or exact data.
- Write a brief name and essential takeaway.
- Provide all task-relevant relationships and values in nearby HTML or a clearly linked description.
- Use headings, lists, and tables so the description is navigable.
- Check that the page still communicates the same conclusion when the image is unavailable.