Mehr Beschreibung ist nicht immer besser
Ein verbreiteter Irrtum: Barrierefreiheit bedeute, ausnahmslos jedes Bild zu beschreiben. Tatsächlich kann zu viel Beschreibung genauso stören wie zu wenig. Stell dir vor, ein Screenreader liest bei jedem dekorativen Pünktchen, jeder Trennlinie und jedem Zier-Icon eine Beschreibung vor — das wäre ermüdender Lärm, der vom Wesentlichen ablenkt. Für dekorative Bilder ist der leere alt-Text deshalb nicht nur erlaubt, sondern richtig.
Die eine Frage, die alles entscheidet
Um zu wissen, ob ein Bild dekorativ oder inhaltlich ist, gibt es eine einzige Prüffrage: Ginge Information verloren, wenn dieses Bild fehlt?
- Nein → dekorativ →
alt="" - Ja → inhaltlich → beschreibender alt-Text (siehe Alt-Text schreiben)
Typische dekorative Bilder:
- Trennlinien und Zier-Ornamente
- Hintergrund-Muster und -Texturen
- ein Icon neben einem bereits beschrifteten Link („🏠 Startseite" — das Haus-Icon ist redundant)
- Stimmungsbilder, die reine Atmosphäre ohne eigene Aussage liefern
alt="" ist nicht dasselbe wie kein alt
Ein feiner, aber wichtiger Unterschied:
alt=""(leer, aber vorhanden): sagt dem Screenreader ausdrücklich „überspringen". Richtig für Deko.- kein alt-Attribut (ganz weggelassen): manche Screenreader lesen dann den Dateinamen vor — „D-S-C-Unterstrich-4-8-2-1-Punkt-J-P-G". Ein Ärgernis.
Die Regel lautet deshalb: Jedes Bild bekommt ein alt-Attribut — entweder beschreibend (inhaltlich) oder leer (dekorativ). Nie ganz weglassen.
Der Sonderfall: Icon plus Text
Ein häufiger Stolperstein sind Buttons und Links mit Icon und Text. Wenn der Text „Herunterladen" schon dasteht, braucht das Download-Pfeil-Icon daneben keinen alt-Text — es ist redundant, also alt="". Steht das Icon dagegen allein (ein Lupen-Button ohne Wort), trägt es die Bedeutung und braucht eine Beschreibung wie „Suchen". Faustregel: Icon mit sichtbarem Text = leer; Icon allein = beschreiben.
Wo CSS-Hintergründe hineinspielen
CSS-Hintergrundbilder (background-image) haben technisch gar keinen alt-Text und gelten als dekorativ — der Screenreader ignoriert sie. Das ist meist gewünscht, wird aber zur Falle, wenn man ein inhaltlich wichtiges Bild in den CSS-Hintergrund legt: Dann ist es für Screenreader und Bildersuche unsichtbar. Deshalb die klare Trennung: Inhalt gehört ins img-Element mit alt-Text, reine Deko in den CSS-Hintergrund. Der Beitrag CSS-Hintergrundbilder optimieren vertieft genau diese Unterscheidung.
Häufige Fragen
Was ist ein dekoratives Bild?
Ein Bild, das keine Information trägt, die nicht schon im Text steht — Trennlinien, Hintergrund-Ornamente, ein rein schmückendes Icon neben einem beschrifteten Link. Es dient der Optik, nicht dem Verständnis. Für solche Bilder ist ein leerer alt-Text richtig, damit Screenreader sie überspringen.
Was bedeutet alt=""?
Ein leeres alt-Attribut signalisiert dem Screenreader ausdrücklich: Dieses Bild ist dekorativ, überspringe es. Das ist etwas anderes als gar kein alt-Attribut — fehlt es ganz, liest mancher Screenreader den Dateinamen vor. Deshalb: dekorativ = alt="", niemals alt weglassen.
Woran erkenne ich, ob ein Bild dekorativ oder inhaltlich ist?
Frage: Ginge Information verloren, wenn das Bild fehlt? Wenn nein (weil der Text alles sagt oder das Bild reine Zier ist), ist es dekorativ. Wenn ja (das Bild zeigt etwas, das der Text nicht ausdrückt), ist es inhaltlich und braucht einen beschreibenden alt-Text.
Brauchen CSS-Hintergrundbilder einen alt-Text?
Nein — CSS-Hintergrundbilder haben kein alt-Attribut und gelten technisch als dekorativ. Genau deshalb gehören inhaltlich wichtige Bilder nicht in den CSS-Hintergrund, sondern in ein img-Element mit alt-Text, damit sie für Screenreader und Bildersuche zugänglich sind.