Barrierearme Datenvisualisierungen im Web

—

FireShonks 2022

Anne-Victoria Meyer

Creative Commons Lizenzvertrag
Wo nicht anders gekennzeichnet, ist diese Präsentation unter einer Creative Commons Namensnennung 4.0 International Lizenz lizensiert.
Ein Beispiel für ein gestapeltes Balkendiagramm, das den durchschnittlichen täglichen Mate-Konsum zeigt. Auf der x-Achse stehen die Monate Januar bis Dezember 2022. Auf der y-Achse steht der durchschnittlichen täglichen Mate-Konsum in Flaschen pro Tag. Es werden die Daten von drei Personen gezeigt: Micha, Kim und Sascha. Für jeden Monat gibt es einen Balken, der jeweils in die Anteile der drei Personen aufgeteilt ist.
Ein Beispiel für ein Balkendiagramm. Das Diagramm ist eher schlecht lesbar und es gibt keinen Titel. Die x-Achse ist beschriftet als 'AGE' und die y-Achse als 'POPULATION AT THIS AGE.'

Wie können wir das besser machen?

Fahrplan für diesen Talk

  1. Posten einer Visualisierung
  2. Designen einer Visualisierung
  3. Coden einer Visualisierung

Szenario #1 Posten einer Visualisierung

Ein Balkendiagramm mit dem Titel 'Janas Mate-Konsum (2022) in Flaschen pro Tag'. Auf der x-Achse stehen die Monate Januar bis Dezember 2022. Auf der y-Achse steht die durchschnittliche Anzahl an täglich konsumierten Flaschen Mate. Jahresdurchschnitt: 1,35 Flaschen pro Tag. Maximum liegt bei 2,7 Flaschen pro Tag im August. Minimum liegt bei 0 Flaschen pro Tag im September, November und Dezember. Der Konsum steigt von 1,5 Flaschen im Januar auf 2,7 im August, fällt dann abrupt auf 0 Flaschen im September. Abgesehen vom Oktober mit 0,25 Flaschen pro Tag bleibt der Konsum bis Ende des Jahres bei 0.

Was ist eine Bildbeschreibung?

Ein Post des Accounts '@gadse@chaos.social' auf Mastodon. Der Post besteht aus dem Text 'Kalt. Und. Nass. 😾' und dem Foto einer Katze. Originale Bildbeschreibung des Fotos: 'Eine flauschige Langhaarkatze hockt in der Reifenspur eines Autos mitten in einer verschneiten Fläche. Sie starrt geradeaus und wirkt nicht unbedingt zufrieden mit der Situation'
Bild von @gadse@chaos.social, lizensiert unter CC BY-NC-SA 4.0
https://chaos.social/@gadse/109553543352118504
Das Foto aus dem Post mit der Unterschrift 'Eine flauschige Langhaarkatze hockt in der Reifenspur eines Autos mitten in einer verschneiten Fläche. Sie starrt geradeaus und wirkt nicht unbedingt zufrieden mit der Situation.'
Bild von @gadse@chaos.social, lizensiert unter CC BY-NC-SA 4.0
https://chaos.social/@gadse/109553543352118504
Ein Screenshot vom Bilder-Upload-Dialog auf Mastodon. Neben der Vorschau des Bildes, das gerade hochgeladen wird, gibt es ein Textfeld zur Eingabe einer Bildbeschreibung.

Bildbeschreibungen

Vier Ebenen zur Beschreibung von Visualisierungen

Modell nach A. Lundgard and A. Satyanarayan, "Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content," in IEEE Transactions on Visualization and Computer Graphics, vol. 28, no. 1, pp. 1073-1083, Jan. 2022, doi: 10.1109/TVCG.2021.3114770. All rights reserved by the authors/publishers.

Ebene 1: Übersicht und Aufbau

z. B. Diagrammtyp, Titel, Achsen und Kodierung

Modell nach A. Lundgard and A. Satyanarayan, "Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content," in IEEE Transactions on Visualization and Computer Graphics, vol. 28, no. 1, pp. 1073-1083, Jan. 2022, doi: 10.1109/TVCG.2021.3114770. All rights reserved by the authors/publishers.

Ebene 2: Statistischer Überblick

