UX-Glossar · engl. Alt Text
Alternativtext
Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen.
Stell dir vor, du lässt dir einen Online-Shop von deinem Smartphone vorlesen, weil du nicht sehen kannst. Du landest auf einer Produktseite und hörst: „Bild, IMG_4711 Punkt JPG“. Danach ein Button, der nur „Bild, Link“ heißt. Was das Produkt ist und was der Button tut, bleibt ein Rätsel.
Genau hier setzt der Alternativtext an.
Einfach erklärt
Ein Alternativtext (kurz Alt-Text) ist eine kurze Textfassung eines Bildes. Er steht im HTML im Attribut alt des Bild-Elements und ist auf der Seite normalerweise unsichtbar. Ein Screenreader, also eine Software, die Bildschirminhalte vorliest, gibt ihn statt des Bildes aus. Er erscheint auch, wenn ein Bild nicht lädt.
Ein Vergleich aus dem Alltag: Du rufst eine Freundin an und erzählst ihr von einem Foto, das du gerade bekommen hast. Du beschreibst nicht jedes Pixel, sondern das, worauf es ankommt: „Unser Hund liegt im Schnee und hat einen Ast im Maul.“ So funktioniert ein guter Alt-Text.
Die WCAG verlangen in Erfolgskriterium 1.1.1 (Stufe A), dass alle Nicht-Text-Inhalte eine Textalternative haben, die denselben Zweck erfüllt. Rein dekorative Bilder sind ausgenommen. Sie müssen aber so eingebunden sein, dass assistive Technik sie ignorieren kann.
Der Zweck entscheidet, nicht das Motiv
Derselbe Text passt nicht überall. Entscheidend ist, welche Aufgabe das Bild auf der Seite hat. Das W3C bietet dafür einen „Alt Decision Tree“, einen Entscheidungsbaum mit wenigen Fragen. Grob lassen sich drei Fälle unterscheiden:
- Informative Bilder vermitteln Inhalt. Der Alt-Text beschreibt kurz, was für das Verständnis wichtig ist.
- Funktionale Bilder stecken in Links oder Buttons. Der Alt-Text nennt die Aktion oder das Ziel, also „Suchen“ statt „Lupe“.
- Dekorative Bilder tragen keine Information. Sie bekommen ein leeres Attribut
alt="", damit Screenreader sie überspringen.
Wichtig: Ein leeres alt ist etwas anderes als ein fehlendes. Fehlt das Attribut ganz, lesen manche Screenreader stattdessen den Dateinamen vor. Genau das passiert im Szenario oben.
Ein Beispiel
Ein Beispiel: Eine Bäckerei zeigt auf ihrer Website ein Foto ihres Sauerteigbrots. Der Alt-Text lautet „Bild“. Daneben ist ein Warenkorb-Symbol als Link eingebunden, ganz ohne Alt-Text.
Nach der Überarbeitung heißt es beim Foto „Sauerteigbrot mit dunkler, rissiger Kruste, angeschnitten“. Das Warenkorb-Symbol bekommt „Warenkorb öffnen“. Die geschwungene Zierlinie unter der Überschrift erhält alt="". Wer die Seite hört, bekommt jetzt dieselben Informationen wie alle anderen, ohne Ballast.
Warum das wichtig ist
Fehlende Alt-Texte gehören zu den häufigsten Barrieren im Netz. Die Auswertung „WebAIM Million“ fand 2026 auf 53,1 Prozent der untersuchten Startseiten Bilder ohne Alternativtext. Gleichzeitig ist kaum eine Verbesserung der Barrierefreiheit so schnell umgesetzt. Weitere typische Stolperstellen beschreibt der Artikel Warum Barrierefreiheit mehr als Kontrast und Größe ist.
In der Praxis
- Schreib für den Kontext. Frag dich, was jemand verpasst, der das Bild nicht sieht. Dasselbe Foto braucht im Produktkatalog einen anderen Text als in einem Blogartikel.
- Lass Füllwörter weg. „Bild von“ oder „Grafik mit“ sind überflüssig, weil Screenreader das Bild ohnehin ankündigen. Ein kurzer Satz reicht meist.
- Prüf automatisch und von Hand. Tools wie WAVE finden fehlende Attribute. Ob ein Text sinnvoll ist, zeigt nur ein kurzer Blick durch einen Menschen.
Verwandte Begriffe
Screenreader, Barrierefreiheit, WCAG, ARIA