Definition: Ein Alternativtext ist eine kurze Textfassung eines Bildes, die dessen Inhalt oder Funktion wiedergibt. Screenreader lesen ihn vor, und der Browser zeigt ihn an, wenn das Bild nicht lädt. Verlangt wird er vom WCAG-Kriterium 1.1.1 Nicht-Text-Inhalt auf Stufe A [1].
Englisch: Alt text · Auch: Alt-Text, alt-Attribut, Textalternative · Zuletzt geprüft: 27. September 2026
Wofür der Alternativtext da ist
Blinde Menschen, die einen Screenreader nutzen, sehen das Bild nicht. Sie hören stattdessen den Alternativtext. Fehlt er, hören sie oft den Dateinamen – „IMG underscore 4711 Punkt jpg“ – oder gar nichts. Dasselbe gilt für Menschen mit Braillezeile und für alle, deren Verbindung die Bilder nicht lädt.
Im HTML steht der Text im alt-Attribut des <img>-Elements. Bei SVG-Grafiken oder Symbolen in Buttons übernimmt der zugängliche Name diese Aufgabe.
Was ein guter Alternativtext enthält
Entscheidend ist der Zweck des Bildes auf dieser Seite, nicht sein Aussehen [2][3]:
- Informative Bilder: das Wesentliche in einem Satz. Im Onlineshop: „Roter Wollpullover mit Rollkragen“ statt „Pullover“.
- Funktionale Bilder, also Bilder in einem Link oder Button: das Ziel oder die Aktion. Die Lupe neben dem Suchfeld heißt „Suchen“, nicht „Lupe“.
- Bilder mit Text: der Text im Bild, wörtlich.
- Komplexe Grafiken wie Diagramme: eine kurze Aussage im
alt, die Daten daneben als Text oder Tabelle. - Dekorative Bilder: ein leeres
alt="". Der Screenreader überspringt das Bild dann. Das Attribut ganz wegzulassen ist etwas anderes – dann fehlt die Alternative.
Wörter wie „Bild von“ oder „Foto:“ können Sie weglassen. Der Screenreader sagt ohnehin an, dass es eine Grafik ist [4].
Im Code
<!-- Fehlt: vorgelesen wird der Dateiname -->
<a href="/warenkorb/">
<img src="cart.svg">
</a>
<img src="welle-trenner.png"><!-- Besser: Funktion statt Aussehen -->
<a href="/warenkorb/">
<img src="cart.svg" alt="Warenkorb">
</a>
<!-- Dekorativ: leeres alt, wird übersprungen -->
<img src="welle-trenner.png" alt="">Häufige Fehler
- Dateiname oder Platzhalter als Text, etwa „DSC_0042“, „Bild“ oder „Banner“.
- Suchbegriffe statt Beschreibung. Eine Liste von Keywords hilft niemandem, der zuhört.
- Doppelter Text. Steht dieselbe Bildunterschrift direkt daneben, muss der Alternativtext sie nicht wiederholen.
- Information im CSS-Hintergrundbild. Dafür gibt es kein
alt. Trägt ein solches Bild Information, gehört sie als Text ins HTML. - Beschreibung im
titlestatt imalt. Dastitle-Attribut erscheint nur als Tooltip beim Überfahren mit der Maus und wird nicht zuverlässig vorgelesen. - Ein Text für alle Seiten. Dasselbe Teamfoto kann auf der Karriereseite etwas anderes aussagen als auf der Seite „Über uns“. Wer Bilder in einer Mediathek pflegt, sollte den Alternativtext deshalb dort prüfen, wo das Bild eingebunden wird.
Wie Reviseberg damit umgeht
Reviseberg prüft jede Seite mit axe-core. Die Regeln image-alt, input-image-alt, role-img-alt und svg-img-alt finden Bilder ohne Textalternative. Ob ein vorhandener Alternativtext passt, kann keine Regel entscheiden. Deshalb gilt WCAG 1.1.1 bei uns nur als teilweise automatisch prüfbar: Ein fehlender Text wird gefunden, ein falscher nicht. Für fehlende Texte kann Reviseberg per KI Vorschläge machen. Ein Mensch prüft und übernimmt sie – nichts wird automatisch in Ihre Website geschrieben.
Verwandte Begriffe
Screenreader · Zugänglicher Name · Accessibility Tree · Braillezeile · Automatisierte Prüfung