Diagramme und Datenvisualisierungen barrierefrei beschreiben

Ein Balkendiagramm transportiert auf einen Blick, was ein Absatz Text in mehreren Sätzen erklären müsste – vorausgesetzt, man kann es sehen. Für blinde und stark sehbehinderte Nutzer bleibt ein reines Bild-Diagramm ohne Textalternative komplett verschlossen.

Barrierefreie Diagramme brauchen deshalb mehr als einen Alt-Text: eine strukturierte Beschreibung, eine zugängliche Datentabelle als Ergänzung und eine Farbgestaltung, die auch ohne Farbwahrnehmung funktioniert.

Warum reine Bild-Diagramme nicht ausreichen

Ein Chart als PNG oder JPEG exportiert und mit einem generischen Alt-Text wie „Umsatzdiagramm" versehen, erfüllt keine der beiden zentralen Anforderungen: Weder lassen sich einzelne Werte ablesen, noch wird der Trend oder Vergleich erkennbar, den das Diagramm eigentlich zeigen soll.

Für Screenreader-Nutzer bedeutet ein solches Bild schlicht: Es existiert ein Diagramm, aber sein Inhalt bleibt unbekannt. Die Information, die die Grafik transportieren sollte, geht komplett verloren.

Auch Nutzer mit kognitiven Einschränkungen profitieren von einer zusätzlichen textlichen oder tabellarischen Aufbereitung, weil sich Zahlen in einer strukturierten Tabelle oft leichter verarbeiten lassen als aus einer dichten grafischen Darstellung.

Textalternativen und ausführliche Beschreibungen

Ein kurzer Alt-Text sollte Diagrammtyp und Kernaussage zusammenfassen, etwa „Balkendiagramm: Umsatz stieg von 2023 bis 2025 kontinuierlich an, stärkster Zuwachs im dritten Jahr." Das reicht für einen schnellen Überblick.

Für komplexere Diagramme mit vielen Datenreihen braucht es zusätzlich eine ausführlichere Beschreibung im sichtbaren Text, die Achsen, Einheiten und auffällige Werte benennt – etwa als Absatz direkt vor oder nach der Grafik.

Diese ausführliche Beschreibung nutzt nicht nur Screenreader-Nutzern, sondern allen, die das Diagramm aus anderen Gründen nicht vollständig erfassen, etwa bei schlechter Bildschirmqualität oder kleinen mobilen Displays.

Die zugängliche Datentabelle als Pflichtergänzung

Der zuverlässigste Weg zu einem barrierefreien Diagramm ist eine zugängliche Datentabelle, die dieselben Werte enthält, die auch im Chart dargestellt sind. Screenreader lesen Tabellen zeilenweise mit korrekt zugeordneten Spaltenüberschriften vor und machen jeden Einzelwert erreichbar.

Diese Tabelle kann sichtbar unterhalb der Grafik stehen oder über eine Sprungmarke beziehungsweise ein ausklappbares Element erreichbar sein – wichtig ist nur, dass sie tatsächlich im Seiteninhalt existiert und nicht nur als Download verlinkt wird.

Bei interaktiven Dashboards mit mehreren Diagrammen lohnt sich eine zentrale Tabellenansicht, die alle Kennzahlen gesammelt zeigt, statt für jedes einzelne Chart eine eigene Tabelle zu pflegen.

Farbkodierung nicht als einziges Unterscheidungsmerkmal

Wird eine Datenreihe ausschließlich über die Farbe von einer anderen unterschieden, verlieren Nutzer mit Farbsehschwäche oder bei Graustufen-Darstellung die Unterscheidung komplett. Rot-Grün-Kombinationen sind dabei besonders kritisch.

Zusätzliche Muster, Formen oder direkte Beschriftungen an den Datenpunkten lösen das Problem: Ein gestrichelter gegenüber einem durchgezogenen Linienstil, unterschiedliche Balkenmuster oder Datenbeschriftungen direkt am Element sichern die Unterscheidbarkeit unabhängig von der Farbe.

Ergänzend sollte der Kontrast zwischen Datenreihen und Hintergrund den Anforderungen an Farbkontraste genügen, damit auch Nutzer mit Sehbehinderung Linien und Balken vom Hintergrund unterscheiden können.

SVG-Diagramme mit ARIA korrekt beschriften

Wird ein Diagramm als SVG statt als Bilddatei eingebunden, lässt sich die Zugänglichkeit direkt im Markup verbessern: role="img" auf dem SVG-Element zusammen mit aria-label oder aria-labelledby liefert eine Kurzbeschreibung.

