Design · Visualisierung

Barrierefreie Datenvisualisierung

Ein Diagramm transportiert auf einen Blick, was in einer Tabelle Zeile für Zeile zu lesen wäre, sofern man es sehen und entschlüsseln kann. Damit eine Datenvisualisierung wirklich für alle nutzbar ist, braucht sie mehr als die richtigen Farben: einen Text-Pfad, einen Daten-Pfad und einen Interaktions-Pfad. Diese Seite zeigt, wie sich die drei zusammen denken lassen.

  • 10 Minuten Lesezeit
  • Stand: Mai 2026

Was eine Datenvisualisierung barrierefrei macht

Eine Datenvisualisierung, ob Säulen-, Linien-, Tortendiagramm, Karte, Heatmap oder Streuung, gilt nach WCAG 2.2 als komplexes Bild : Sie trägt mehr Information, als sich in einem kurzen Satz ausdrücken lässt. Das ist kein Schwäche-Hinweis, sondern eine Einordnung: Komplexe Bilder brauchen laut W3C/WAI eine zweiteilige Text-Alternative: eine kurze Beschreibung, was zu sehen ist, und eine längere, die alle wesentlichen Aussagen wiedergibt.

Wir denken bei barrierefreien Charts gern in drei parallelen Pfaden:

  • Visueller Pfad: die Grafik selbst, lesbar mit gutem Kontrast, ohne reine Farbcodes und ohne winzige Schrift.
  • Text-Pfad: eine kurze Beschreibung (für Screenreader und Suchmaschinen) und eine ausführliche Erklärung nahe am Bild.
  • Daten-Pfad: die zugrunde liegenden Zahlen, als echte HTML-Tabelle oder als Download. Wer die Aussage nicht sehen kann, prüft sie an den Daten nach.

Wer alle drei mitliefert, erfüllt mehr WCAG-Kriterien gleichzeitig: Erfolgskriterium 1.1.1 (Nicht-Text-Inhalte), 1.4.1 (Verwendung von Farbe), 1.4.11 (Nicht-Text-Kontrast) und meist auch 1.3.1 (Informationen und Beziehungen). Und alle drei helfen auch Sehenden: Farbblinde sehen Patterns, Suchmaschinen verstehen die Tabelle, Datenjournalist:innen prüfen Zahlen nach.

Dass dieser Aufwand wirkt, ist auch empirisch belegt. Ein Nutzer:innentest von Alcaraz-Martínez und Kolleg:innen (2024) verglich barrierefreie und nicht barrierefreie Fassungen derselben Diagramme und fand die barrierefreien Versionen für sehbehinderte Menschen wirksamer und zufriedenstellender. Besonders halfen gut platzierte, ausreichend große Legenden, klar beschriftete Achsen und die redundante Kodierung über Farbe und Muster zugleich. Konkrete Umsetzungsmuster geben auch staatliche Design-Systeme vor, etwa das des britischen Bildungsministeriums mit Empfehlungen zu Balkenabständen, zum SVG-Format und zu verpflichtenden Text- und Tabellen-Alternativen.

Drei parallele Pfade zu denselben Daten Drei Felder nebeneinander, die drei Zugangswege zu einer Datenvisualisierung darstellen. Das erste Feld zeigt ein Augen-Symbol mit der Beschriftung Visueller Pfad und dem Zusatz Grafik mit gutem Kontrast. Das zweite Feld zeigt ein Text-Symbol mit der Beschriftung Text-Pfad und dem Zusatz kurze und lange Beschreibung. Das dritte Feld zeigt ein Tabellen-Symbol mit der Beschriftung Daten-Pfad und dem Zusatz Zahlen als HTML-Tabelle. Über allen dreien steht, dass jeder Pfad dieselbe Aussage eigenständig vermittelt. EINE AUSSAGE, DREI EIGENSTÄNDIGE ZUGÄNGE Visueller Pfad Grafik mit gutem Kontrast Text-Pfad kurze und lange Beschreibung Daten-Pfad Zahlen als HTML-Tabelle
Barrierefreie Charts denken in drei Pfaden: der Grafik selbst, einer Text-Alternative und den zugrunde liegenden Daten. Jeder Pfad vermittelt die Aussage eigenständig, weiter unten im Detail.

Farbwahl: Kontrast, Farbblind-Sicherheit, Patterns

WCAG 2.2 verlangt für grafische Objekte und UI-Komponenten einen Kontrast von mindestens 3 : 1 gegen benachbarte Farben (Erfolgskriterium 1.4.11, Level AA). Für Charts heißt das: jede Datenreihe muss sich klar von benachbarten Reihen und vom Hintergrund absetzen. Beschriftungs-Text und Achsen brauchen zusätzlich 4,5 : 1 (1.4.3) als normaler Text.

