Barrierefreie Diagramme & Datenvisualisierung

Ein Diagramm ist eine Abkürzung für die Augen: Es macht Muster sichtbar, die in der Rohtabelle verborgen wären. Genau deshalb ist es für alle, die nicht oder eingeschränkt sehen, erst einmal eine verschlossene Tür. Barrierefreie Datenvisualisierung heißt: die Abkürzung anbieten und den vollwertigen Weg daneben – Text und Daten.

Die drei Ebenen der Alternative

Für jedes Diagramm gilt WCAG 1.1.1: Es braucht eine Textalternative, die denselben Zweck erfüllt. Bewährt hat sich die Dreier-Staffel:

1. Die Kernaussage als Text – im Alt-Text oder besser sichtbar im Fließtext: „Der Umsatz stieg 2025 um 12 % auf 4,2 Mio. €; stärkster Monat war der Dezember.“ Das ist, was das Diagramm sagen soll – und hilft nebenbei jedem eiligen Leser und jeder Suchmaschine.
2. Die Daten als Tabelle – aufklappbar unter dem Diagramm (details & summary), als echte Datentabelle. Sie ersetzt das Diagramm vollständig und ist für Braillezeilen-Leser sogar die bequemste Form.
3. Die Grafik selbst so zugänglich wie möglich – siehe unten.

<figure>
  <svg role="img" aria-labelledby="chart-titel chart-desc">
    <title id="chart-titel">Umsatz 2025 nach Monaten</title>
    <desc id="chart-desc">Balkendiagramm: Anstieg von 280.000 € im Januar
      auf 510.000 € im Dezember; Details in der Tabelle unter der Grafik.</desc>
    <!-- Balken … -->
  </svg>
  <figcaption>Umsatz 2025: +12 % zum Vorjahr.</figcaption>
</figure>

<details>
  <summary>Daten als Tabelle anzeigen</summary>
  <table>…</table>
</details>

Das figure/figcaption-Gespann bindet Beschriftung an Grafik; role="img" plus <title>/<desc> macht das SVG selbst ansprechbar.

Farben: Kontrast plus zweites Merkmal

Diagramme sind der Härtetest für zwei Kriterien:

• 1.4.1 Benutzung von Farbe: Linien und Segmente dürfen sich nicht nur im Farbton unterscheiden – rund 8 % der Männer sehen Rot/Grün kaum auseinander. Lösungen: direkte Beschriftung an Linie/Segment (besser als jede Legende), unterschiedliche Marker-Formen und Strichmuster, Muster-Füllungen bei Flächen.
• 1.4.11 Nicht-Text-Kontrast: Jede bedeutungstragende Linie und Fläche braucht 3:1 gegen den Hintergrund; Achsen-Beschriftungen als Text sogar 4,5:1.

Der schnelle Selbsttest ist der Graustufen-Blick: Bleibt jede Reihe identifizierbar, wenn die Farbe verschwindet?

Interaktive Diagramme: SVG vor Canvas

• SVG ist DOM: Elemente können fokussierbar sein, Namen tragen, per Tastatur erreichbar sein – die Chart-Bibliothek muss es nur tun (das entscheidende Auswahlkriterium!). Tooltips an Datenpunkten unterliegen 1.4.13, Interaktion braucht Tastaturwege.
• Canvas ist eine Pixelfläche – für assistive Technologien leer. Wenn Canvas, dann mit vollständiger Alternative daneben (Tabelle + Kernaussage); die Grafik bekommt role="img" und einen Namen.
• Live-Daten (Dashboards) melden Änderungen über eine Statusmeldung – gezielt und gedrosselt, sonst wird die Ansage zum Dauerrauschen.

Randnotiz – schreib die Erkenntnis, nicht die Optik. Der schlechteste Alt-Text eines Diagramms beschreibt seine Form („Balkendiagramm mit zwölf blauen Balken“). Der beste beantwortet die Frage, für die das Diagramm gemacht wurde. Wer die Kernaussage nicht in einen Satz bekommt, hat meist kein Barrierefreiheits-, sondern ein Diagramm-Problem.

Häufige Fehler

• Diagramm als PNG mit Alt „Diagramm“ – Totalausfall auf allen Ebenen.
• Legende nur über Farbe zuordenbar – Graustufen-Test machen.
• Datentabelle fehlt oder liegt als unzugängliches PDF daneben.
• Hover-only-Tooltips – Werte nur für Mausnutzer.
• Kontrastarme Pastell-Paletten aus dem Corporate Design ohne Prüfung.
• Animierte Charts ohne Pause – 2.2.2 gilt auch hier.

Häufige Fragen

Reicht die Datentabelle allein – ohne zugängliches Diagramm?

Als Minimum nach 1.1.1: ja, Tabelle plus Kernaussage erfüllen die Pflicht. Aber zugängliche SVG-Diagramme sind erreichbar geworden – gute Bibliotheken liefern Fokus-Reihenfolge und Ansagen mit. Es lohnt, danach auszuwählen statt nachzurüsten.

Welche Farbpalette ist „sicher“?

Keine ist automatisch sicher – aber Paletten, die auf Helligkeits-Abstufung statt reiner Ton-Variation setzen, überleben den Graustufen-Test. Prüfen statt vertrauen: Kontrast-Werkzeuge und die Farbfehlsicht-Emulation der DevTools.

Was ist mit komplexen Visualisierungen (Karten, Netzwerke)?

Gleiche Staffel, mehr Aufwand: Kernaussage, strukturierte Daten (Tabelle oder Liste), Interaktion mit Tastatur. Für Geo-Karten gilt zusätzlich das Muster Karten & Drag-and-drop.

Fazit

Barrierefreie Diagramme sind ein Dreiklang: Kernaussage als Text, Daten als Tabelle, Grafik mit Kontrast und zweitem Merkmal. Die Pflicht kommt aus 1.1.1, 1.4.1 und 1.4.11 – das Handwerk aus Tabellen-Semantik und SVG-Technik. Sortier- und filterbar werden die Daten im Muster sortierbare Tabellen.