How to write good alt text

Any testing tool finds a missing alt attribute in seconds. Whether the text inside it is any good takes a judgment about context: the same image needs different alt text in a product catalogue than in a manual. So good alt text starts with a question rather than with writing.

The one question: what role does the image play?

• It carries information stated nowhere else: describe the information.
• It is a link or a button: describe the function, not the motif.
• It merely repeats adjacent text or is purely decorative: empty alt attribute.
• It is a complex image (chart, map, floor plan): a short core message in alt, the detail as text on the page.

Common mistakes

<!-- 1. Kein alt: der Screenreader liest den Dateinamen vor -->
<img src="produkt-4711-final-v2.jpg">

<!-- 2. Alt beschreibt das Bild statt seiner Funktion -->
<a href="/warenkorb">
  <img src="cart.svg" alt="Einkaufswagen-Symbol">
</a>

<!-- 3. Fuellwort statt Information -->
<img src="umsatz-2026.png" alt="Diagramm">

<!-- 4. Dekoration mit Alt-Text: laermt ohne Nutzen -->
<img src="trenner-welle.svg" alt="dekorative Welle">

With the attribute missing entirely, screen readers usually announce the filename. With „shopping cart icon“ on an icon link, you learn what you are looking at but not where the link goes. And alt text on pure decoration is noise that adds nothing.

What it looks like done right

<!-- 1. Inhaltsbild: sagt, was man auf dem Bild erkennen soll -->
<img src="produkt-4711-final-v2.jpg"
     alt="Blaue Laufschuhe, Seitenansicht, mit weisser Sohle">

<!-- 2. Bild als Link/Button: der Alt-Text ist die FUNKTION -->
<a href="/warenkorb">
  <img src="cart.svg" alt="Warenkorb">
</a>

<!-- 3. Datenbild: die Aussage, nicht die Bildgattung -->
<img src="umsatz-2026.png"
     alt="Umsatz 2026: Anstieg von 1,2 auf 1,9 Millionen Euro">
<!-- Die vollstaendigen Zahlen stehen zusaetzlich als Tabelle im Text -->

<!-- 4. Dekoration: leeres alt, damit sie uebersprungen wird -->
<img src="trenner-welle.svg" alt="">

An image with a visible caption

<!-- Bild mit sichtbarer Bildunterschrift: alt und caption
     duerfen sich nicht wiederholen, sonst hoert man alles zweimal -->
<figure>
  <img src="grundriss.png"
       alt="Grundriss: Eingang links, Kasse rechts neben dem Ausgang">
  <figcaption>Der barrierefreie Zugang liegt an der Ostseite.</figcaption>
</figure>

Caption and alt text do different jobs: the caption places the image in context, the alt text describes it. If both are identical you hear the same sentence twice in a row.

Length and testing

1. One line is usually enough. Anything longer belongs next to the image as text, not in the attribute.
2. Read the alt text out loud without looking at the image: do you understand what it is about?
3. Check the order and the sound in the browser with images off, or with a screen reader.