Barrierefreiheit in Datenvisualisierungen

Barrierefreiheit in Datenvisualisierungen bezeichnet die Gestaltung von Charts, Karten und Infografiken so, dass sie für alle Menschen zugänglich sind – einschließlich Personen mit Farbsehschwäche, motorischen Einschränkungen, Sehbehinderungen und kognitiven Beeinträchtigungen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Infografik & Datenvisualisierung · Niveau: Einsteiger Synonyme / Auch bekannt als: Accessible Data Visualization, a11y (Abkürzung für Accessibility), inklusive Datenvisualisierung

Was ist Barrierefreiheit in Datenvisualisierungen?

Etwa 8 % der Männer und 0,5 % der Frauen weltweit haben eine Form von Farbsehschwäche (Farbenblindheit). Zusätzlich gibt es Menschen mit Sehbehinderungen, die Screenreader verwenden, sowie Menschen mit motorischen Einschränkungen, die keine Maus benutzen können. Wenn Datenvisualisierungen nur auf Farbe als einziges Unterscheidungsmerkmal setzen oder keine Alternativtexte haben, schließen sie einen erheblichen Teil des Publikums aus. Barrierefreiheit in der Datenvisualisierung ist daher keine optionale Erweiterung, sondern eine ethische und in vielen Ländern rechtliche Pflicht (EU-Web-Accessibility-Richtlinie, BITV 2.0 in Deutschland).

Erklärung

Die vier WCAG-Prinzipien (angewendet auf Datenvisualisierungen):

1. Wahrnehmbar (Perceivable): Die Information muss auf mehrere Weisen zugänglich sein.

• Farbkodierungen müssen durch ein zweites Merkmal ergänzt werden: Muster, Textur, Form oder direkte Beschriftung
• Alternativtexte (alt-Text) für alle Infografiken, die den Inhalt für Screenreader beschreibbar machen
• Ausreichender Kontrast zwischen Text und Hintergrund (WCAG AA: mindestens 4,5:1)

2. Bedienbar (Operable): Interaktive Visualisierungen müssen per Tastatur navigierbar sein.

• Alle Tooltips und Hover-Informationen müssen auch per Tab und Enter erreichbar sein
• Kein rein mausbedientes Interface ohne Tastaturalternative

3. Verständlich (Understandable): Komplexe Charts müssen erklärt werden.

• Titel und Untertitel klar und selbsterklärend formulieren
• Legenden vollständig und verständlich
• Komplexe Visualisierungen mit erklärendem Fließtext begleiten

4. Robust (Robust): Die Visualisierung muss in verschiedenen Technologien funktionieren.

• SVG-basierte Charts sind zugänglicher als Canvas (ARIA-Labels möglich)
• Daten als Download anbieten (CSV), damit assistive Technologien direkt mit den Rohdaten arbeiten können

Farbsehschwächen – konkrete Maßnahmen:

• Rot-Grün-Kontraste vermeiden (häufigste Form der Farbblindheit: Deuteranopie)
• ColorBrewer-Paletten mit „colorblind safe"-Markierung verwenden
• Immer ein zweites visuelles Merkmal hinzufügen: gestrichelte/durchgezogene Linien, verschiedene Punktformen, Schraffurmuster für Balken
• Test mit Sim Daltonism (Mac), Color Oracle oder Coblis-Simulator

Alternativtexte für Charts: Ein guter Alt-Text für eine Visualisierung ist nicht „Balkendiagramm", sondern eine verbale Zusammenfassung der Hauptbotschaft: „Balkendiagramm zeigt, dass die CDU bei der Bundestagswahl 2021 mit 24,1 % den niedrigsten Stimmenanteil seit 1949 erzielte." Komplexe Visualisierungen können ein ausführlicheres „Long Description"-Attribut oder eine begleitende Datentabelle erhalten.

Cognitive Load und kognitive Barrierefreiheit: Barrierefreiheit umfasst auch Menschen mit Lernschwierigkeiten oder Konzentrationsproblemen. Einfache, klare Charts mit einer Hauptbotschaft sind für alle leichter verständlich – was dem Prinzip des Storytelling mit Daten und des Data-Ink Ratio entspricht.

Bewegungsempfindlichkeit: Animationen können für Menschen mit vestibulären Erkrankungen problematisch sein. Die CSS-Medienabfrage @media (prefers-reduced-motion: reduce) erlaubt es, Animationen für Nutzer abzuschalten, die das in ihrem Betriebssystem eingestellt haben.