z. B. Median, Extremwerte, einfache Vergleiche

Modell nach A. Lundgard and A. Satyanarayan, "Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content," in IEEE Transactions on Visualization and Computer Graphics, vol. 28, no. 1, pp. 1073-1083, Jan. 2022, doi: 10.1109/TVCG.2021.3114770. All rights reserved by the authors/publishers.

Ebene 3: Sichtbare Phänomene

z. B. Trends, Muster, Ausnahmen

Modell nach A. Lundgard and A. Satyanarayan, "Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content," in IEEE Transactions on Visualization and Computer Graphics, vol. 28, no. 1, pp. 1073-1083, Jan. 2022, doi: 10.1109/TVCG.2021.3114770. All rights reserved by the authors/publishers.

Ebene 4: Zusätzliche Informationen

z. B. Erklärungen und zusätzlicher Kontext

Modell nach A. Lundgard and A. Satyanarayan, "Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content," in IEEE Transactions on Visualization and Computer Graphics, vol. 28, no. 1, pp. 1073-1083, Jan. 2022, doi: 10.1109/TVCG.2021.3114770. All rights reserved by the authors/publishers.

Ebenen zur Beschreibung von Visualisierungen

  1. Übersicht und Aufbau
  2. Statistischer Überblick
  3. Sichtbare Phänomene
  4. Zusätzliche Informationen
Modell nach A. Lundgard and A. Satyanarayan, "Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content," in IEEE Transactions on Visualization and Computer Graphics, vol. 28, no. 1, pp. 1073-1083, Jan. 2022, doi: 10.1109/TVCG.2021.3114770. All rights reserved by the authors/publishers.
Ein Balkendiagramm mit dem Titel 'Janas Mate-Konsum (2022) in Flaschen pro Tag'. Auf der x-Achse stehen die Monate Januar bis Dezember 2022. Auf der y-Achse steht die durchschnittliche Anzahl an täglich konsumierten Flaschen Mate. Jahresdurchschnitt: 1,35 Flaschen pro Tag. Maximum liegt bei 2,7 Flaschen pro Tag im August. Minimum liegt bei 0 Flaschen pro Tag im September, November und Dezember. Der Konsum steigt von 1,5 Flaschen im Januar auf 2,7 im August, fällt dann abrupt auf 0 Flaschen im September. Abgesehen vom Oktober mit 0,25 Flaschen pro Tag bleibt der Konsum bis Ende des Jahres bei 0.

"Ein Balkendiagramm mit dem Titel 'Janas Mate-Konsum (2022) in Flaschen pro Tag'. Auf der x-Achse stehen die Monate Januar bis Dezember 2022. Auf der y-Achse steht die durchschnittliche Anzahl an täglich konsumierten Flaschen Mate. Jahresdurchschnitt: 1,35 Flaschen pro Tag. Maximum liegt bei 2,7 Flaschen pro Tag im August. Minimum liegt bei 0 Flaschen pro Tag im September, November und Dezember. Der Konsum steigt von 1,5 Flaschen im Januar auf 2,7 im August, fällt dann abrupt auf 0 Flaschen im September. Abgesehen vom Oktober mit 0,25 Flaschen pro Tag bleibt der Konsum bis Ende des Jahres bei 0."

Tipp: Verlinkung zu Datensatz

→ Person kann Daten herunterladen und in Programm ihrer Wahl öffnen

Szenario #2 Designen einer Visualisierung

