Alt-Text (Alternativtext) ist eine kurze Beschreibung, die Inhalt und Funktion eines Bildes in Worten vermittelt; in HTML wird er über das alt-Attribut des img-Elements definiert. Screenreader lesen den Alt-Text vor, wenn sie ein Bild ansagen, und Browser zeigen ihn an, wenn das Bild nicht geladen werden kann. Die WCAG verlangen eine Textalternative für jedes informationstragende Bild.
Textalternativen gehören zu den ersten Anforderungen des WCAG-Prinzips der Wahrnehmbarkeit: Jeder informationstragende visuelle Inhalt muss auch als Text vorliegen. In HTML geschieht das über das alt-Attribut des img-Elements. Alt-Texte werden von Screenreadern vorgelesen, von Browsern angezeigt, wenn ein Bild nicht lädt, und helfen Suchmaschinen, das Bild zu verstehen; sie zählen also für Barrierefreiheit und SEO gleichermaßen. Ein guter Alt-Text vermittelt die Funktion des Bildes auf der Seite: Er beschreibt das Produkt auf einem Produktfoto, fasst die Daten einer Grafik zusammen und nennt das Ziel, wenn ein Bild als Link dient.
Rein dekorative Bilder erhalten ein leeres alt-Attribut, damit Screenreader sie still überspringen, statt Störgeräusche zu erzeugen. Dateinamen zu kopieren, Keywords zu stapeln oder jeden Alt-Text mit dem Wort Bild zu beginnen sind häufige Fehler; Screenreader sagen ohnehin an, dass es sich um ein Bild handelt. Auf großen Websites ist eine manuelle Prüfung tausender Bilder unpraktisch; automatisches Scannen listet fehlende Alt-Texte seitenweise auf. Priorisieren Sie informationstragende Bilder und machen Sie das Alt-Text-Feld zum Pflichtbestandteil Ihres CMS-Workflows. Regelmäßiges Scannen erkennt Lücken bei neu hinzugefügten Bildern frühzeitig.
Häufig gestellte Fragen
Wie sollte Alt-Text geschrieben werden?
Schreiben Sie kurz, konkret und kontextbezogen: Vermitteln Sie die Funktion des Bildes auf der Seite in ein bis zwei Sätzen. Nennen Sie bei einem Produktfoto das Produkt und sein Unterscheidungsmerkmal, fassen Sie bei einer Grafik das Hauptergebnis zusammen und nennen Sie bei einem verlinkten Bild das Ziel. Beginnen Sie nicht mit dem Wort Bild, verwenden Sie keinen Dateinamen und stapeln Sie keine Keywords. Rund 125 Zeichen sind eine gute Obergrenze.
Brauchen dekorative Bilder Alt-Text?
Nein, aber das alt-Attribut sollte nicht ganz entfernt werden. Dekorative Bilder erhalten einen leeren Attributwert, was Screenreadern signalisiert, das Bild zu überspringen. Fehlt das Attribut komplett, lesen manche Screenreader den Dateinamen vor, was ein schlechtes Erlebnis erzeugt. Ein praktischer Test: Wenn durch das Entfernen des Bildes Information von der Seite verschwindet, ist es nicht dekorativ und braucht einen Alt-Text.
Dieser Inhalt dient nur zur Information und stellt keine Rechtsberatung dar.