Barrierefreie Diagramme – Informationen für alle zugänglich machen

13.3.2024
Absurde Illustration: Balken und Liniendiagramm, dass sich in eine Skyline vor bergiger Landschaft verwandelt.Bedeutung: Schönheit barrierefreier Diagramme

Statistiken und Daten sind oft schwer zu verstehen. Übersichtliche Illustrationen helfen, die Kernaussage zu verstehen. Doch was sind barrierefreie Diagramme?

Inhaltsverzeichnis

Wollen Sie auf Ihrer Website statistische Daten und Fakten oder ganze Studienergebnisse präsentieren, dann sind diese Informationen oft sehr komplex. Wissenschaftliche Texte sind nicht nur für Menschen ohne besondere Einschränkungen schwer zu verstehen, sondern insbesondere für Personen mit Lern- oder Leseschwächen eine große Hürde. Eine gut aufbereitete visuelle Darstellung der Kernaussagen in Form von Diagrammen oder Illustrationen unterstützt dann das Verständnis des Textes erheblich. Doch wie sieht es umgekehrt aus, wenn Personen mit Sehbeeinträchtigungen die Diagramme nicht wahrnehmen können? Wie könnten barrierefreie Diagramme umgesetzt werden?

Alternativtext

Wie bereits in meinem Artikel über Alternativtexte beschrieben, sollten alle informativen Grafiken einen Alternativtext haben. Dazu zählen natürlich insbesondere Diagramme. Beim Inhalt des Alternativtextes wird es dann schon schwieriger. Alle Zahlen und Statistiken aus dem Diagramm abzutippen ist oft wenig zielführend, denn daraus kann man einen Trend oder Zusammenhang der Daten meist nicht erkennen. Die Texte werden langatmig und nutzlos.

Deshalb verfolge ich auch hier die bekannte Strategie: der Alternativtext erzählt das, was auch ein sehender Nutzer dem Diagramm entnehmen würde. Geht es also um tatsächliche Zahlen (Beispielsweise die Wahlergebnisse einzelner Parteien), dann können diese gern aufgezählt werden. Das sollte allerdings nur dann erfolgen, wenn es sich um wenige Daten handelt. Ist die Kernaussage des Diagramms eher ein zu erkennender Trend, beispielsweise die erkennbare Klimaerwärmung aufgrund der Durchschnittstemperatur der letzten 200 Jahre, dann reicht es, diese Information wiederzugeben. Genaue Daten und Fakten können dann zusätzlich in einer Tabelle neben der Grafik für alle aufgeführt werden.

Barrierefreie Diagramme gestalten

Diagramme und Infografiken sollten natürlich nicht nur für Nutzer von Assistenzsystemen, sondern auch für sehende Nutzer zugänglich sein. Achten Sie deshalb insbesondere auf folgende Aspekte

Kontraste

Die Kontraste von Farbflächen zum Hintergrund sind inzwischen gut bekannt. Für grafische Elemente gilt ein Mindestkontrast von 3:1. Achten Sie bei der Gestaltung von Diagrammen aber auch darauf, dass die Farben zueinander einen ausreichend hohen Kontrast bieten um die Flächen eines Tortendiagrams beispielsweise gut voneinander abgrenzen zu können. Bei Bedarf können Sie auch individuelle Farbeinstellungen der Nutzer zulassen um Kontraste entgegen dem eigenen Corporate Design verstärken zu können.

Formen und Texturen

Gerade bei vielen unterschiedlichen Farben wird es schwer, ausreichend Kontrast zwischen allen Datensätzen zu schaffen. Insbesondere dann (aber auch sonst) kann es hilfreich sein, unterschiedliche Daten nicht nur über Farben, sondern zusätzlich über Formen oder Texturen zu repräsentieren. Dann kann die rot schraffierte Fläche deutlich vom orange karrierten und dem violett gepunkteten Bereich unterschieden werden.

Legenden

Oft benötigen Statistiken Legenden um zu erklären, welche Farbe oder Säule welchen Datensatz repräsentiert. Barrierefreie Diagramme erreichen Sie am besten, wenn Sie diese Legende nicht unabhängig vom Diagramm darstellen, denn Nutzer von starken Vergrößerungen müssen dann oft zwischen der Legende und der Darstellung wechseln. Positionieren Sie die Beschriftung in unmittelbarer Nähe zu den einzelnen Datensätzen als Label. Das hilft auch bei nicht ausreichenden Farbkontrasten und erspart es dem Nutzer zu unterscheiden, ob der zu sehende Farbton jetzt noch gelb oder schon hellgrün ist.

Interaktive barrierefreie Diagramme

Insbesondere für sehr komplexe Darstellungen werden gern interaktive Diagramme verwendet um mithilfe von Filtern oder durch Interaktion mit der Maus bestimmt Bereiche auszublenden, hervorzuheben oder die exakten Zahlen eines Datensatzes einzublenden. Tools wie highcharts bieten JavaScript-Bibliotheken, die aus bestehenden Daten live interaktive Visualisierungen erstellen. Das ist gut und kann helfen, komplizierte Informationen visuell klarer zu machen. Highcharts bietet dabei zusätzlich ein Accessibility Module, mit welchem die Daigramme laut eigener Aussage WCAG 2.1-kompatibel sind. Die Tastaturnavigation funktioniert nach meinem Empfinden zumindest gut. Grundsätzlich ist es aber sinnvoll, für solche information zuätzlich die entsprechende Datentabelle zur Verfügung zu stellen, da die Interaktion von Screenreadern mit dieser deutlich einfacher und schneller ist.

Fazit

Diagramme und Infografiken können der Barrierefreiheit grundsätzlich nutzen und komplizierte Sachverhalte einfach verständlich aufzeigen. Allerdings bieten Sie auch wieder neue Herausvorderungen an die eigene Barrierefreiheit. Mit einer gut gewählten Darstellung, die sich nicht nur auf Farbwahrnehmung verlässt, können Sie aber schon viel erreichen. Drucken Sie ihre Grafik doch einmal in Schwarz-Weiß aus. Verstehen Sie die Aussage noch?