Alternative Texte
Bildbeschreibungen für Screenreader – ermöglichen blinden Menschen Zugang zu visuellen Inhalten
Was sind alternative Texte?
Alternative Texte (auch: Alt-Texte) sind Beschreibungen von Bildern, die Screenreader vorlesen können. Sie ermöglichen blinden und sehbehinderten Menschen, visuelle Inhalte zu verstehen.
Alternative Texte werden im HTML-Code mit dem `alt`-Attribut definiert:
<img src="produkt.jpg" alt="CNC-Fräse Modell X200, 5-Achs-Bearbeitung">
Warum sind alternative Texte wichtig?
Alternative Texte sind eine der wichtigsten Maßnahmen für Barrierefreiheit:
- Rechtspflicht: WCAG 2.1 Level A verlangt Alt-Texte für alle Bilder
- Screenreader-Kompatibilität: Ohne Alt-Texte sagen Screenreader nur "Bild"
- SEO-Vorteil: Suchmaschinen nutzen Alt-Texte für Bild-Indexierung
- Fallback: Wenn Bilder nicht laden, zeigt der Browser den Alt-Text
Beispiel: Müller GmbH
Die Müller GmbH (25 Mitarbeiter, Maschinenbau) fügt Alternative Texte zu Produktbildern hinzu:
Vorher: Keine Alt-Texte
<img src="cnc-fraese.jpg">
Problem: Screenreader sagt nur "Bild" – sehbehinderte Kunden wissen nicht, was zu sehen ist.
Nachher: Aussagekräftige Alt-Texte
<img src="cnc-fraese.jpg" alt="CNC-Fräse Modell X200, 5-Achs-Bearbeitung, Arbeitsbereich 800x600x500mm">
Ergebnis: Screenreader liest "CNC-Fräse Modell X200, 5-Achs-Bearbeitung, Arbeitsbereich 800x600x500mm" – sehbehinderte Kunden verstehen das Produkt.
Tipps für gute Alt-Texte
- Beschreibend: Was ist auf dem Bild zu sehen?
- Präzise: Keine Romane, aber alle wichtigen Details
- Kontext-relevant: Was ist für den Nutzer wichtig?
- Keine "Bild von...": Direkt beschreiben (nicht "Bild von einer CNC-Fräse")
Dekorative Bilder
Wenn ein Bild rein dekorativ ist (z.B. Hintergrundbild), nutzt ein leeres `alt`-Attribut:
<img src="deko.jpg" alt="">
Das signalisiert dem Screenreader: "Dieses Bild kann übersprungen werden."
Mit easy ACC prüft die Müller GmbH, ob alle Bilder Alt-Texte haben.