Farbe darf nach Erfolgskriterium 1.4.1 (Level A) nie das einzige Unterscheidungsmerkmal sein. Eine rote und eine grüne Linie sind in einer Rot-Grün-Blindheit nicht zu trennen, und auch Sehende ohne Farb-Einschränkung verlieren in monochromen Ausdrucken den Überblick. Praktisch heißt das: Farben werden durch eine zweite Codierung gestützt: Form, Position, Beschriftung am Element oder Pattern.

Methoden, Farbe zu stützen, pro Diagrammtyp
Chart-Typ Bewährte zweite Codierung Wann sie nicht reicht
Liniendiagramm Strichmuster (durchgehend, gestrichelt, gepunktet) plus Marker-Form an den Datenpunkten Bei mehr als 4 Reihen wird die visuelle Trennung schwierig, dann besser teilen oder direkt beschriften
Säulen-/Balkendiagramm Pattern-Füllung (Streifen, Punkte) plus Outline mit höherem Kontrast Sehr schmale Balken zeigen Patterns nicht erkennbar, Mindestbreite ca. 12 px halten
Tortendiagramm Direkte Beschriftung am Segment oder Leader-Line mit Wert Bei vielen kleinen Segmenten unleserlich, dann besser auf Balkendiagramm wechseln
Heatmap Sequentielle Skala (hell → dunkel), Werte als Zahlen in den Zellen, klare Achsen-Labels Divergierende Skalen (rot/blau für negativ/positiv) brauchen zusätzlich ein Vorzeichen oder Symbol
Karte / Choroplethe Sequentielle Skala in einer Farb-Familie plus Text-Listing der wichtigsten Regionen Wenn Regionen visuell ähnlich groß sind und nur über Farbe trennen, dann Beschriftung oder Liste pflicht

Text-Alternativen: kurz und lang

Komplexe Bilder brauchen laut W3C/WAI-Tutorial zwei Schichten:

  1. Eine kurze Beschreibung, die das Bild identifiziert und auf die längere Beschreibung verweist. Sie sitzt im alt -Attribut (bei <img> ) bzw. im <title> -Element oder per aria-labelledby (bei Inline-SVG).
  2. Eine lange Beschreibung mit den wesentlichen Aussagen, direkt im umgebenden Text, in einem <figcaption> oder über aria-describedby auf ein separates Text-Element verlinkt.

Die Technik G103 der WCAG nennt ergänzend: Wenn ein Diagramm einen Sachverhalt erklärt, der im Fließtext nur erwähnt wird, gehört die Erklärung des Bildes zur Text-Alternative, nicht die rein deskriptive Bildbeschreibung („ein blauer Balken neben einem roten Balken"), sondern die Aussage(„Umsatz 2024 lag 12 % über 2023, in beiden Jahren über dem Branchen-Durchschnitt").

Zwei Schichten der Text-Alternative: kurz und lang Ein zweistufiges Schaubild. Oben Schicht 1, die kurze Beschreibung, mit dem Beispiel Umsatz 2023 bis 2025 nach Region und dem Hinweis, dass sie das Bild identifiziert und im alt-Attribut oder im title-Element steht. Ein Pfeil nach unten führt zu Schicht 2, der langen Beschreibung, mit dem Beispiel DACH plus 21 Prozent, UK stabil, Nordamerika minus 11 Prozent und dem Hinweis, dass sie die wesentlichen Aussagen wiedergibt und im figcaption oder per aria-describedby steht. TEXT-ALTERNATIVE FÜR KOMPLEXE BILDER: ZWEI SCHICHTEN SCHICHT 1: KURZE BESCHREIBUNG „Umsatz 2023–2025 nach Region" · identifiziert das Bild · in alt / <title> SCHICHT 2: LANGE BESCHREIBUNG „DACH +21 %, UK stabil, Nordamerika −11 %" · gibt die Aussagen wieder in <figcaption> oder per aria-describedby
Die zweiteilige Text-Alternative: eine kurze Schicht, die das Bild benennt, und eine lange Schicht, die seine Aussagen wiedergibt, nicht das Aussehen, sondern die Botschaft.

Datentabelle als verlässlicher Fallback

