Das Problem mit komplexen Bildern
Für einfache Bilder genügt ein guter alt-Text. Aber ein Balkendiagramm, eine Prozess-Grafik oder eine datenreiche Infografik lässt sich nicht in einen Satz zwängen — sie enthält Dutzende Werte, Beziehungen, Beschriftungen. Zwei Barrieren treten hier zusammen auf: Der Inhalt ist zu umfangreich für ein alt-Attribut, und die Zahlen stecken oft als Text im Bild, wo kein Screenreader sie erreicht.
Lösung 1: der zweistufige Ansatz
Der bewährte Weg trennt Übersicht und Details:
- Kurzer alt-Text — nennt Art und Kernaussage: „Balkendiagramm: Der Umsatz stieg von 2020 bis 2024 um 40 %." Das reicht, um zu wissen, worum es geht.
- Langbeschreibung im Seiteninhalt — die Details als Fließtext, Liste oder Tabelle direkt neben oder unter dem Bild, sichtbar für alle. Nicht versteckt, sondern als echter Teil der Seite.
So bekommt jeder die volle Information: der Screenreader-Nutzer über die Langbeschreibung, der Sehende über Bild und Text.
Lösung 2: die Datentabelle
Der Königsweg für Diagramme mit Zahlen ist eine echte HTML-Datentabelle mit den zugrunde liegenden Werten:
| Jahr | Umsatz (Tsd. €) |
|---|---|
| 2020 | 500 |
| 2022 | 620 |
| 2024 | 700 |
Eine solche Tabelle ist doppelt wertvoll: Screenreader lesen sie strukturiert vor (Spalte, Zeile, Wert), und Sehende können exakte Zahlen nachschlagen, die im Diagramm nur ungefähr ablesbar sind. Das Diagramm bleibt die schnelle Übersicht, die Tabelle ist die genaue Quelle. Beide zusammen sind besser als jedes noch so gute Bild allein.
Lösung 3: kein Text im Bild (oder nur mit Backup)
Der häufigste vermeidbare Fehler: Achsenbeschriftungen, Legenden und Werte fest ins Pixelbild zu brennen. Dieser Text ist:
- für Screenreader unsichtbar — er existiert nur als Pixel;
- nicht vergrößerbar — wer schlecht sieht, kann ihn nicht per Textzoom größer machen, nur verpixeln;
- nicht kontrast-anpassbar — die Bildfarben sind fix.
Besser: wichtige Beschriftungen als echten HTML-Text neben das Bild setzen, oder das Diagramm gleich als SVG mit echtem Text aufbauen — dann ist die Beschriftung auswählbar, vorlesbar und skalierbar. Warum farbiger Text im Bild ohnehin technisch leidet, zeigt der Beitrag Chroma-Subsampling.
Kontrast nicht vergessen
Auch die Grafik selbst braucht ausreichenden Kontrast: nebeneinanderliegende Balken oder Linien sollten sich nicht nur durch die Farbe unterscheiden (wegen Farbenblindheit), sondern zusätzlich durch Muster, Beschriftung oder Helligkeit. „Erkennbar auch ohne Farbe" ist eine gute Selbstprüfung für jede Infografik.
Häufige Fragen
Wie beschreibe ich ein Diagramm barrierefrei?
Zweistufig: ein kurzer alt-Text nennt Art und Kernaussage ('Balkendiagramm: Umsatz stieg von 2020 bis 2024 um 40 Prozent'), und eine Langbeschreibung im umgebenden Text oder eine Datentabelle liefert die Details. So bekommen alle Nutzer die volle Information, nicht nur die Überschrift.
Warum ist Text im Bild ein Problem für Barrierefreiheit?
Weil Screenreader Text in einem Bild nicht lesen können — er ist für sie unsichtbar. Zahlen, Beschriftungen und Achsen einer Infografik gehen so verloren. Zudem lässt sich Bild-Text nicht vergrößern oder mit hohem Kontrast darstellen. Echter Text neben oder unter dem Bild löst beides.
Reicht bei einer Infografik ein langer alt-Text?
Nur bedingt. Sehr lange alt-Texte sind mühsam anzuhören und werden von manchen Werkzeugen abgeschnitten. Besser ist ein kurzer alt-Text plus eine echte Langbeschreibung im Seiteninhalt — etwa als Fließtext, Liste oder Datentabelle, die auch Sehende nutzen können.
Muss die zugrunde liegende Datentabelle sichtbar sein?
Idealerweise ja. Eine echte HTML-Tabelle mit den Diagramm-Daten ist für alle zugänglich: Screenreader lesen sie strukturiert vor, und Sehende können exakte Werte nachschlagen, die im Diagramm nur ungefähr ablesbar sind. Das Diagramm bleibt die schnelle Übersicht, die Tabelle die genaue Quelle.
Der Gesamtüberblick zu barrierefreien Bildern steht im Beitrag Bilder-Barrierefreiheit nach WCAG.
Quellen
W3C WAI — Komplexe Bilder · W3C WCAG — Verwendung von Farbe.