Einzelne Elemente innerhalb des SVG, etwa Balken oder Segmente, sollten nicht einzeln fokussierbar sein, wenn sie nicht interaktiv sind – das würde Tastaturnutzer zwingen, sich durch dutzende bedeutungslose Elemente zu tabben.

Enthält das SVG rein dekorative Gitterlinien oder Hintergrundelemente, gehören diese mit aria-hidden="true" aus dem Vorlese-Fluss entfernt, damit nur die eigentlichen Daten angesagt werden.

Interaktive Diagramme: Tooltips und Zoom zugänglich machen

Tooltips, die nur bei Mausüberfahrt erscheinen, sind für Tastaturnutzer unerreichbar. Jedes Element, das einen Tooltip auslöst, muss auch per Tastaturfokus erreichbar sein und den Tooltip-Inhalt dann ebenfalls anzeigen.

Zoom- und Filterfunktionen in interaktiven Dashboards brauchen eigene, beschriftete Bedienelemente statt reiner Gesten wie Pinch-to-Zoom oder Mausrad-Scrollen, die ohne Maus oder Touchscreen gar nicht auslösbar sind.

Ändert sich durch Zoom oder Filter der dargestellte Datenbereich, sollte eine Live-Region kurz zusammenfassen, welcher Zeitraum oder welche Kategorie jetzt angezeigt wird, damit Screenreader-Nutzer die Änderung mitbekommen.

Auch die Reihenfolge, in der interaktive Elemente per Tastatur erreichbar sind, verdient Aufmerksamkeit: Datenpunkte, Legenden-Filter und Zoom-Buttons sollten in einer nachvollziehbaren, der visuellen Anordnung entsprechenden Reihenfolge liegen. Springt der Fokus beim Tabben unvorhersehbar zwischen Diagrammbereichen hin und her, wird die Bedienung selbst für Nutzer ohne Sehbehinderung anstrengend. Ein einfacher Test hilft: Wer sich ausschließlich mit der Tastatur durch das gesamte Diagramm bewegt, sollte jederzeit nachvollziehen können, an welcher Stelle im Diagramm sich der Fokus gerade befindet.

Geodaten und Heatmaps barrierefrei ergänzen

Heatmaps und geografische Verteilungskarten gehören zu den schwierigsten Diagrammtypen, weil sie Werte über eine Fläche statt über einfache Achsen darstellen. Eine reine Farbskala von hell bis dunkel liefert für Screenreader-Nutzer keinerlei Information, und selbst sehende Nutzer mit Farbsehschwäche können feine Abstufungen oft nicht mehr zuverlässig unterscheiden.

Eine zugängliche Ergänzung besteht aus einer Rangliste der wichtigsten Punkte, etwa der zehn Regionen mit den höchsten oder niedrigsten Werten, dargestellt als einfache Tabelle mit Ortsname und Zahlenwert. Diese Liste transportiert die zentrale Aussage der Karte, ohne dass die geografische Position selbst erfasst werden muss.

Wo die Karte interaktiv ist und einzelne Regionen anklickbar sind, sollte jede Region als eigenständiges, per Tastatur fokussierbares Element mit eigenem Namen und Wert erreichbar sein, statt nur über einen Mausklick auf die entsprechende Fläche. Ohne diese Tastaturzugänglichkeit bleibt die Karte für einen erheblichen Teil der Nutzer schlicht unbedienbar.

Bei rein dekorativen Kartenhintergründen, die keine eigenen Daten transportieren, reicht ein leeres Alt-Attribut oder aria-hidden, damit der Screenreader nicht unnötig über bedeutungslose geografische Umrisse informiert, sondern direkt zur eigentlichen Datentabelle weiterspringt.

Praxisbeispiel: Umsatz- und Vergleichsdiagramme

Bei einem klassischen Umsatzdiagramm über mehrere Jahre reicht häufig die Kombination aus kurzem Alt-Text, einer Datentabelle mit Jahr und Umsatzwert sowie einem Kontrast, der auch in Graustufen funktioniert.

Bei Vergleichsdiagrammen zwischen mehreren Produkten oder Regionen hilft eine klare Legende mit Text statt reiner Farbflächen, ergänzt um direkte Wertbeschriftungen an den größten und kleinsten Balken.

Wird das Diagramm regelmäßig aktualisiert, etwa monatlich, sollte die begleitende Tabelle automatisch mitwachsen – ein manuell gepflegtes Diagramm ohne aktuelle Tabelle veraltet sonst schnell und wird selbst zur Fehlerquelle.

Hinweis: Dieser Beitrag bietet allgemeine technische Orientierung und ersetzt keine individuelle Rechtsberatung zur Umsetzung des BFSG.

Häufig gestellte Fragen