Beispiele

1. Datawrapper (Best Practice): Datawrapper erzeugt automatisch barrierefreie iframes mit korrekten ARIA-Labels, Tastaturnavigation für interaktive Elemente und Alternativtext-Feldern für Charts.
2. New York Times Accessibility Guidelines: Die NYT hat öffentlich ihre internen Standards für barrierefreie Datenvisualisierungen dokumentiert und stellt ARIA-Patterns zur Verfügung.
3. BBC GEL (Global Experience Language): Die BBC hat detaillierte Accessibility-Guidelines für Charts und Datenvisualisierungen, die als Open-Source-Referenz verfügbar sind.
4. Liniendiagramm mit Formdifferenzierung: Mehrere Linien werden nicht nur durch Farbe (Blau, Orange, Grün), sondern auch durch Linienform (durchgezogen, gestrichelt, gepunktet) unterschieden – lesbar auch in Schwarz-Weiß-Druck.
5. Choropleth mit Musteralternative: Statt nur Farbabstufungen werden Schraffurmuster (horizontal, vertikal, diagonal) für Farbblinde als Alternative angeboten.

In der Praxis

Tools und Ressourcen:

• Sim Daltonism (Mac): App zur Echtzeit-Simulation verschiedener Farbsehschwächen
• WAVE (webaim.org/resources/contrastchecker): Kontrast-Checker für Text und Grafiken
• Colorblindly (Chrome Extension): Webseiten-Simulation für verschiedene Farbblindheitsformen
• Accessible Color Palette Builder (toolness.github.io/accessible-color-matrix): Zeigt, welche Farbkombinationen ausreichend Kontrast haben
• Datawrapper: Barrierefreiheit automatisch eingebaut; ARIA-Labels im Publish-Schritt konfigurierbar

Workflow-Tipp: Barrierefreiheit nicht am Ende, sondern von Anfang an einplanen. Die drei wichtigsten Schnellchecks: (1) Screenshot in Graustufen – noch lesbar? (2) Alternativtext formuliert? (3) Tastaturbedienbarkeit getestet?

Vergleich & Abgrenzung

Barrierefreiheit ergänzt alle anderen Gestaltungsprinzipien:

• Farbwahl in der Datenvisualisierung: Die Wahl der richtigen Palette ist der wichtigste Barrierefreiheits-Schritt
• Data-Ink Ratio: Klare, minimalistische Charts sind oft automatisch barrierefreier
• Storytelling mit Daten: Klare Botschaften erhöhen die kognitive Zugänglichkeit

Rechtlicher Kontext Deutschland: Die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) gilt für Webangebote öffentlicher Stellen und orientiert sich an WCAG 2.1 Level AA. Nachrichtenmedien sind nicht direkt verpflichtet, orientieren sich aber zunehmend an diesen Standards.

Häufige Fragen (FAQ)

Wann muss ich mich um Barrierefreiheit in Visualisierungen kümmern? Immer, wenn Visualisierungen für ein öffentliches Publikum bestimmt sind. Für öffentliche Einrichtungen ist es rechtlich verpflichtend. Für alle anderen ist es eine ethische Verantwortung und verbessert gleichzeitig die Qualität der Kommunikation für alle Nutzer.

Welche häufigen Barrierefreiheitsfehler gibt es in Datenvisualisierungen? Fehlende Alternativtexte, Rot-Grün-Farbkodierungen ohne zweites Merkmal, nicht-tastaturnavigierbare interaktive Charts, zu geringer Text-Hintergrund-Kontrast, Animationen ohne Abschaltoption und das Fehlen einer Datentabelle als barrierefreie Alternative zur Grafik.

Verwandte Einträge

• Farbwahl in der Datenvisualisierung
• Dashboard Design
• Datawrapper – Vollständiger Guide
• Data-Ink Ratio
• Storytelling mit Daten

Weiterführend

• World Wide Web Consortium (W3C) (2018): Web Content Accessibility Guidelines (WCAG) 2.1. w3.org/TR/WCAG21/
• Cesal, Amy (2020): Writing Alt Text for Data Visualization. In: Nightingale – Journal of the Data Visualization Society. nightingaledvs.com
• Waldron, Sarah (2021): Accessibility is a moral obligation. In: Datawrapper Blog. blog.datawrapper.de