Bilder und Alternativtext

Alternativtext ist der Text, den ein Screenreader anstelle eines Bildes vorliest. Er erscheint auch, wenn ein Bild nicht lädt. WCAG 2.1 verlangt eine Textalternative für jedes Bild, das Bedeutung trägt.

In der Untersuchung von WebAIM aus dem Jahr 2026 zu den eine Million wichtigsten Startseiten hatten 53,1 Prozent Bilder ohne Alternativtext. Das ist einer der häufigsten Fehler im Web und einer der am leichtesten zu behebenden für eine Redaktion.

Die Frage, die Sie stellen sollten

Nicht „Wie sieht dieses Bild aus?“, sondern „Was tut dieses Bild auf dieser Seite?“ Schreiben Sie dann einen Alternativtext, der dieselbe Aufgabe erfüllt.

Merken Sie sich: Fragen Sie, was das Bild auf dieser Seite tut, und schreiben Sie dann einen Alternativtext, der dieselbe Aufgabe erfüllt.

Dasselbe Foto kann auf verschiedenen Seiten verschiedene Alternativtexte brauchen. Ein Foto der Bürgermeisterin beim Durchschneiden eines Bandes:

• in einer Meldung über die Eröffnung der Bibliothek: „Bürgermeisterin Diaz durchschneidet das Band am neuen Eingang der Bibliothek“
• auf der Seite mit dem Lebenslauf der Bürgermeisterin: „Bürgermeisterin Diaz“

Wie Sie ihn schreiben

• Fassen Sie sich kurz. Ein Satz, oft weniger. Lange Beschreibungen gehören in den Seitentext.
• Lassen Sie „Bild von“ und „Foto von“ weg. Der Screenreader sagt bereits, dass es ein Bild ist.
• Nennen Sie, was zählt: wer, was, wo, sofern es für die Seite relevant ist.
• Wiederholen Sie nicht die Bildunterschrift. Wenn die Bildunterschrift es schon sagt, kann der Alternativtext kurz sein oder ergänzen, was die Bildunterschrift weglässt.
• Keine Dateinamen. „IMG_4032.jpg“ ist schlimmer als nichts.

Wann der Alternativtext leer sein sollte

Dekorative Bilder, etwa Hintergrundtexturen, Schnörkel und Stockfotos, die Stimmung, aber keine Information vermitteln, sollten einen leeren Alternativtext haben. Screenreader überspringen sie dann.

Lassen Sie in WordPress und den meisten Editoren das Feld für den Alternativtext nur bei dekorativen Bildern leer, und zwar mit Absicht. Manche Werkzeuge einer Website erlauben es, ein Bild ausdrücklich als dekorativ zu kennzeichnen; fragen Sie Ihre Ansprechperson für die Website.

Bilder, die Links oder Schaltflächen sind

Wenn ein Bild das Einzige in einem Link ist, wird sein Alternativtext zum Linktext. Beschreiben Sie das Ziel, nicht das Bild. Ein Logo, das auf die Startseite verlinkt, erhält „Musterstadt Startseite“, nicht „Logo von Musterstadt mit einem Baum“.

Flyer, Plakate und Fotos von Text

Ein als Bild veröffentlichter Flyer ist ein häufiges Problem auf öffentlichen Websites. Datum, Uhrzeit, Ort und Telefonnummer stecken im Bild, wo Screenreader sie nicht lesen können, Telefone sie nicht sauber vergrößern und Übersetzungswerkzeuge sie nicht erreichen.

Stellen Sie die Informationen als echten Text auf die Seite: den Namen der Veranstaltung als Überschrift, dann Datum, Uhrzeit, Ort und Kontakt. Das Flyer-Bild kann bleiben, mit einem kurzen Alternativtext wie „Flyer für das Herbstfest, Einzelheiten unten“.

Diagramme und Karten

Bei einem Diagramm gibt der Alternativtext die Hauptaussage wieder: „Der Wasserverbrauch sank von 2024 bis 2026 um 12 Prozent.“ Stellen Sie die Zahlen in einer einfachen Tabelle oder Liste auf die Seite. Bei einer Karte geben Sie die Adresse oder Wegbeschreibung als Text daneben an.