Barrierefreie Datenvisualisierungen: Geht das?

Seite 3: Datenselektion vermeidet Barrieren

Inhaltsverzeichnis

Nach der Auswahl der Darstellungsform geht es an die Daten selbst. Für eine zugängliche Visualisierung der Daten ist es nötig, sie so weit wie möglich zu reduzieren. Dabei gibt es zwei verschiedene Möglichkeiten: Daten gruppieren (Datenaggragation) oder Daten "beschneiden".

Reduktion der Datenmenge durch Gruppierung

Wo es die Daten erlauben, sollte man sie gruppieren. Unterschiedliche Datenreihen sollten in unterschiedliche übergeordnete Kategorien sortiert werden. Die mittlere Grafik aus Abbildung 5 zeigt ein Beispiel, bei dem eine Datengruppierung sinnvoll ist: Die Daten zeigen Referrals verschiedener Google-Domains mit jeweils verschiedenen Länderkennungen. Hier sollte man Daten so gruppieren, dass alle von einer Google-Domain stammenden Referrals zusammengefasst sind. Nur dann ist ersichtlich, wie viele Referrals von Google stammen, und zudem reduziert sich die Anzahl der Datenreihen erheblich. Die Länderkennung der Daten ist eine zweite Dimension: das Ursprungsland des Referrals. Falls diese Information für Nutzende relevant ist, bietet es sich an, sie in einer zweiten Darstellung zu visualisieren.

Anstatt die Anzahl der Datenreihen zu gruppieren, ist es auch möglich, die Anzahl der Datenpunkte innerhalb einer Datenreihe zu gruppieren. Dies ist insbesondere dann sinnvoll, wenn es sich um sehr wenige Datenreihen mit sehr vielen Datenpunkten handelt. Ein Beispiel zeigt die Heatmap in Abbildung 8 aus einem Artikel von Kent Eisenhuth und Kai Chang im Smashing Magazine.

In dieser Heatmap mit diskretem Wertebereich sind die durch die Farben symbolisierten Häufigkeiten schwer voneinander zu unterscheiden und teilweise kaum zu erkennen (Abb. 8).

(Bild: Screenshot von https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/)

Die Heatmap besitzt einen diskreten Wertebereich und eine diskrete Farbpalette. Die Daten für diese Heatmap entstammen einer Versuchsreihe, in der die gleiche Funktion tausendfach wiederholt ausgeführt wurde. Dabei wurde gemessen, wie lange eine Ausführung der Funktion braucht. Je dunkler ein Wert in der Heatmap erscheint, desto häufiger benötigte die Ausführung die in der unten liegenden Zeitskala angegebene Dauer. Diese Darstellung erlaubt einen granularen Vergleich. Allerdings leidet die Vergleichbarkeit stark unter den geringen Helligkeitskontrasten der verschiedenen Werte zueinander. Unterschiede im Bereich von 200 bis 300 Ausführungen sind kaum zu erkennen, und der Wertbereich bis etwa 1200 Ausführungen bietet keinen ausreichenden Kontrast zum Hintergrund.

Diese Heatmap zeigt einen sequenziellen statt eines diskreten Wertebereichs, was ein leichteres Ablesen der Werte ermöglicht (Abb. 9).

(Bild: Screenshot von https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/)

Eine Lösung für dieses Problem kann die Gruppierung des Wertebereichs sein. Abbildung 9 zeigt ein Beispiel für einen sequenziellen anstelle eines diskreten Wertebereichs. Hier sind die Werte in fünf Teilbereiche mit jeweils 500 Ausführungen gruppiert. Das reduziert die Anzahl der für die Darstellung benötigten Farben von 2000 auf fünf.

Reduktion der Datenmenge durch "Cut-Off"

Die zweite Möglichkeit zur Datenreduktion ist ein harter Cut. Im Idealfall ergibt sich aus der Sinnfrage die Anzahl der zu verwendenden Datenreihen. Sie könnte zum Beispiel lauten: "Von welchen Seiten erhält eine Website mehr als 10 000 Referrals?". Wo dies nicht so detailliert beschrieben ist, sollte man die Stakeholder fragen, welche Datenmengen wirklich nötig sind. Auch hier bietet Abbildung 5 wieder großes Anschauungspotenzial. Die Datensätze ließen sich zum Beispiel auf die Webseiten mit den zehn meisten Referrals begrenzen oder nur Datensätze mit einer Mindestzahl Referrals zulassen. Alternativ lässt sich ein Cut-off der Daten auch mit einer Kategorisierung in "sonstige" oder "andere" lösen. Dies kennt man zum Beispiel von der Darstellung von Wahlergebnissen und ist besonders sinnvoll, um relative Werte anzuzeigen, die addiert 100 Prozent ergeben.

Im Idealfall sind die Daten soweit reduziert, dass die Farben der Datensätze zueinander und zum Hintergrund ausreichend Kontrast aufweisen. Aber Abbildung 9 zeigt, dass die Farbwahl auch dann noch herausfordernd ist. Grundsätzlich sagt die WCAG, Farbe solle nicht das einzige Merkmal sein, um Information zu übermitteln (WCAG 1.3.3 Sensory Characteristics). Das gilt auch für die Darstellung von Daten. Neben der Farbe sollte also ein zweites Merkmal existieren, um ein Element von anderen zu unterscheiden.

Diese Heatmap verwendet zwei Merkmale: Die Farben einer sequenziellen Farbpalette und die Größe der Datenbalken. Damit lassen sich die Werte gut voneinander unterscheiden und leichter ablesen (Abb. 10).

(Bild: Screenshot von https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/)

Die Heatmap aus Abbildung 9 lässt sich beispielsweise so erweitern, dass neben der Farbe auch die Größe variiert: Je häufiger eine Funktion aufgerufen wurde, desto größer erscheint der Wertebereich in der Heatmap (vgl. Abbildung 10). Auf diese Weise lassen sich die Wertebereiche gut voneinander unterscheiden, obwohl die Kontraste gering sind. In Liniendiagrammen wie in Abbildung 2 können Linien unterschiedlich dargestellt sein – beispielsweise durchgezogen, gestrichelt oder gepunktet.

Daneben bietet es sich an, unterschiedliche Symbole für die jeweiligen Punkte auf dem Liniendiagramm zu verwenden, etwa Kreis, Viereck oder Raute. Dies führt aber nur dann zu einer zugänglichen Darstellung, wenn sich beide Merkmale auch in der Legende wiederfinden.