Writing good alt text
What alt text is for
Alt text is a short text alternative, set with the <code>alt</code> attribute, that replaces an image for people who cannot see it. Screen readers read it aloud, and it appears if the image fails to load.
This is WCAG 1.1.1 Non-text Content (level A). The key idea: write what the image does on this page, not a full inventory of what it shows.
Decide by purpose
Informative
Convey the same information in a short phrase.
Decorative
Use an empty value, <code>alt=""</code>, so screen readers skip it.
Functional
Describe the action, not the picture. A magnifier icon button gets “Search”.
Text in image
Repeat the text in the alt value.
An empty alt is not the same as a missing alt. A missing attribute can make some screen readers read the file name.
Writing tips
- Skip “image of” and “picture of”. Screen readers already announce that it is an image.
- Be concise. A short phrase or one sentence is usually enough.
- Do not repeat the caption. If the text next to the image already says it, use an empty alt.
- Mention only what matters for the content. A product photo may need colour; a team photo may not.
Compare: for a linked logo in a header, <code>alt="Home"</code> or the site name serves the user better than “blue logo with a circle”.
Charts and complex images
Charts, maps and diagrams carry too much information for a short alt. Give a brief alt that names the chart and its main point, then provide the details nearby as visible text or a data table.
Context decides everything: the same photo of a bridge needs different alt text in a travel article, an engineering report and a decorative banner.
The right text depends on the job the image does. These examples show the same kind of image in different roles.
Product photo
Weak: “image of shoe”. Better: “Red leather running shoe, side view”.
Icon button
Weak: “magnifier icon”. Better: “Search”.
Divider flourish
Use <code>alt=""</code> so it is skipped.
- Ask: if the image were removed, what would a reader miss?
- If the answer is nothing, treat it as decoration.
- Write the alt text in the same language as the page content.
Sources
- W3C WAI. Images Tutorial. https://www.w3.org/WAI/tutorials/images/
- W3C. Understanding SC 1.1.1 Non-text Content. https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.