Jahr Geburten Tode
1950 1.116.701 748.329
1951 1.106.380 752.697
1952 1.105.084 767.639
... ... ...
2021 795.492 1.023.687
Datensätze © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Geburten und Sterbefälle.
Ein Beispiel für ein Liniendiagramm, das die Daten der Tabelle der vorherigen Slide darstellt. Auf der x-Achse stehen die Jahreszahlen von 1950 bis 2021. Auf der y-Achse steht die Anzahl der Geburten und Sterbefälle. Eine rote Linie zeigt die Sterbefällt. Eine hellgrüne Linie zeigt die Geburten. Über dem Diagramm gibt es eine Legende, die die Zuordnung von Farben zu Datenreihen zeigt. Die Schrift im Diagramm ist eher klein und ihr Farbe ein mittleres grau.
Datensätze © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Geburten und Sterbefälle.
Das gleiche Diagramm wie auf der vorherigen Folie. Jetzt ist jedoch die Schrift überall dunkler und größer.
Datensätze © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Geburten und Sterbefälle.
Das gleiche Diagramm wie auf der vorherigen Folie. Jetzt sind die Linien jedoch intensiv rot und dunkelblau. Die Legende ist verschwunden. Stattdessen stehen jetzt jeweils am Ende der Linie die Labels 'Geburten' und 'Sterbefälle.'
Datensätze © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Geburten und Sterbefälle.
Das gleiche Diagramm wie auf der vorherigen Folie. Jetzt jedoch mit dem Titel 'Geburten und Sterbefälle in Deutschland von 1950 bis 2021.' Die Achsen sind jetzt auch beschriftet mit 'Jahr' (x-Achse) und 'Anzahl pro Jahr' (y-Achse).
Datensätze © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Geburten und Sterbefälle.

Szenario #3 Coden einer Visualisierung

Alter Bevölkerung in diesem Alter
0–4 3.927.000
5–9 3.662.000
... ...
95–99 144.000
Datensatz © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Bevölkerungspyramide.
Ein Beispiel für ein Balkendiagramm. Es zeigt die Bevölkerung Deutschlands eingeteilt in 20 Altersgruppen. Auf der x-Achse stehen die Altersgruppen. Auf der y-Achse steht die Bevölkerungszahl.
Datensatz © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Bevölkerungspyramide.

Wie können wir die Visualisierung coden, so dass sie möglichst vielen Menschen mit und ohne Behinderungen zugänglich ist?

Alternativen anbieten

  • Bildbeschreibungen
  • Daten in Tabellenform
  • Daten als Download
  • Sonification
Ein Menü, das Möglichkeiten bietet, die Daten anzuhören, die Daten runterzuladen oder die Daten als Tabelle aufzurufen.
Eine Tabelle, die die Bevölkerungszahl von Deutschland nach Altersgruppen darstellt. Über der Tabelle ist ein Button 'Zurück zur Visualisierung.'

Die Elemente der Visualisierung selbst zugänglich machen für Tastatur- und Screenreader-Nutzer:innen

Wieder das Balkendiagramm mit der Bevölkerungszahl nach Altersgruppen. Diesmal ist jedoch über einem der Balken ein Tooltip, der die Altersgruppe und die Bevölkerungszahl angibt, die von diesem Balken dargestellt werden.
Datensatz © Statistisches Bundesamt (Destatis), 2022, Genesis-Online; Datenlizenz by-2-0; eigene Berechnung/eigene Darstellung. Datensätze: Bevölkerungspyramide.

Elemente zugänglich machen

  • Den Achsen aria-labels geben
  • z. B. im Balkendiagramm die Balken antabbar machen mit tabindex="0"
  • Balken für Screenreader labeln z.B via aria-label oder Verweis auf Tooltip-Inhalt mit aria-labelledby

Wichtig: kommuniziere Screenreader-Nutzer:innen, dass sie gerade eine Visualisierung vor sich haben!

Siehe z. B. Sharif, Ather, Sanjana Shivani Chintalapati, Jacob O. Wobbrock, and Katharina Reinecke. “Understanding Screen-Reader User’s Experiences with Online Data Visualizations.” In The 23rd International ACM SIGACCESS Conference on Computers and Accessibility, 1–16. ASSETS ’21. New York, NY, USA: Association for Computing Machinery, 2021. https://doi.org/10.1145/3441852.3471202.

Abschluss

Frank Elavskys Chartability

Screenshot der Webseite von Chartability. https://chartability.fizz.studio/
Beispielkriterium aus Chartability: 'Low Contrast'. Das Kriterium hat eine kurze Beschreibung, einen Link zu einem Beispiel, einen Link zu einem Tool und einen Link zu einem Standard, aus dem das Kriterium abgeleitet wurde. https://chartability.fizz.studio/
Chartability ist lizenziert unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz .

Fragen? Feedback? Anmerkungen?

Schreib mir auf Mastodon!

@anvi@chaos.social