Letztes Jahr habe ich bei 200 Daten-Dashboards eine Barrierefreiheitsprüfung durchgeführt. Das Ergebnis war ernüchternd: 94 % hatten mindestens ein kritisches Barrierefreiheitsproblem.
Das häufigste Problem? Ausschließlich farbliche Kodierung. Diagramme, die für die weltweit rund 300 Millionen Menschen mit Farbsehschwäche völlig unlesbar waren.
Lassen Sie uns das ändern.
Warum Barrierefreiheit von Diagrammen wichtig ist
Über die ethische Verpflichtung hinaus gibt es ein Geschäftsargument:
- Etwa 15 % der Weltbevölkerung haben eine Form von Behinderung
- Farbenblindheit betrifft etwa 8 % der Männer und 0,5 % der Frauen
- Barrierefreies Design verbessert oft die Usability für alle
Und zunehmend ist es Gesetz. WCAG-Konformität ist für Behördenseiten und viele Unternehmen Pflicht.
Die vier Säulen der Diagramm-Barrierefreiheit
1. Unabhängigkeit von Farbe
Die Regel: Nutzen Sie niemals Farbe als einzige Möglichkeit, Informationen zu vermitteln.
Schlecht: Ein Liniendiagramm mit Rot für „Umsatz“ und Grün für „Gewinn“ ohne weitere Unterscheidung.
Gut: Dasselbe Diagramm, aber Umsatz als durchgezogene Linie, Gewinn als gestrichelte. Oder verschiedene Markierungsformen. Oder direkte Beschriftungen.
Praktische Anpassungen:
- Muster oder Texturen in gefüllten Bereichen
- Verschiedene Linienstile (durchgezogen, gestrichelt, gepunktet)
- Direkte Beschriftungen an Datenpunkten
- Formen für Streudiagramm-Punkte
- Eine klare Legende, die nicht auf Farbzuordnung beruht
Farbpaletten-Tipps:
- Farbenblindfreundliche Palette (z. B. ColorBrewer)
- Ausreichender Kontrast zwischen benachbarten Farben
- Test mit Farbenblind-Simulator (Chrome DevTools hat einen)
2. Screenreader-Unterstützung
Diagramme sind von Natur aus visuell. Damit sie mit Screenreadern funktionieren, braucht es gezielte Arbeit.
Wesentliche Elemente:
- Alt-Text, der die Kernaussage des Diagramms beschreibt, nicht nur die Struktur
- Datentabellen als alternative Darstellung
- Sinnvolle Überschriftenhierarchie um das Diagramm
- ARIA-Labels für interaktive Elemente
Guten Alt-Text schreiben:
Schlecht: „Ein Balkendiagramm mit Umsatzdaten“
Gut: „Balkendiagramm Q3 2025 Umsatz nach Region. Westregion führt mit 2,3 Mio. €, gefolgt von Ost 1,8 Mio., Mitte 1,4 Mio., Süd 0,9 Mio.“
Der Alt-Text soll beantworten: Was müsste jemand wissen, der dieses Diagramm nicht sehen kann?
Bei komplexen Diagrammen eine Datentabellen-Alternative anbieten. Das Diagrammbild in ein figure-Element mit beschreibendem Alt-Text packen und einen ausklappbaren details-Bereich mit der zugrunde liegenden Tabelle einbinden.
3. Tastaturbedienung
Interaktive Diagramme müssen per Tastatur bedienbar sein.
Anforderungen:
- Alle interaktiven Elemente per Tab erreichbar
- Klare Fokusanzeige
- Logische Tab-Reihenfolge
- Tastaturkürzel für häufige Aktionen (dokumentiert)
Bei komplexen interaktiven Dashboards:
- Möglichkeit zum Überspringen des Diagramms
- Tastaturnutzer sollen dieselben Informationen wie Mausnutzer haben
- Möglichkeit, automatisch aktualisierte Daten anzuhalten
Test: Maus abziehen und das Diagramm nur mit Tastatur bedienen. Kommen Sie an alle Informationen?
4. Kognitive Barrierefreiheit
Nicht alle Barrierefreiheitsfragen betreffen Sinnesbehinderungen. Kognitive Belastung zählt ebenfalls.
Leitlinien:
- Diagramme einfach halten; eine Hauptaussage pro Diagramm
- Jargon in Beschriftungen und Anmerkungen vermeiden
- Einheitliche Formatierung im Dashboard
- Kontext und Erklärungen geben
- Keine automatisch abspielenden Animationen
Der 5-Sekunden-Test: Versteht jemand die Hauptaussage Ihres Diagramms in 5 Sekunden? Wenn nicht, vereinfachen.
Häufige Diagrammtypen und ihre Herausforderungen
Kreisdiagramme
- Problem: Nur farblich unterschiedene Segmente
- Lösung: Muster, Beschriftungen direkt auf Segmenten oder klare Legende mit Werten
Liniendiagramme
- Problem: Mehrere Linien nur durch Farbe unterschieden
- Lösung: Verschiedene Linienstile, direkte Beschriftungen oder Hover-Zustände
Balkendiagramme
- Problem: Geringer Kontrast zwischen Balken und Hintergrund
- Lösung: Mindestens 3:1-Kontrastverhältnis, ggf. Rahmen um Balken
Heatmaps
- Problem: Farbverläufe sind ohne Sehsinn bedeutungslos
- Lösung: Zahlen in Zellen, Datentabellen-Alternative
Streudiagramme
- Problem: Überlappende Punkte, Kategorien nur durch Farbe
- Lösung: Verschiedene Markierungsformen, einstellbare Deckkraft, Datentabelle
Ihre Diagramme testen
Automatisierte Tests
- axe DevTools für allgemeine Barrierefreiheit
- WAVE für schnelle visuelle Prüfung
- Lighthouse-Barrierefreiheitsaudit
Manuelle Tests
- Farbenblind-Simulatoren (Sim Daltonism, Chrome DevTools)
- Screenreader (NVDA, VoiceOver, JAWS)
- Nur-Tastatur-Navigation
- Zoom auf 200 % (funktioniert das Diagramm noch?)
Nutzertests
- Menschen mit Behinderungen in die Nutzerforschung einbeziehen
- Nicht annehmen; nach echten Problemen fragen
Schnelle Verbesserungen für heute
- Alt-Text zu jedem Diagramm (Aussage beschreiben, nicht nur Typ)
- Datentabellen-Alternative anbieten
- Farbkontrast prüfen (mind. 3:1 für Grafiken)
- Mit Farbenblind-Simulator testen
- Tastaturbedienung prüfen
- Sichtbare Fokusanzeige hinzufügen
Hilfreiche Tools
ChartGen und andere moderne Tools beginnen, Barrierefreiheitsfunktionen standardmäßig anzubieten. Achten Sie auf:
- Integrierte Alt-Text-Vorschläge
- Farbenblindfreundliche Paletten
- Automatische Musterüberlagerungen
- Datentabellen-Generierung
Aber Tools sind keine Zauberei. Sie müssen trotzdem für Ihren Kontext prüfen und anpassen.
Der Geschäftseffekt
Eine Barrierefreiheitsberaterin berichtete: Ein Finanzdienstleister behebt Barrierefreiheitsprobleme im Anleger-Dashboard. Ergebnis? 23 % mehr Engagement bei allen Nutzern, nicht nur bei Menschen mit Behinderungen.
Barrierefreies Design ist meist einfach besseres Design.
Ressourcen
- WCAG-2.1-Richtlinien (bes. 1.4.1 Verwendung von Farbe, 1.1.1 Nicht-Text-Inhalt)
- Chartability-Projekt für diagrammspezifische Anleitungen
- A11y Style Guide für Komponentenmuster
- Farbenblind-Simulationstools
Schlussgedanke
Sie würden kein Gebäude ohne Rampe bauen. Warum ein Dashboard ohne Barrierefreiheit?
Der Aufwand, Diagramme barrierefrei zu machen, ist überschaubar. Die Wirkung ist groß. Beginnen Sie mit einem Diagramm, wenden Sie diese Prinzipien an und bauen Sie darauf auf.