Barrierefreie Diagramme & Datenvisualisierung

Ein barrierefreies Diagramm besteht aus drei Ebenen: der Kernaussage als Text, den Daten als echte Tabelle und der Grafik selbst mit ausreichendem Kontrast und einem zweiten Unterscheidungsmerkmal neben der Farbe. Die Pflicht dazu kommt aus WCAG 1.1.1, 1.4.1 und 1.4.11 – die eigentliche Arbeit steckt aber im ersten Satz, nicht in der Technik.

Ein Diagramm ist eine Abkürzung für die Augen: Es macht Muster sichtbar, die in der Rohtabelle verborgen bleiben. 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.

Das Wichtigste in Kürze

• Drei Ebenen: Kernaussage als Text, Daten als Tabelle, Grafik mit Kontrast und zweitem Merkmal. Die erste Ebene ist die wichtigste und wird am häufigsten vergessen.
• Der Alt-Text beschreibt die Erkenntnis, nicht die Form. „Balkendiagramm mit zwölf blauen Balken“ hilft niemandem; „Umsatz stieg 2025 um 12 % auf 4,2 Mio. €“ schon.
• Die Datentabelle ersetzt das Diagramm vollständig – aufklappbar unter der Grafik, als echte <table> mit <caption> und <th>.
• Farbe darf nie das einzige Merkmal sein (1.4.1). Rund 8 % der Männer und etwa 0,5 % der Frauen unterscheiden Rot und Grün kaum – Direktbeschriftung, Strichmuster und Marker-Formen lösen das.
• 3:1 Kontrast für bedeutungstragende Linien und Flächen (1.4.11), 4,5:1 für Beschriftungen als Text.
• SVG vor Canvas: SVG ist DOM, kann Namen tragen und fokussierbar sein. Canvas ist eine Pixelfläche und für assistive Technologien leer.
• Der Graustufen-Test dauert zwei Sekunden und findet die meisten Farbprobleme: Bleibt jede Reihe identifizierbar, wenn die Farbe verschwindet?
• Animierte oder live aktualisierte Diagramme brauchen eine Bremse (2.2.2) und gedrosselte Statusmeldungen.

Die drei Ebenen der Alternative

Für jedes Diagramm gilt WCAG 1.1.1: Es braucht eine Textalternative, die denselben Zweck erfüllt. Bei komplexen Bildern – und ein Diagramm ist per Definition eines – empfiehlt das W3C dafür ein zweiteiliges Vorgehen: eine kurze Alternative, die das Bild benennt, und eine ausführliche Beschreibung an einer Stelle, die programmatisch mit dem Bild verknüpft ist.

Ebene 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. Es hilft nebenbei jedem eiligen Leser und jeder Suchmaschine, und es ist der Teil, der bei KI-Antworten zitiert wird.

Ebene 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-Nutzer sogar die bequemste Form – dort liest man Zahlen ohnehin lieber Zeile für Zeile als in einer beschriebenen Kurve.

Ebene 3: Die Grafik selbst so zugänglich wie möglich. Dazu unten mehr.

<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, mit einem
      Rückgang im August. Details in der Tabelle unter der Grafik.
    </desc>
    <!-- Balken … -->
  </svg>
  <figcaption>Umsatz 2025: +12 % zum Vorjahr, stärkster Monat Dezember.</figcaption>
</figure>

<details>
  <summary>Daten als Tabelle anzeigen</summary>
  <table>
    <caption>Umsatz 2025 nach Monaten in Euro</caption>
    …
  </table>
</details>

Das figure/figcaption-Gespann bindet Beschriftung an Grafik; role="img" plus <title>/<desc> macht das SVG selbst ansprechbar. Wichtig dabei: role="img" fasst das SVG zu einem einzigen Objekt zusammen – die einzelnen Balken darin sind dann für Screenreader nicht mehr erreichbar. Das ist bei einem Diagramm mit Datentabelle daneben genau richtig; bei einem interaktiven Diagramm, in dem man Datenpunkte anspringen soll, ist es der falsche Weg.

