Alt-Texte richtig schreiben: Anleitung für BFSG-konforme Bildbeschreibungen

Was sind Alt-Texte und warum sind sie Pflicht?

Alt-Texte (alternative Texte) beschreiben den Inhalt eines Bildes für Menschen die das Bild nicht sehen können. Screenreader lesen den Alt-Text vor, Suchmaschinen nutzen ihn für die Bildersuche. Nach WCAG 1.1.1 ist ein Alt-Text für jedes informative Bild Pflicht.

Fehlt er, ist das ein direkter BFSG-Verstoß.

Gute vs. schlechte Alt-Texte: Beispiele

Schlecht: alt='Bild' oder alt='IMG_4523.jpg' oder alt=''. Besser: alt='Roter Laufschuh Nike Air Max 90 in Größe 42, Seitenansicht'. Perfekt: Beschreibe was auf dem Bild zu sehen ist und warum es relevant ist.

Bei Produktfotos: Material, Farbe, Perspektive. Bei Team-Fotos: Name und Rolle. Bei Infografiken: Die Kernaussage in 1-2 Sätzen.

Wann Alt-Text leer sein darf

Dekorative Bilder die keinen inhaltlichen Mehrwert bieten (Trennlinien, Hintergrundmuster, rein ästhetische Elemente) bekommen alt='' (leerer Alt-Text). Das signalisiert dem Screenreader: Dieses Bild kann übersprungen werden. Wichtig: alt='' ist nicht dasselbe wie kein alt-Attribut!.

Alt-Texte für verschiedene Bildtypen

Produktfotos: Produkt, Material, Farbe, Größe, Perspektive. Icons: Funktion des Icons (z.B. 'Suche' für Lupen-Icon).

Infografiken: Kernaussage plus Verweis auf Text-Alternative. Screenshots: Was der Screenshot zeigt und wofür er relevant ist. Logos: Firmenname (z.B.

alt='bf-check.de Logo').

Alt-Texte in CMS-Systemen setzen

WordPress: Beim Bild-Upload im Feld 'Alternativtext'. Shopify: In der Medien-Bibliothek unter 'Alt-Text bearbeiten'. WooCommerce: Im Produkt-Editor unter 'Produktbilder'.

Shopware: Im Medienmanager unter 'Alt-Tag'. Wix: Rechtsklick auf Bild, dann 'Alt-Text hinzufügen'.

Häufig gestellte Fragen