Alt text is the text version of an image. It is read aloud by the screen readers used by blind and partially sighted people, shown by the browser when the image fails to load, and used by search engines to understand the content. In HTML it goes in the alt attribute, and it is required by the very first WCAG criterion, 1.1.1 on non-text content.
Writing it is not hard, but it requires answering a question that often gets skipped: what is this image for, at this point on the page?
Function before appearance
The same photo may need different alt text depending on the context. Take a photo of a person sitting at a desk with a laptop:
- in an article about remote work, where it generically illustrates the topic, «Person working on a laptop at home» may be enough, or it may even be considered decorative;
- on an «About us» page, the useful information is who it is: «Giulia Rossi, head of customer support»;
- on a product page for a desk, the object is what matters: «Light oak desk, 120 cm, with side drawer».
Alt text does not describe the image in the abstract: it conveys the information the image carries in that context.
The main cases
Informative images
Photos, illustrations and diagrams that add content. The text should be short, usually one sentence, and convey the essentials. There is no need to start with «Image of» or «Photo of»: the screen reader already announces that it is an image.
Functional images
Icons and images that are links or buttons. Here the alt text describes the action, not the drawing. A magnifying glass icon in a search field is not «magnifying glass», it is «Search». The logo at the top that leads to the home page can be «Home page» or the organisation's name, depending on the site's conventions.
Decorative images
Dividers, backgrounds, purely aesthetic illustrations, generic photos that repeat what the text already says. They should be marked with an empty attribute:
<img src="decorative-wave.svg" alt="">
The empty attribute tells the screen reader to ignore the image. Leaving the attribute out altogether is different and worse: some screen readers, lacking alternatives, read out the file name, with results such as «IMG underscore 4521 dot jpg».
Images of text
If an image contains words, such as a banner or a photo of a sign, the alt text must include them. Better still, where possible, avoid text inside images and write it as real HTML text, which can be zoomed, translated and adapted to the screen.
Charts and complex images
A bar chart with twelve values cannot be summed up in one line. In these cases the alt text gives the main message, for example «Monthly sales chart: steady growth until June, then a summer decline», and the full data goes elsewhere, in a table or an extended description near the chart. The table helps everyone, not just screen reader users.
Examples side by side
| Context | Avoid | Better |
|---|---|---|
| Cart icon in the header | «cart.png» | «Cart, 3 items» |
| Photo of a speaker at an event | «Smiling man» | «Luca Bianchi, speaker at the event» |
| Map of the office | «Map» | «Map: the office is on Piazza Duomo, next to the metro stop» |
| Decorative arrow | «arrow» | alt="" |
| X-shaped close button | «X» | «Close» |
Common mistakes
- Stuffing the text with keywords for SEO: to a listener it becomes a meaningless list.
- Repeating the caption: if there is already a caption under the photo that says it all, the alt text can be shorter or empty, so that the screen reader does not read the same thing twice.
- Overly long descriptions for simple images: the listener has to sit through all of it before moving on.
- Generating text automatically without reviewing it: image description tools can help with a first draft, but they do not know the context and sometimes get things wrong.
- Forgetting CSS background images that carry information: they have no
altattribute, so the information must be provided some other way.
A quick method
When writing alt text, it helps to imagine describing the page out loud to someone over the phone. What would you say about this image? If the answer is «nothing, it is just decoration», leave the attribute empty. If it is a sentence, that sentence is your alt text.
In short
- Alt text conveys the image's function in its context, not its appearance in the abstract.
- For icons and clickable images, describe the action: «Search», «Close», «Home page».
- Decorative images need
alt="", never a missing attribute. - Complex charts and diagrams need a short summary plus the full data in a nearby table or text.
