Wie du WCAG 1.1.1 behebst: Alternativtexte für Bilder (BFSG)
Wenn ein Bild Informationen vermittelt, müssen diese Informationen auch als Text verfügbar sein, damit Hilfstechnologien sie ausgeben können. Für Unternehmen in Deutschland, die ihre Website im Hinblick auf BFSG-bezogene Anforderungen verbessern, ist das einer der schnellsten und sinnvollsten Einstiege in das Thema Barrierefreiheit.
Die WebAIM-Million-Studie 2025 zeigt, dass fehlende Alternativtexte auf 55,5 % der untersuchten Startseiten vorkamen. Genau deshalb eignet sich WCAG 1.1.1 perfekt als erster Beitrag in einer technischen Content-Serie.
Das Problem einfach erklärt
WCAG 1.1.1 verlangt Textalternativen für nicht-textliche Inhalte, damit dieselben Informationen zum Beispiel per Screenreader oder Braille-Ausgabe vermittelt werden können. Praktisch heißt das: Hat ein Bild Bedeutung, braucht es einen sinnvollen Alt-Text; ist es rein dekorativ, sollte es von Screenreadern ignoriert werden.
Ein Produktbild, ein Symbol, ein Diagramm oder ein grafischer Button brauchen je nach Kontext unterschiedliche Lösungen. Ein guter Alt-Text beschreibt deshalb nicht einfach das Bild, sondern erklärt seinen Zweck auf der jeweiligen Seite.
Wen betrifft das?
Besonders wichtig ist diese Anforderung für blinde Menschen und viele Menschen mit Sehbehinderungen, die Websites mit Screenreadern oder anderen Hilfstechnologien nutzen. Fehlt der Alternativtext, gehen oft wichtige Informationen verloren, zum Beispiel Funktionen, Hinweise, Produktdetails oder Navigationselemente.
Auch intern spart eine saubere Lösung Zeit. Wenn Redakteure und Entwickler Alt-Texte direkt richtig anlegen, müssen Inhalte später nicht noch einmal nachgebessert werden.
Der Code: So behebst du es
Fehlt beim Bild das alt-Attribut, gibt es keine verlässliche Textalternative für Hilfstechnologien.
❌ Schlechtes Beispiel:
<img src="submit-button.jpg">
Wenn das Bild eine Aktion auslöst oder eine Funktion zeigt, sollte der Alt-Text genau diese Funktion benennen.
✅ Gutes Beispiel:
<img src="submit-button.jpg" alt="Kontaktformular absenden">
Dekorative Bilder sollten in der Regel ein leeres alt="" bekommen, damit Screenreader sie überspringen.
✅ Gutes Beispiel für dekorative Bilder:
<img src="divider-line.jpg" alt="">
Manche Teams ergänzen bei rein dekorativen Elementen zusätzlich weitere Attribute, wenn sie sicherstellen wollen, dass wirklich keine störende Ausgabe entsteht. Entscheidend ist das Prinzip: Dekorative Inhalte sollen keine unnötige Information erzeugen.
✅ Häufiges Muster:
<img src="divider-line.jpg" alt="" aria-hidden="true">
Wenn der gleiche Inhalt direkt daneben schon als sichtbarer Text steht, halte den Alt-Text kurz. Bei komplexen Bildern wie Diagrammen sollte der Alt-Text knapp sein und die ausführlichere Erklärung im Fließtext daneben stehen.
Sonderfall: Verlinkte Bilder
Wenn ein Bild gleichzeitig ein Link ist, sollte der Alt-Text das Ziel oder die Funktion des Links verständlich machen – nicht nur das Bild beschreiben. Ein Logo, das zur Startseite führt, wird in vielen Templates verwendet und ist genau das Muster, bei dem schwache Alt-Texte besonders häufig vorkommen.
❌ Schlechtes Beispiel:
<a href="/">
<img src="logo.png" alt="Logo">
</a>
✅ Besser:
<a href="/">
<img src="logo.png" alt="Zur Startseite von Navable">
</a>
So testest du es
Nutze einen Screenreader und prüfe, wie Bilder auf der Seite vorgelesen werden. Aussagekräftige Bilder sollten sinnvoll angekündigt werden, dekorative Bilder dagegen nicht.
Kontrolliere im HTML, ob jedes relevante Bild ein alt-Attribut mit passender Beschreibung hat.
Prüfe Templates, CMS-Felder und Upload-Prozesse, damit Alt-Texte nicht vergessen werden.
Häufige Fehler
- Wichtige Bilder ganz ohne Alt-Text einzubinden, was WCAG 1.1.1 verletzt.
- Dateinamen wie
hero-final-neu.jpgals Alt-Text zu verwenden. - Den sichtbaren Text neben dem Bild unnötig zu wiederholen.
- Deko-Elemente wie Trennlinien oder Schmuckgrafiken zu beschreiben, statt sie als dekorativ zu behandeln.
- Grafische Buttons oder Icons ohne verständliche Funktionsbezeichnung einzusetzen.