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 Diagramme 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.
Barrierefreie Diagramme – 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?