Die robusteste Form, die Daten eines Charts zugänglich zu machen, ist eine echte HTML-Tabelle, entweder neben der Grafik sichtbar oder per <details> einklappbar. Sie hat drei Vorteile, die keine andere Methode kombiniert:

  • Screenreader navigieren sie als Tabelle: Zellen werden in Zeilen und Spalten angekündigt, Header werden mit jeder Zelle verknüpft. Nichts geht verloren, kein Wert wird gerundet, kein Trend interpretiert.
  • Sie ist textuell durchsuchbar. Eine Suche im Browser findet einzelne Werte; eine SVG-basierte Grafik nicht. Suchmaschinen indizieren die Tabelle und nehmen sie als Daten-Beleg.
  • Sie skaliert verlässlich. Auch auf einem 320-Pixel-Smartphone mit 400 % Zoom funktioniert die Tabelle. Charts werden in dieser Stresslage oft unleserlich.

Wer eine Tabelle nicht neben der Grafik zeigen will, kann sie hinter einer <details> -Sektion verstecken („Daten anzeigen"). Das ist semantisch korrekt, wird per Tastatur bedienbar und bleibt für Screenreader sichtbar.

Wie nötig dieser verlässliche Datenpfad ist, zeigt eine Untersuchung aus der COVID-19-Zeit. Ein Team um Danyang Fan prüfte 87 Web-Diagramme und befragte 127 Screenreader-Nutzer:innen und fand verbreitete Zugangsbarrieren, oft gerade weil eine echte, zugängliche Datentabelle fehlte (Fan und andere, 2023). Eine Tabelle ist deshalb kein Beiwerk, sondern ein eigenständiger und verlässlicher Zugangsweg.

Drei Pfade einer barrierefreien Datenvisualisierung Ein Schaubild zeigt drei nebeneinander stehende Spalten, jede eine alternative Form derselben Datenreihe: links ein Balkendiagramm mit drei beschrifteten Säulen (40, 70, 25) mit Streifen-Pattern, Outline und Wertbeschriftung über jedem Balken; in der Mitte ein Text-Block mit der kurzen und der ausführlichen Beschreibung; rechts eine HTML-Tabelle mit zwei Spalten (Kategorie und Wert) und drei Zeilen. Pfeile zwischen den Spalten zeigen, dass jede Form denselben Datenstand vermittelt. Über der ersten Spalte steht „Visueller Pfad", über der zweiten „Text-Pfad", über der dritten „Daten-Pfad". DREI PFADE EINER BARRIEREFREIEN DATENVISUALISIERUNG Dieselbe Datenreihe, drei alternative Formen, die sich gegenseitig stützen VISUELLER PFAD TEXT-PFAD DATEN-PFAD 40 A 70 B 25 C KURZE BESCHREIBUNG Balkendiagramm der Werte A, B, C. LANGE BESCHREIBUNG B ist mit 70 fast doppelt so hoch wie A (40); C liegt mit 25 deutlich darunter. Kategorie Wert A 40 B 70 C 25
Drei Pfade derselben Daten: ein Balkendiagramm mit Patterns und Wert-Beschriftung (links), eine kurze und eine ausführliche Beschreibung (Mitte) und eine HTML-Tabelle mit Kategorie und Wert (rechts). Jeder Pfad ist eigenständig vollständig: wer einen nicht nutzen kann, hat die Aussage trotzdem.

SVG-Charts mit ARIA korrekt auszeichnen

Inline-SVGs sind heute der Standard für Web-Charts. Damit Screenreader sie als Bild ankündigen und nicht als Sammlung anonymer Pfade interpretieren, braucht es drei Bausteine, alle auf dem <svg> -Element selbst:

  • Rolle: role="img" , sonst behandeln manche Browser das SVG als reines Layout-Element ohne semantische Bedeutung.
  • Kurzer Name: ein <title> -Element im SVG (oder ein aria-label auf dem SVG-Tag). Der Title wird vom Screenreader als „Bildname“ vorgelesen.
  • Lange Beschreibung: ein <desc> -Element im SVG, verknüpft per aria-labelledby (für mehr Reichweite über Browser-/Screenreader-Kombinationen) oder aria-describedby .

SVG-Chart mit barrierefreier Auszeichnung

 <!-- Inline-SVG mit role, title, desc und verknüpfender Beziehung --> 
<figure>
  <svg role= "img" 
aria-labelledby= "c1-t c1-d" 
viewBox= "0 0 320 200" 
>
    <title id= "c1-t" 
>Umsatz 2023–2025 nach Region</title>
    <desc id= "c1-d" 
>Drei Balken zeigen den Umsatz pro Region.
       DACH legte von 4,2 auf 5,1 Mio. Euro zu (+21 %); UK blieb
       stabil bei 2,8; Nordamerika sank von 6,1 auf 5,4 (−11 %).</desc>
    <!-- Pfade ... -->
  </svg>
  <figcaption>Quelle: interne Geschäftszahlen, Stand 31.12.2025.</figcaption>
</figure>

Sara Soueidan hat für den Khan Academy 2018 Annual Report ein vielzitiertes Pattern dokumentiert: SVG-Charts mit role="img" , aria-labelledby auf <title> und <desc> , plus eine sichtbar verlinkte Tabelle für die Daten. Diese Kombination hat sich auch außerhalb von Khan Academy als zuverlässig erwiesen.

Interaktive Charts: Tastatur und Fokus

Sobald ein Chart auf Maus-Hover oder Klick reagiert, etwa mit Tooltips, Zoom, Filter oder Drilldown, wird er zum interaktiven Widget. Damit gelten zusätzliche WCAG-Kriterien:

  • Tastatur-Bedienbarkeit(2.1.1): Jede mit Maus erreichbare Aktion muss auch per Tab, Pfeiltaste und Enter funktionieren. Tooltips zeigen sich auf Fokus genauso wie auf Hover.
  • Sichtbarer Fokus(2.4.7 / 2.4.11): Das gerade fokussierte Element, etwa ein einzelner Balken oder Datenpunkt, wird deutlich markiert. Der WCAG-2.2-Neuzugang 2.4.11 (Fokus nicht verdeckt) verbietet, dass ein Tooltip über dem fokussierten Punkt liegt.
  • Hover auf Anforderung(1.4.13): Wenn ein Tooltip bei Hover erscheint, muss man ihn auch wieder schließen können (Escape) und er muss persistent bleiben, solange der Cursor über ihm steht.
  • Beziehungen und Status(1.3.1 / 4.1.2): Wenn ein Filter aktiv ist, muss das auch per Screenreader hörbar sein, idealerweise über aria-pressed auf dem Filter-Button und aria-live="polite" auf einer Status-Region, die die geänderte Aussage zusammenfasst.

Praktisch bedeutet das: Datenpunkte werden in der Tab-Reihenfolge über tabindex="0" erreichbar (oder das Chart bekommt tabindex="0" und reagiert auf Pfeiltasten zur internen Navigation), und jeder Punkt trägt eine eigene Accessible-Name- Aussage („Region DACH, 2024, 4,8 Millionen Euro").

Interaktives Chart: fokussierter Datenpunkt mit Tastatur und Status-Ansage Ein Balkendiagramm mit drei Balken. Der mittlere, höchste Balken hat den Tastatur-Fokus und ist von einem kräftigen Rahmen umgeben; daneben ein Tooltip mit der Angabe Region DACH, 2024, 4,8 Millionen Euro. Unter dem Diagramm steht der Hinweis, dass die Bedienung per Tab und Pfeiltasten möglich ist. Rechts eine Status-Box mit der Beschriftung aria-live polite und dem Text Filter aktiv: nur 2024, die anzeigt, dass Statusänderungen für Screenreader angekündigt werden. INTERAKTIVES CHART: TASTATUR, FOKUS, STATUS-ANSAGE 2023 2024 2025 DACH · 2024 4,8 Mio. € Bedienbar per Tab und Pfeiltasten, Tooltip erscheint auf Fokus wie auf Hover. aria-live="polite" „Filter aktiv: nur 2024" Statusänderung wird vorgelesen.
Sobald ein Chart reagiert, wird es zum Widget: Datenpunkte sind per Tastatur erreichbar, der Fokus ist sichtbar, und Statusänderungen (z. B. ein gesetzter Filter) werden über eine aria-live -Region angekündigt.

10-Punkte-Praxis-Checkliste

  1. Trägt das Bild eine kurze und eine lange Beschreibung?
  2. Stützt mindestens eine zweite Codierung jede Farb-Aussage?
  3. Sind Datenreihen-Farben gegen Hintergrund 3 : 1 kontrastiert?
  4. Sind Beschriftungen mindestens 11 px groß und 4,5 : 1 kontrastiert?
  5. Ist eine vollständige HTML-Tabelle der Daten erreichbar?
  6. Hat das SVG role="img" , <title> und <desc> ?
  7. Funktioniert das Chart bei 400 % Zoom ohne horizontales Scrollen?
  8. Funktionieren alle Interaktionen per Tastatur?
  9. Ist der Fokus auf dem aktuell gewählten Punkt sichtbar?
  10. Werden Status-Änderungen (Filter, Drilldown) per aria-live angekündigt?

Mythen-Prüfung