Der Alt-Text: schreib die Erkenntnis, nicht die Optik

Der schlechteste Alt-Text eines Diagramms beschreibt seine Form. Der beste beantwortet die Frage, für die das Diagramm gemacht wurde. Ein Beispiel aus derselben Grafik:

Wer die Kernaussage nicht in einen Satz bekommt, hat meist kein Barrierefreiheits-, sondern ein Diagramm-Problem: Dann ist unklar, was die Grafik zeigen soll. Da würd ich einen Schritt zurückgehen und die Frage klären, bevor ich am Alt-Text feile.

Für sehr datenreiche Grafiken gibt es die Zwischenlösung, die das W3C für komplexe Bilder beschreibt: kurzer Alt-Text plus ausführliche Beschreibung im umgebenden Text, verknüpft per aria-describedby. Dann steht die Langbeschreibung sichtbar auf der Seite – wo sie ohnehin allen nützt – und nicht in einem Attribut, das niemand außer Screenreader-Nutzern zu sehen bekommt. Mehr zur Systematik unter Alt-Texte schreiben.

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. Drei Lösungen, in dieser Reihenfolge:

1. Direktbeschriftung an Linie oder Segment. Sie schlägt jede Legende – auch für Sehende, weil der Blick nicht mehr zwischen Legende und Grafik pendeln muss. Bei drei bis fünf Reihen ist das fast immer machbar.
2. Unterschiedliche Strichmuster und Marker-Formen. Durchgezogen, gestrichelt, gepunktet; Kreis, Quadrat, Dreieck. Das kostet nichts und überlebt jeden Farbverlust.
3. Muster-Füllungen bei Flächen. Schraffuren wirken schnell unruhig – sparsam einsetzen und lieber die Helligkeit stärker abstufen.

1.4.11 Nicht-Text-Kontrast: Jede bedeutungstragende Linie und Fläche braucht 3:1 gegen den Hintergrund. Achsen und Gitternetzlinien sind reine Orientierungshilfe und dürfen darunter liegen – die Datenreihen nicht. Beschriftungen als Text brauchen 4,5:1.

Und noch ein Kriterium, das man bei Diagrammen leicht übersieht: 1.4.5 Bilder von Text. Achsentitel und Datenlabels, die als Pixel in einem PNG stecken, lassen sich nicht vergrößern und nicht umfärben. In einem SVG sind sie echter Text – ein weiteres Argument gegen exportierte Bilddateien.

Der Selbsttest dauert zwei Sekunden: In den Browser-DevTools die Farbfehlsicht-Emulation einschalten oder das Diagramm mit filter: grayscale(1) betrachten. Bleibt jede Reihe identifizierbar? Mehr zu Messung und Werkzeugen unter Farbkontraste.

Ein Wort zu Corporate-Design-Paletten: Sie sind für Flächen und Akzente gemacht, nicht für sechs Datenreihen nebeneinander. Paletten, die auf Helligkeits-Abstufung setzen statt auf reine Ton-Variation, überleben den Graustufen-Test; solche mit sechs gleich hellen Pastelltönen tun es nie. Wenn die Marke drei Farben hat und das Diagramm sechs Reihen braucht, ist die Antwort nicht „drei weitere Farben erfinden“, sondern die Reihen zu gruppieren oder zwei Diagramme zu zeichnen.

Interaktive Diagramme: SVG vor Canvas

SVG ist DOM. Elemente können Namen tragen, fokussierbar sein und per Tastatur erreichbar sein – die Chart-Bibliothek muss es nur tun. Bei einem interaktiven Diagramm sieht das so aus:

