Barrierefreie Datenvisualisierungen: Geht das?

Inhaltsverzeichnis

Infografiken, Torten-, Balken-, Liniendiagramme oder sonstige Arten, Daten visuell darzustellen – kurz Datenvisualisierungen – sind selten barrierefrei. Barrieren entstehen dabei oft durch ungeeignete Darstellungsformen, ungenügende Datenaufbereitung oder handwerkliche Fehler bei der Implementierung. Einige Tricks helfen, Barrieren abzubauen. Dafür ist wenig oder gar kein Code nötig.

Oliver Schwamb

Oliver Schwamb ist UX-Designer und Frontend-Entwickler. Da digitale Barrierefreiheit im Sweet Spot beider Disziplinen liegt, berät er zu diesem Thema und designed und implementiert seit einigen Jahren barrierefreie Oberflächen für die SVA System Vertrieb Alexander GmbH.

Datenvisualisierungen im digitalen Raum können nur dort zugänglich sein, wo es Menschen möglich ist, Inhalte mit unterschiedlichen Sinneskanälen wahrzunehmen und Interaktionen mit unterschiedlichen Eingabegeräten auszuführen. Doch dass diese Hilfen existieren, macht noch keine Datenvisualisierung barrierefrei.

Farbkontraste als Barrieren

Wohl die offensichtlichste Barriere entsteht durch die Auswahl der Farben in einer Datenvisualisierung. Dabei gibt es gleich mehrere Herausforderungen: Farben müssen sich vom Hintergrund absetzen, sodass ein ausreichendes Helligkeitskontrastverhältnis zwischen Vorder- und Hintergrund vorliegt – die WCAG (Web Content Accessibility Guidelines, der weltweit dominierende Standard für barrierefreie digitale Inhalte) definiert ein Kontrastverhältnis von 3:1. Ist dieses nicht gegeben, kann es schwierig bis unmöglich sein, Datenvisualisierungen zu erkennen, wie Abbildung 1 zeigt. Hier ist die Linie für "Solarmodule" kaum vom Hintergrund zu unterscheiden.

Kontraste müssen aber nicht nur zwischen Vorder- und Hintergrund ausreichend sein. Auch die konkreten visualisierten Informationen wie Datenpunkte und Graphen müssen zueinander ausreichend Kontrast aufweisen. Abbildung 2 zeigt ein Beispiel, bei dem sich die für die Graphen gewählten Farben schlecht voneinander unterscheiden lassen. Eine Zuordnung von Graph zu Legendenelement allein auf Basis der Farbe ist deshalb selbst ohne visuelle Einschränkungen eine Herausforderung.

Heise-Konferenz zu Accessibility in der Webentwicklung

Um eine Website wirklich barrierefrei und für jedermann zugänglich zu machen, muss man viele mögliche Einschränkungen auf User-Seite beachten: Sind Farben und Kontraste gut erkennbar? Sind alle Texte und Menüs mit Screenreadern kompatibel? Auf dem Accessibility Day der enterJS am 7. November lernst du, worauf du beim Entwickeln barrierefreier Websites achten solltest und was das Barrierefreiheitsstärkungsgesetz (BSFG) für dich und dein Unternehmen bedeutet.

Visualisierungen für Menschen mit Farbfehlsichtigkeiten

Auch bestimmte Farbkombinationen sind problematisch. Für Menschen mit Farbfehlsichtigkeiten – hier sind insbesondere Rot-Schwäche (Protanomalie), Grün-Schwäche (Deuteranomalie), Rot-Blindheit (Protanopie) und Grün-Blindheit (Deuteranopie) verbreitet – können die Farben einer Datenvisualisierung Barrieren darstellen. Ein Beispiel dafür findet sich in Abbildung 3: Ohne detaillierte Legende ist es in der Simulation der Protanopie (unteres Bild) nicht möglich, auf die Bedeutungen der Farben Rot und Grün zu schließen. Damit kann die Aussage der Datenvisualisierung nicht mehr erfasst werden.

Datenvisualisierungen erklären sich selten selbst

Abbildung 3 demonstriert auch, wie wichtig aussagekräftige Überschriften oder Beschreibungen für Datenvisualisierungen sind. Selbst für Menschen, die auf einen Blick alle Informationen aufnehmen können, ist der Zusammenhang zwischen der Überschrift "Libraries Experience & Sentiment" und den abgebildeten Datenbalken nicht offensichtlich. Denn die Überschrift gibt nicht detailliert wieder, was die Datenbalken abbilden sollen, und eine Beschreibung fehlt gänzlich.

Wer Screenreader nutzt, findet es vermutlich schwierig, die Aussage einer Datenvisualisierung nachzuvollziehen, wenn dafür nötige Informationen nur im Kontext vorhanden sind. Gemeint sind damit Informationen, die vor oder nach der Datenvisualisierung aufgeführt oder hinter einer Interaktion “versteckt” sind. Ein Beispiel für hinter Interaktionen versteckte Information zeigt Abbildung 4. Die konkreten Werte des Liniendiagramms werden erst beim Hovern über den Graphen sichtbar. Diese Informationen müssen aber allen Menschen zur Verfügung stehen, unabhängig ihrer motorischen Voraussetzungen. Es sollte hier also möglich sein, die Informationen auch mittels Tastatur zu erreichen (vgl. WCAG 2.1.1 Keyboard).

Natürlich müssen auch alle sonstigen Interaktionen, wie zum Beispiel das Fokussieren einzelner Datenreihen oder deren An- und Abwählen allein mit der Tastatur möglich sein (siehe auch Abbildung 2).