---
title: "Writing Alt Text: Make Every Image Count"
url: "https://barrierefreihochzwei.de/en/blog/how-to-write-alt-text"
language: "en"
description: "Learn to write useful alt text: a decision tree, decorative images, logos, charts and linked images – with before-and-after examples and a checklist."
published: "2026-09-16T09:00:00+02:00"
updated: "2026-10-15T09:42:05+02:00"
---
# Writing Alt Text: Make Every Image Count
Good alt text doesn’t describe what an image looks like – it says what the image is there to communicate. Here’s how to decide when an image needs text and what to write.
A picture may be worth a thousand words, but only if you can see it. For someone using a screen reader, an image is worth exactly as many words as its alternative text contains. If the text is missing, they’ll hear “graphic” at best – or, at worst, a cryptic file name like “IMG\_4711\_final\_v2.jpg”.
Alt text is one of the oldest and best-known accessibility requirements. Yet it’s still missing on a huge number of websites, or written in a way that helps nobody: “image”, “team photo”, or a string of search keywords. The good news is that few accessibility barriers are as quick and cheap to fix.
In this article, you’ll learn how to decide in a few seconds whether an image needs alt text, what good alt text sounds like, and how to handle the tricky cases: logos, charts and images inside links or buttons.
## What alt text is for
Alt text is the text alternative for an image. In HTML, it lives in the `alt` attribute of the `img` element. Screen readers announce it, refreshable braille displays output it, and browsers show it when the image fails to load. In WCAG, it’s covered by the very first success criterion: [1.1.1 Non-text Content](https://barrierefreihochzwei.de/en/wcag/1-1-1-non-text-content). It requires every piece of non-text content to have a text alternative that serves **the equivalent purpose**.
That word “purpose” is what matters most. Alt text isn’t a museum catalogue entry. Its job is to pass on the information or function the image has in that specific spot. The same photo might need two completely different alt texts on two different pages – or none at all.
Blind users aren’t the only ones who benefit. People on slow connections, people whose email client blocks images, and people using voice assistants all get something out of it. Search engines also use alt text to understand images. Accessibility isn’t a direct ranking factor, but clear text alternatives make your content easier to understand for both people and machines. To learn more about how screen readers and other tools are used day to day, read our article on [assistive technologies](https://barrierefreihochzwei.de/en/blog/how-people-use-assistive-technology).
## The decision tree: five questions for every image
The W3C’s Web Accessibility Initiative publishes a decision tree that holds up well in practice. In simplified form, ask yourself these questions for each image:
1. **Does the image contain text?** If that text isn’t already nearby, it belongs in the alt text. Better still, use real text instead of an image of text.
2. **Is the image part of a link or button?** Then the alt text describes the destination or action, not the appearance.
3. **Does the image add information that isn’t in the surrounding text?** Then summarize that information briefly.
4. **Is it a chart, diagram or other complex graphic?** Then you need short alt text plus a longer description.
5. **Is the image purely decorative, or does it just repeat what’s already there?** Then give it an empty `alt=""`.
The order matters. An icon can look decorative and still be the only label on a button. In that case, it isn’t decoration – it’s functional.
## Informative images: the message, not the pixels
Informative images carry content: a product photo in a shop, a portrait next to a quote, a map showing a location. The guiding question is: what would I say over the phone so the other person gets the same information?
Here’s an example from an online shoe store:
```
```
“Shoe” isn’t wrong, but it won’t help anyone decide whether to buy. Color, material and angle are exactly what sighted shoppers take from the photo.
A second example, from a blog about urban planning. Next to the sentence “The new bike lane opened in March” there’s a photo:
- Before: `alt="Photo of the bike lane"`
- After: `alt="Wide red bike lane separated from car traffic by bollards"`
The text tells you the lane exists. The photo shows what it looks like. That extra layer is what the alt text should capture.
### Rules of thumb for wording
Skip openers like “image of” or “picture showing”. Screen readers already announce images as graphics, so the repetition just wastes time. The exception is when the type of image matters – a painting, a sketch or a screenshot, for example.
Keep it as short as possible and as long as necessary. One sentence or phrase is usually enough. If it’s a full sentence, end it with a period so the speech output pauses naturally. And avoid keyword stuffing: “hiking boot, trekking shoe, outdoor, cheap” is useless to a human listener.
## Decorative images: silence them on purpose
Not every image needs alt text. Divider lines, background textures, mood images with no connection to the content, or an icon right next to text that says the same thing are all decorative. If a screen reader announced them, it would just be noise.
For these images, use an empty alt attribute:
```
```
The difference between an **empty** and a **missing** attribute is important. With `alt=""`, you’re explicitly telling the screen reader it can skip this image. If the attribute is missing altogether, the software can’t tell whether the image matters and, depending on the screen reader and browser, may read out the file name or URL instead. That’s why automated checkers rightly flag missing alt attributes as errors.
Purely visual images can also be added as CSS backgrounds, so they never show up in the content at all. Just make sure no information gets lost that way.
A common gray area is teaser images. If a blog card consists of an image, a headline and a short summary, and the image only illustrates the topic, `alt=""` is often the best choice. Otherwise, users hear an image description on every single card before they find out what the post is about.
## Images in links and buttons
As soon as an image is the only content of a link or button, its alt text becomes that control’s name. So it needs to say **what happens**, not what the image looks like. Several criteria come into play here, including [2.4.4 Link Purpose (In Context)](https://barrierefreihochzwei.de/en/wcag/2-4-4-link-purpose-in-context) and [4.1.2 Name, Role, Value](https://barrierefreihochzwei.de/en/wcag/4-1-2-name-role-value).
```
```
If there’s already visible text next to the icon, the icon is decorative. Give it `alt=""` and let the link text do the work – otherwise people hear “Cart Cart”.
Inline SVGs follow the same principle with different tools. An icon button might look like this:
```
```
The SVG is hidden and the button gets its name from `aria-label`. Visually hidden text inside the button is even more robust, because browser translation tools will translate it too. For more on when ARIA helps and when it hurts, see our article on [keyboard access and focus](https://barrierefreihochzwei.de/en/blog/keyboard-focus-without-mouse).
## Logos
Logos are a classic source of errors. If a logo sits alone in the header and links to the home page, it’s a functional image. A reliable pattern is the company name, optionally followed by the destination:
- Before: `alt="logo_header.png"` or `alt="Logo"`
- After: `alt="Smith & Sons – home"` or simply `alt="Smith & Sons home page"`
The word “logo” adds nothing. What matters is the name, because that’s the text in the image. Partner or client logos in a list just get the company name. And if a logo appears right next to the written-out company name, it’s decorative.
## Images of text
Promo banners, quotes as graphics, social media tiles: text inside images is hard to enlarge, can’t be restyled, and is invisible to translation tools. That’s why [1.4.5 Images of Text](https://barrierefreihochzwei.de/en/wcag/1-4-5-images-of-text) asks you to use real text wherever the technology allows it. Logos are exempt.
If you can’t avoid an image of text, the full text belongs in the alt attribute. A banner that reads “Summer sale: 30% off all jackets until August 31” needs exactly that wording as its alt text – not “promotional banner”.
## Charts, infographics and complex images
A bar chart with twelve monthly values won’t fit meaningfully into one sentence. Here, you work in two layers. Short alt text says what the image is and what its key message is. The details go into a longer description that everyone can access – in the body text, a caption, or a data table below the chart.
```
Revenue by month in 2025. The exact figures are in the table below the chart.
```
The data table has a nice side effect: sighted readers often like seeing the exact numbers, too. For infographics that show a process, a numbered list in the text that walks through the steps works well. The underlying structure is covered by [1.3.1 Info and Relationships](https://barrierefreihochzwei.de/en/wcag/1-3-1-info-and-relationships): what belongs together visually should belong together in the code.
Don’t put the long description in a `title` attribute. It only appears on mouse hover, is practically unreachable via keyboard or touch, and screen readers handle it inconsistently.
## Context is everything
Picture a photo of a conference stage with a speaker addressing a large audience. Depending on where it’s used, it needs different alt text:
- In a conference recap: “Julia Becker gives the opening keynote to a packed hall.”
- On a venue rental page: “Large hall with a stage, projection screen and tiered seating for around 300 people.”
- As a mood image in a landing page header with no link to the content: `alt=""`.
For content teams, this means alt text really belongs to the **use** of an image, not to the file. Many content management systems store alt text in the media library and reuse it everywhere. That’s a sensible default, but check whether it still fits each time you use the image somewhere new.
## Common mistakes and how to avoid them
Some patterns turn up in almost every audit. Knowing them saves you a lot of rework:
- **File names as alt text:** “DSC\_0815.jpg” often gets added automatically on upload. A required field in your CMS with a short hint prevents this.
- **Duplicate information:** the alt text and caption are identical, so everything is read twice. Add to the caption instead of repeating it.
- **Interpretation instead of facts:** “Happy customer” is a judgment. “Woman laughing and holding a parcel” is a description. Stick to what’s visible unless the mood is the point.
- **Describing everything:** long paragraphs about composition, lighting and background details cost time nobody gets back.
- **Using generated alt text unchecked:** AI tools produce decent first drafts, but they don’t know why the image is on your page. They can’t reliably identify people and sometimes invent details. A human needs to review the result.
The fastest way to find out whether your alt texts work in context is to listen to the page with a screen reader yourself. Our [quick screen reader test](https://barrierefreihochzwei.de/en/blog/quick-screen-reader-test) shows you how to do that in fifteen minutes.
## Everyday checklist
- Every `img` has an `alt` attribute, even if it’s empty.
- Informative images convey their key message in one concise sentence.
- Decorative images use `alt=""` or live in CSS.
- Images inside links and buttons describe the destination or action.
- Logos give the name, not the word “logo”.
- Text in images is fully repeated in the alt text – or, better, shown as real text.
- Charts have short alt text plus a longer description or data table.
- No “image of”, no file names, no keyword lists.
- Alt text and captions complement each other instead of repeating.
- Generated alt text has been reviewed by a person.
## Conclusion
Good alt text doesn’t come from a formula. It comes from one simple question: what job does this image do in this place? Once you answer that, the rest mostly follows. Informative images get a concise message, functional images get their action, decorative images get an empty attribute, and complex graphics get an extra description.
Make alt text a fixed part of your publishing workflow, as routine as writing a headline or a summary. With a little practice, good alt text takes less than a minute and opens your content up to far more people. For an overview of all the requirements around images and beyond, explore the [WCAG guide](https://barrierefreihochzwei.de/en/wcag).
## Sources
- [W3C WAI: Images Tutorial](https://www.w3.org/WAI/tutorials/images/)
- [W3C WAI: An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/)
- [W3C: Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/)
- [WebAIM: Alternative Text](https://webaim.org/techniques/alttext/)
- [MDN Web Docs: The Image Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
```
The difference between an **empty** and a **missing** attribute is important. With `alt=""`, you’re explicitly telling the screen reader it can skip this image. If the attribute is missing altogether, the software can’t tell whether the image matters and, depending on the screen reader and browser, may read out the file name or URL instead. That’s why automated checkers rightly flag missing alt attributes as errors.
Purely visual images can also be added as CSS backgrounds, so they never show up in the content at all. Just make sure no information gets lost that way.
A common gray area is teaser images. If a blog card consists of an image, a headline and a short summary, and the image only illustrates the topic, `alt=""` is often the best choice. Otherwise, users hear an image description on every single card before they find out what the post is about.
## Images in links and buttons
As soon as an image is the only content of a link or button, its alt text becomes that control’s name. So it needs to say **what happens**, not what the image looks like. Several criteria come into play here, including [2.4.4 Link Purpose (In Context)](https://barrierefreihochzwei.de/en/wcag/2-4-4-link-purpose-in-context) and [4.1.2 Name, Role, Value](https://barrierefreihochzwei.de/en/wcag/4-1-2-name-role-value).
```