• Das Diagramm ist ein Tabstop, danach führen Pfeiltasten von Datenpunkt zu Datenpunkt (Roving Tabindex, wie bei Tabs).
• Jeder Datenpunkt hat einen zugänglichen Namen mit Wert – „Dezember, 510.000 Euro“.
• Tooltips an Datenpunkten unterliegen 1.4.13: ausblendbar per Esc, mit dem Zeiger erreichbar, bestehend bis man sie schließt. Ein Tooltip, der nur bei Hover erscheint, macht die Werte zu Maus-Exklusivwissen.
• Zoom und Auswahlrechtecke brauchen einen Klick-Weg neben der Ziehbewegung (2.5.7) – siehe Karten & Drag-and-drop.

Canvas ist eine Pixelfläche und für assistive Technologien leer. Wenn Canvas – etwa aus Performance-Gründen bei 50.000 Datenpunkten –, dann mit vollständiger Alternative daneben: Kernaussage plus Tabelle. Die Grafik selbst bekommt role="img" und einen Namen, damit sie nicht als namenloses Element im Baum steht.

Live-Daten in Dashboards melden Änderungen über eine Statusmeldung – gezielt und gedrosselt. Ein Diagramm, das sich jede Sekunde aktualisiert und jede Änderung ansagt, ist für Screenreader-Nutzer unbenutzbar. Praktikabel ist: nur bei relevanten Schwellen melden („Auslastung über 90 %“), plus ein Button „Werte jetzt vorlesen“. Und wenn sich etwas animiert bewegt, gilt 2.2.2 – Pausieren muss möglich sein.

Eine Chart-Bibliothek auswählen

Das ist die Entscheidung mit dem größten Hebel, und sie wird meist getroffen, bevor jemand an Barrierefreiheit denkt. Fünf Fragen, die ich vorher stelle:

1. Erzeugt sie SVG oder Canvas – und wenn Canvas, gibt es einen SVG-Modus?
2. Kann sie eine Datentabelle aus denselben Daten ausgeben, oder muss ich sie doppelt pflegen?
3. Sind die Datenpunkte per Tastatur erreichbar, und mit welchen Tasten?
4. Lassen sich Strichmuster und Marker-Formen je Reihe setzen, nicht nur Farben?
5. Sind die Tooltips fokusbasiert oder nur hover-basiert?

Wer nachrüsten muss, weil die Antwort auf 1 und 3 „nein“ lautet, zahlt das mehrfach. Es lohnt, danach auszuwählen statt nachzurüsten – zugängliche SVG-Bibliotheken sind inzwischen keine Nische mehr.

Sonderfälle

Karten, Netzwerke, Sankey-Diagramme. Gleiche Staffel, mehr Aufwand: Kernaussage, strukturierte Daten als Tabelle oder Liste, Interaktion mit Tastatur. Bei Beziehungsdiagrammen ist eine verschachtelte Liste oft die bessere Datenform als eine Tabelle. Für Geo-Karten gilt zusätzlich das Muster Karten & Drag-and-drop.

Sonifikation – Datenreihen als Tonhöhenverlauf hörbar machen – gibt es in einigen Bibliotheken und ist ein schöner zusätzlicher Zugang. Als Ersatz für Tabelle und Kernaussage taugt sie nicht: Man hört einen Trend, aber keine Zahl, und die Bedienung ist nirgends standardisiert. Ich würde sie als Zugabe behandeln, nicht als Erfüllung von 1.1.1.

Druck und Kontrastmodi. Im Windows-Kontrastmodus werden Hintergrundfarben ersetzt, und SVG-Füllungen können verschwinden. @media (forced-colors: active) gibt die Möglichkeit, Linienbreiten und currentColor zu setzen, damit das Diagramm auch dort lesbar bleibt. Der Graustufen-Test findet die meisten dieser Fälle mit.

Diagramme in PDF-Berichten. Dort gilt dasselbe, nur mühsamer – siehe PDF und Barrierefreiheit. Eine Datentabelle im Anhang ist die pragmatische Lösung.

So testest du es

