Barrierefreiheit von Diagrammen und Tabellen

Warum ist das wichtig?

Zahlen und Daten sind heute überall: in Statusreports, Geschäftsberichten, KPI-Dashboards, Schulungsunterlagen. Wenn Tabellen und Diagramme nicht barrierefrei sind, schließen wir Mitarbeitende und Kund:innen aus, die zum Beispiel Screenreader nutzen, eine Farbsehschwäche haben und die Inhalte mobil oder unter Zeitdruck konsumieren. Diverse Forschung über Mensch-Maschine Interaktion zeigt, dass Screenreader-Nutzende bei Online-Diagrammen deutlich mehr Zeit benötigen und häufiger Fehler machen, wenn Visualisierungen nicht zugänglich sind, weil die Elemente nicht gut aufbereitet sind. Klassische Fehler und Barrieren sind: Nur Bilder ohne Textalternativen, Fehlende Strukturen in Tabellen, wie beispielsweise Kopfzellen, Farben als alleiniges Unterscheidungsmerkmal und eigentlich interaktive Charts, die mit Tastatur und Screenreader nicht bedient werden können.

Sofort umsetzbar: 10-Minuten Schritte für Tabellen

1. Einfache Struktur erzwingen
   • Kein Zellen verbinden, keine verschachtelten Tabellen erstellen.
   • Wenn komplex, in mehrere kurze Tabellen aufteilen.
2. Kopfzeilen korrekt auszeichnen
   • <th>* für Kopfzellen nutzen, scope="col" und scope="row" setzen.
   • Für sehr komplexe Fälle: headers/id-Verknüpfungen.
3. Beschriftung & Kontext geben
   • <caption> mit Zweck/Zeitraum/Einheit.
   • Direkt vor oder nach der Tabelle eine kurze Beschreibung was gezeigt wird.
4. Linearisierung prüfen
   • Tabelle als reinen Text denken: Ergibt die Lesereihenfolge Sinn?
   • Test: Cursor in Zelle in platzieren und prüfen ob zugehöroge Zeilen- und Spaltenüberschriften erkennbar sind.
5. Export anbieten
   • Stellen Sie zum Beispiel csv Datein bereit, damit Nutzende selbst die Daten filtern und sortieren können.

*Wir liefern hier und bei den Diagrammen HTML Beispiele. Für barrierefreie PDFs oder andere Formate sind meistens sehr ähnliche Funktionen verfügbar.

Sofort umsetzbar: 10-Minuten Schritte für Diagramme

1. Zwei-Stufen-Textalternative
   • Der Alternativtext der Grafik wird im Optimalfall kurz gehalten auf 1-2 Sätze.
   • Längere Beschreibungen im Fließtext oder per “Details einblenden” übermitteln, Achsen, wichtige Werte und Gesamtbotschaft.
2. Datentabelle ergänzen
   • Unter oder neben dem Diagramm kann eine maschinenlesbare Tabelle zur Verfügung gestellt werden. Die verbessert Genauigkeit, Detailgrad und reduziert kognitive Last.
3. Nicht nur Farbe
   • Wichtige Informationen werden nicht nur über Farbe übermittelt
   • Linien direkt beschriften (Datenreihen-Label am Ende der Linie)
   • Unterschiedliche Stricharten/Symbole ergänzen Farbe
4. Interaktion zugänglich machen (falls interaktiv)
   • Tastaturbedienung und Fokusindikation werden angeboten, damit auch ohne Maus die Interaktion wahrgenommen werden kann
5. “Worum geht es hier?”
   • ​​​​​​​Die Kernaussage wird über der Grafik ausformuliert.
   • Das hilft auch Menschen mit kognitiven Behinderungen oder für einen schnellen Überblick.

Weitere Quellen zum Thema:

• Ather Sharif, Sanjana S. Chintalapati, Jacob O. Wobbrock, and Katharina Reinecke. 2021. Understanding Screen-Reader Users’ Experiences with Online Data Visualizations. In The 23rd International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS ’21), October 18–22, 2021, Virtual Event, USA. ACM, New York, NY, USA, 16 pages. https://doi.org/10.1145/3441852.3471202
• Yanan Wang, Ruobing Wang, Crescentia Jung, and Yea-Seul Kim. 2022. What makes web data tables accessible? Insights and a tool for rendering accessible tables for people with visual impairments. In CHI Conference on Human Factors in Computing Systems (CHI ’22), April 29-May 5, 2022, New Orleans, LA, USA. ACM, New York, NY, USA, 20 pages. https://doi.org/10.1145/3491102.3517469 
• John Thompson, Jesse Martinez, Alper Sarikaya, Edward Cutrell, and Bongshin Lee. 2023. Chart Reader: Accessible Visualization Experiences Designed with Screen Reader Users. In Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems (CHI ’23), April 23–28 2023, Hamburg, Germany. ACM, New York, NY, USA, 18 pages. https://doi.org/10.1145/3544548.3581186 
• Ather Sharif, Joo Gyeong Kim, Jessie Z. Xu, and Jacob O. Wobbrock. 2024. Understanding and Reducing the Challenges Faced by Creators of Accessible Online Data Visualizations. In The 26th International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS ’24), October 27–30, 2024, St. John’s, NL, Canada. ACM, New York, NY, USA, 20 pages. https://doi.org/10.1145/3663548.3675625