Alt-Texte für Bilder: WCAG-Pflicht einfach erklärt

Kurz erklärt: Ein Alt-Text (alternative text, alt-Attribut) ist eine textliche Beschreibung eines Bildes im HTML-Code, die von Screenreadern vorgelesen wird. Alt-Texte sind WCAG-2.1-Pflicht auf Level A und damit für das BFSG verbindlich.

Der Alt-Text ist die wichtigste und gleichzeitig häufigste BFSG-Barriere im deutschen Web. Ohne Alt-Text können blinde und sehbehinderte Menschen Bild-Inhalte nicht erfassen – und Bilder transportieren oft zentrale Information: Produkt-Details, Grundrisse, Preise, Warnhinweise. Ein gut geschriebener Alt-Text beschreibt den informativen Inhalt eines Bildes knapp und präzise.

Wann brauche ich Alt-Texte?

Alle Bilder im -Tag brauchen ein alt-Attribut – auch wenn der Wert leer ist. Wichtig: der Unterschied zwischen informativen Bildern (brauchen beschreibenden Alt-Text) und dekorativen Bildern (brauchen alt=""). Ein Hero-Bild auf der Startseite ohne Mehrwert ist meist dekorativ. Ein Produktfoto ist informativ. Ein Diagramm oder Chart braucht oft eine ausführliche Beschreibung.

Was macht einen guten Alt-Text aus?

Ein guter Alt-Text ist: (1) konkret – "Rote Sneakers von Nike, Modell Air Max 90" statt "Schuhe"; (2) kurz – in der Regel unter 125 Zeichen; (3) funktional – beschreibt die Information, nicht das Bild physisch; (4) kontextbezogen – wenn der Bild-Kontext schon die Information liefert, kann der Alt-Text kürzer sein; (5) ohne "Bild von" oder "Foto von" am Anfang (Screenreader sagen das automatisch).

Code-Beispiel: richtig und falsch

Falsch: <img src="prod-123.jpg"> (kein alt)
Falsch: <img src="prod-123.jpg" alt="prod-123.jpg"> (Dateiname)
Falsch: <img src="prod-123.jpg" alt="Bild"> (inhaltslos)
Richtig (informativ): <img src="prod-123.jpg" alt="Küchenmaschine KM-200, silbernes Edelstahl-Gehäuse, 5-Liter-Rührschüssel">
Richtig (dekorativ): <img src="hero-bg.jpg" alt="" role="presentation">

Komplexe Bilder: Grafiken, Diagramme, Infografiken

Bei komplexen Bildern reicht das alt-Attribut nicht aus. Nutze: (1) aussagekräftiger Alt-Text als Kurzbeschreibung, (2) ausführliche Alternative direkt im Text darunter ODER (3)

mit

und zusätzlichem aria-describedby-Verweis auf Langbeschreibung. Für Diagramme: die Daten auch als HTML-Tabelle anbieten.

Welche WCAG-Regel ist relevant?

WCAG 2.1.1 Non-text Content (Level A) ist die zentrale Norm. Fehlende oder unzureichende Alt-Texte sind eine Level-A-Verletzung – das ist die strengste Konformitätsstufe und damit eine eindeutige BFSG-Verletzung. Die Europäische Norm EN 301 549 übernimmt WCAG 2.1.1 unverändert.

Wird geprüft: bf-check prüft jedes <img>-Tag auf das alt-Attribut, erkennt leere, verdächtig kurze und Dateiname-Alt-Texte.

Wie steht deine Webseite in diesem Punkt da?

Kostenloser Scan gegen 15 WCAG-2.1-AA-Kriterien – inkl. Alt-Text-Check.

Jetzt Webseite prüfen →