1. Graustufen. filter: grayscale(1) oder DevTools-Emulation. Bleibt jede Reihe unterscheidbar?
2. Alt-Text vorlesen lassen – ohne die Grafik anzusehen. Weiß man danach, was das Diagramm sagt?
3. Tabelle prüfen. Ist sie vorhanden, hat sie <caption> und <th>, stimmen die Zahlen mit der Grafik überein?
4. Nur Tastatur. Kommt man an die Datenpunkte und an die Tooltips? Schließt Esc sie wieder?
5. Kontrast messen. Datenreihen gegen den Hintergrund: mindestens 3:1. Achsentexte: 4,5:1.
6. Auf 200 % zoomen. Bleiben die Beschriftungen lesbar, oder überlappen sie?

Häufige Fehler

• Diagramm als PNG mit Alt „Diagramm“ – Totalausfall auf allen drei Ebenen.
• Alt-Text beschreibt die Form statt der Aussage.
• 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.
• Achsentexte als Pixel in einer Bilddatei – nicht vergrößerbar (1.4.5).
• Animierte Charts ohne Pause – 2.2.2 gilt auch hier.
• Live-Dashboard, das jede Änderung ansagt – Dauerrauschen statt Information.
• role="img" an einem interaktiven Diagramm – macht die Datenpunkte unerreichbar.

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, und für viele Berichte ist das die richtige Antwort. Aber zugängliche SVG-Diagramme sind erreichbar geworden: Gute Bibliotheken liefern Fokus-Reihenfolge und Ansagen mit. Es lohnt, danach auszuwählen statt später nachzurüsten.

Welche Farbpalette ist „sicher“?

Keine ist automatisch sicher. Paletten, die auf Helligkeits-Abstufung statt reiner Ton-Variation setzen, überleben den Graustufen-Test – aber prüfen statt vertrauen: Kontrast-Werkzeuge und die Farbfehlsicht-Emulation der DevTools. Und wenn eine Palette sechs gleich helle Töne hat, ist sie für Datenreihen ungeeignet, egal wie schön sie ist.

Wie lang darf die Beschreibung eines Diagramms sein?

So lang, wie die Aussage braucht. Bei einem einfachen Trend genügt ein Satz; bei einer Grafik mit vier Reihen und einem Bruch in der Zeitachse sind es fünf. Was nicht in den Alt-Text passt, gehört sichtbar in den Text darunter – dort ist es besser aufgehoben als in einem Attribut.

Was ist mit Infografiken, die keine reinen Daten zeigen?

Dieselbe Logik, andere Alternative: Statt einer Datentabelle braucht eine Infografik eine strukturierte Textfassung – Überschriften, Listen, Absätze in derselben Reihenfolge wie die Grafik. Das W3C nennt das im Tutorial zu komplexen Bildern die Langbeschreibung, und sie darf ruhig sichtbar auf der Seite stehen.

Muss ich jedes Segment eines Kreisdiagramms beschreiben?

Nein, und meistens sollte man es nicht. Ein Kreisdiagramm sagt „A ist der größte Anteil, B und C teilen sich den Rest“ – das gehört in den Text, die genauen Prozentwerte in die Tabelle. Zehn Segmente einzeln im Alt-Text aufzuzählen erzeugt eine Vorlesezeit, die niemand durchhält.

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.

Wenn du nur zwei Dinge mitnimmst: Schreib den Satz, den das Diagramm sagen soll – und schau es dir einmal in Graustufen an. Diese beiden Handgriffe decken mehr ab als jede ARIA-Nachrüstung. Sortier- und filterbar werden die Daten im Muster sortierbare Tabellen.

Quellen

• Complex Images (W3C WAI – kurze Alternative plus Langbeschreibung, Datentabelle als Alternative, Beispiele)
• Understanding SC 1.4.1 Use of Color (W3C – warum Farbe nie das einzige Merkmal sein darf, mit Diagramm-Beispielen)