Writing alt text: the purpose of the image decides

What is alt text?

Alt text sits in the alt attribute of an image. Screen readers read it out, and the browser displays it if the image does not load. For people who cannot see the image, it replaces the visual information. On the page itself it is usually invisible. In your CMS you will find it as an ‘Alternative text’ field in the media library or the image block. It also helps when images do not load on a slow connection, and Google uses it to understand images.

In criterion 1.1.1 at level A, WCAG requires non-text content to have a text alternative that serves the same purpose. This is one of the most fundamental requirements and affects almost every website.

How do I write good alt text?

Ask first: what would be missing without the image? A product photo can show a relevant feature: ‘Backpack with the laptop compartment open’. In a recipe, the picture can explain a step. Describe the information that matters for the task instead of listing every visible detail. In a shop, ‘Alpina hiking boot in grey, side view’ is often enough for a product photo; on a close-up of the sole, on the other hand, what matters is ‘Tread sole with deep grooves’.

The same photo can need different text depending on the page. A portrait of an employee on the contact page might say ‘Anna Weber, contact for partnerships’. In a report on a team meeting, what she is doing matters more. Keep it brief and leave out words like ‘image of’: screen readers usually already announce the element as a graphic. The W3C does not set a fixed length limit. One or two short sentences are enough for most images; if you need more, the information probably belongs in the text. As a test, read the alt text together with the surrounding paragraph. If something sounds repeated or is missing, adjust it.

When does an image get empty alt text?

If an image is purely decorative and conveys no additional information, you write alt="". Examples are background patterns, dividing lines, mood images with no informational content, or an icon right next to text that says the same thing.

Do not simply leave the attribute out. If it is missing entirely, some screen readers read out the file name instead, such as ‘IMG 4711 final dot jpg’. Empty alt text, by contrast, clearly signals: you can skip this image.

In groups of images, one image carries the information for all of them. The five stars of a rating do not need ‘star’ five times, but ‘4 out of 5 stars’ once; the remaining stars get alt="".

What should I write for linked images and logos?

For functional images, describe what happens, not what it looks like. A linked company logo can convey the name and the destination, such as ‘Sommer Bakery, go to home page’. A magnifying glass used as a button is called ‘Search’, a shopping trolley icon ‘Basket’.

If visible text already sits next to the image in the same link, the image usually gets empty alt text. Otherwise people hear the destination twice.

Inline SVG icons have no alt attribute. A meaningful SVG gets, for example, role="img" and a name via aria-label or a title element. You hide a purely decorative icon with aria-hidden="true".

How do I describe charts and infographics?

For a chart with many values, a short alt text is usually not enough. In the alt text, say what the chart is about and point to the details, such as ‘Bar chart: enquiries per month in 2026, values in the table below’. Add the values to the content as a clear text description or a data table.

That way relationships and figures remain available without the chart. The table also helps people who want to read the values precisely or copy them. For a process diagram, a numbered list of the steps often works; for a directions map, the address as text.

What applies to images containing text?

Avoid text in images where real text is possible. At level AA, WCAG 1.4.5 requires information to be presented as text rather than as an image of text, with exceptions such as logos. Real text can be enlarged, recoloured and translated.

If an image contains text, such as a promotional banner, the same wording belongs in the alt text. You should also state important details such as the price, deadline or discount code in the page text. For quote graphics on social media, the full quote belongs in the alt text or the post text.

What are common alt text mistakes?

1. 1File names or placeholders such as ‘Image1’ or ‘Header’ as alt text.
2. 2A linked logo with the alt text ‘Logo’, without a name or destination.
3. 3Strings of search terms. Google expressly advises against stuffing alt attributes with keywords.
4. 4A word-for-word repetition of the caption directly next to the image.
5. 5The same alt text for all product images, even though they show the colour, the back or a detail.
6. 6Alt text from the media library that was written for a different context and does not fit here.
7. 7Lengthy descriptions for pure decoration.
8. 8Alt text in a different language from the page, such as English text from an image library on a German page.
9. 9Important information in a CSS background image: such images have no alt text and are invisible to screen readers.

Can scanners and AI write alt text?

A scanner reliably detects a missing attribute, but not whether a description captures the intended message. AI suggestions often describe what can be seen and miss the purpose in context. Use them as a starting point and ask of every suggestion: does it fit the purpose on this page? Accessonaut records missing alt text on scanned pages; you review your own text or AI suggestions and approve them deliberately. After changes, also check the output with a screen reader.