So schreibst du guten Alt-Text

Ob ein Alt-Attribut fehlt, findet jedes Prüfwerkzeug in Sekunden. Ob der Text darin etwas taugt, entscheidet nur ein Urteil über den Kontext: dasselbe Bild braucht in einem Produktkatalog einen anderen Alt-Text als in einer Bedienungsanleitung. Deshalb beginnt guter Alt-Text nicht beim Schreiben, sondern bei einer Frage.

Die eine Frage: welche Rolle hat das Bild?

• Es trägt Information, die sonst nirgends steht: beschreibe die Information.
• Es ist ein Link oder Button: beschreibe die Funktion, nicht das Motiv.
• Es wiederholt nur benachbarten Text oder ist reine Zier: leeres alt-Attribut.
• Es ist ein komplexes Bild (Diagramm, Karte, Grundriss): kurze Kernaussage im alt, Details zusätzlich als Text auf der Seite.

Typische Fehler

<!-- 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">

Fehlt das Attribut ganz, lesen Screenreader in der Regel den Dateinamen vor: „produkt 4711 final v2 punkt jpg“. Steht bei einem Icon-Link „Einkaufswagen-Symbol“, weiß man, was man sieht, aber nicht, wohin der Link führt. Und ein Alt-Text an reiner Dekoration erzeugt Lärm, ohne etwas beizutragen.

So sieht es richtig aus

<!-- 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="">

Bild mit sichtbarer Bildunterschrift

<!-- 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>

Bildunterschrift und Alt-Text haben verschiedene Aufgaben: die Unterschrift ordnet ein, der Alt-Text beschreibt. Sind beide identisch, hört man denselben Satz zweimal hintereinander.

Länge und Prüfung

1. Eine Zeile reicht meist. Was mehr braucht, gehört als Text neben das Bild, nicht in das Attribut.
2. Lies dir den Alt-Text laut vor, ohne das Bild zu sehen: verstehst du, worum es geht?
3. Prüfe im Browser mit deaktivierten Bildern oder mit einem Screenreader die Reihenfolge und den Klang.