Barrierefreie Datenvisualisierung

Barrierefreie Diagramme und Infografiken machen ihre Zahlen für alle zugänglich: mit einem kurzen Alternativtext, einer Langbeschreibung, einer echten Datentabelle, direkt am Diagramm stehenden Beschriftungen, Farben mit ausreichendem Kontrast und einem zweiten Merkmal neben der Farbe. Ich mache die Diagramme in Geschäftsberichten, Nachhaltigkeitsberichten, Statistikseiten von Behörden, Websites, Präsentationen und PDFs barrierefrei nach WCAG 2.2 Stufe AA, im Web als barrierefreies SVG, im PDF als getaggte Abbildung. Jeder Auftrag kommt mit Messwerten und einer klaren Liste dessen zurück, was die Prüfprogramme nicht beurteilen können.

Sie sind hier richtig, wenn einer dieser Punkte auf Sie zutrifft:

• Sie veröffentlichen einen Geschäftsbericht oder Nachhaltigkeitsbericht als Webseite oder PDF, und seine Diagramme sind Bilder ohne Text dahinter.
• Sie arbeiten in einer Behörde, Kommune, Hochschule oder einem statistischen Amt, und ein BITV-Test hat Ihre Diagramme bemängelt: fehlende Alternativtexte, Legenden nur über Farbe, zu wenig Kontrast.
• Sie sind eine Agentur oder Gestalterin bzw. Gestalter von Berichtslayouts, und die Ausschreibung verlangt BITV 2.0, EN 301 549 oder WCAG 2.2 AA.
• Ihr PDF fällt bei der PDF/UA-Prüfung an Abbildungen durch, und Sie wissen nicht, ob es am Diagramm, am Layout oder am Export liegt.
• Ihre Infografiken sind einzelne Bilder; die Kennzahlen lassen sich nicht markieren, übersetzen, durchsuchen oder vorlesen.

• Markieren Sie eine Zahl. Versuchen Sie, einen Wert oder eine Achsenbeschriftung mit der Maus zu markieren, auf der Webseite oder im PDF. Geht das nicht, existieren die Zahlen nur als Pixel.
• Drucken Sie in Schwarzweiß. Lassen sich zwei Reihen oder Balken nur über die Farbe unterscheiden, verfehlt das Diagramm WCAG 1.4.1 (Benutzung von Farbe).
• Ziehen Sie das Fenster auf Handybreite zusammen. Scrollt die Seite seitlich oder schrumpft die Diagrammschrift zu einem grauen Fleck, fehlt das Umfließen oder die Schrift ist schlicht nicht lesbar.
• Suchen Sie die Tabelle. Gibt es eine Datentabelle oder einen Download mit denselben Zahlen? Wenn nicht, hört ein Screenreader-Nutzer bestenfalls einen Satz.

Lesen Sie weiter für die technischen Details. Unten: was ein Diagramm barrierefrei macht, ein gemessenes Vorher-nachher-Beispiel mit echten Temperaturdaten der NASA (alle Dateien zum Download), was Chromium beim PDF-Druck mit Diagrammen macht, und die Rechtslage in Deutschland, Österreich und der EU. Wenn Sie abkürzen möchten, senden Sie mir einen Bericht, und ich sage Ihnen, was an seinen Diagrammen nicht stimmt.

Ein barrierefreies Diagramm gibt dieselbe Information auch Menschen, die es nicht sehen, seine Farben nicht unterscheiden oder es nicht vergrößern können: als Text, als Tabelle und als Bild, das nicht allein auf Farbe beruht.

Ein Diagramm ist eine komplexe Grafik. Der Alternativtext nennt Diagrammtyp und Kernaussage in einem Satz; die Langbeschreibung daneben nennt Verlauf, Extremwerte und wichtige Zahlen; die Datentabelle enthält alle Werte (W3C-WAI-Tutorial zu komplexen Bildern). 146 Datenpunkte passen in keinen Alternativtext, und niemand sollte sie in einem Atemzug anhören müssen.

Eine Legende „grün = Jahreswert, rot = 10-Jahres-Mittel“ schließt alle aus, die dieses Grün nicht von diesem Rot unterscheiden können. WCAG 1.4.1 verlangt ein zweites Merkmal: Beschriftungen direkt an Linie oder Balken, unterschiedliche Linienstärken, Punkte, Schraffur. Direktbeschriftungen ersparen auch Sehenden den Blick hin und her zur Legende.

Linien, Balken und alle zum Verständnis nötigen Diagrammteile brauchen mindestens 3:1 Kontrast zum Hintergrund (WCAG 1.4.11). Schrift im Diagramm ist Text und braucht 4,5:1 (WCAG 1.4.3). Typische Fehler sind Pastellfarben für Datenreihen und hellgraue Achsenbeschriftungen.

Bei 320 CSS-Pixeln Breite muss Inhalt ohne horizontales Scrollen nutzbar sein (WCAG 1.4.10). Ein als 960-Pixel-Bild exportiertes Diagramm erzwingt entweder seitliches Scrollen oder schrumpft, bis die Beschriftung unlesbar ist. Ein SVG-Diagramm lässt sich für schmale Bildschirme neu anordnen, mit Schrift in ihrer vorgesehenen Größe.

Dies ist ein gemessenes Beispiel mit echten, gemeinfreien Daten, kein Kundenauftrag. Ich habe eine bewusst typische „Vorher“-Berichtsseite mit drei Diagrammen gebaut, die Diagramme barrierefrei neu erstellt, beide Seiten als PDF gedruckt und alles mit denselben Skripten gemessen. Der Rahmen „Climate report 2025“ ist ein Beispiellayout, keine echte Veröffentlichung.

• Daten: NASA GISS Surface Temperature Analysis (GISTEMP v4), Global Land-Ocean Temperature Index, Jahresmittel der Temperaturabweichung in °C gegenüber dem Mittel 1951–1980. 146 Jahre, 1880–2025.
• Abgerufen: am 6. Oktober 2026 über das Datenpaket datasets/global-temp (annual.csv, Branch main, nur Zeilen mit Source = GISTEMP), SHA-256 c9f98d4d…628c296e20.
• Lizenz: GISTEMP ist ein Werk der US-Regierung und gemeinfrei; die Aufbereitung als Datenpaket steht unter CC BY 4.0. Abgeleitet: ein gleitendes 10-Jahres-Mittel (1889–2025) und 15 Jahrzehntmittel (die 2020er umfassen 2020–2025, also sechs Jahre).

Der „Vorher“-Zustand: matplotlib-PNG-Diagramme in einer HTML-Seite, mit Headless-Chromium bei eingeschaltetem Tagging als PDF gedruckt. Die Fehler liegen also am Inhalt, nicht an fehlendem Tagging. Ein Liniendiagramm in Hellgrün und Hellrot, nur über die Legende zugeordnet; ein Jahrzehnt-Balkendiagramm in Regenbogenfarben, die Jahrzehnte nur in der Legende; eine „Infografik“, deren Kennzahlen Teil eines Verlaufsbildes sind. Keine Alternativtexte, ein starres 960-Pixel-Layout, kein Seitentitel, keine Sprachangabe.

Beide Diagramme wurden als von Hand gebautes SVG in drei Breitenvarianten (260, 600 und 880 px) neu gezeichnet, ausgewählt über CSS-Container-Queries, sodass die Diagrammschrift nie unter ihre vorgesehene Größe skaliert wird. Das Liniendiagramm hat role="img", einen Titel als kurzen Alternativtext und eine Beschreibung; die Jahreswerte sind eine dünne orange Linie mit Punkten, das 10-Jahres-Mittel eine kräftige marineblaue Linie. Beide Linien sind am Ende mit ihrem Wert beschriftet; das wärmste Jahr (2024, +1,29 °C) und das kälteste (1909, −0,49 °C) sind markiert.

Das Balkendiagramm wurde waagerecht, jeder Balken trägt Jahrzehnt und Wert; Balken unter dem Mittel sind marineblau schraffiert, Balken darüber flächig orange. Auf der Webseite lässt es sich per Tastatur erkunden: ein Tab-Stopp, Pfeiltasten, Pos1 und Ende, dazu eine sichtbare Wertanzeige. Jedes Diagramm hat eine sichtbare Langbeschreibung, deren Zahlen aus den Daten erzeugt wurden, und eine aufklappbare Datentabelle (146 und 15 Zeilen) mit Beschriftung und Kopfzellen. Die Infografik wurde zu drei Kennzahlkarten aus echtem HTML-Text.

Das „Nachher“-PDF besteht das PDF/UA-1-Profil von veraPDF mit 0 fehlgeschlagenen Prüfungen; das „Vorher“-PDF scheitert an 9. Chromium hat beide mit eingeschaltetem Tagging geschrieben; in die „Nachher“-Datei habe ich zusätzlich die von PDF/UA verlangten Metadaten eingetragen und ungetaggte Dekoration als Artefakt markiert. Das hat 0 Byte der gerenderten Pixel verändert.

Die 9 Fehler vorher: drei Abbildungen ohne Alternativtext (7.3-1), zwei ungetaggte Inhaltsteile (7.1-3), keine PDF/UA-Kennung (5-1), kein Dokumenttitel in den Metadaten (7.1-9) und ein Link ohne Beschreibung (7.18.1-2, 7.18.5-2). Der Nu Html Checker fand in der „Nachher“-Seite keine HTML- oder ARIA-Fehler; seine 4 CSS-Fehler entstehen nur, weil er Container-Queries nicht kennt.

Ein Diagramm, das auf der Webseite funktioniert, kann auf dem Weg ins PDF seinen Alternativtext oder sein ganzes Tag verlieren. Was ich in diesem Durchlauf mit Chromium 141 beobachtet habe:

Für dieses Beispiel habe ich keine Screenreader-Tests (NVDA, JAWS, VoiceOver oder TalkBack) durchgeführt. Gitterlinien sind mit 1,25:1 bewusst dekorativ; die Werte tragen Beschriftungen und Tabellen.

Die Beispielseiten, PDFs und Berichte sind englischsprachig.

Sie erhalten Diagramme, die ihre Information als Text, als Tabelle und als Bild ohne Farbabhängigkeit tragen, und die Messwerte, die das belegen.

• Für jedes Diagramm: kurzer Alternativtext, Langbeschreibung und Datentabelle, die Zahlen mit Ihren Daten abgeglichen.
• Je nachdem, wo der Bericht entsteht: barrierefreie SVG-Diagramme fürs Web oder korrigierte Abbildungen und Tabellen in Ihrer Layoutdatei.
• Wenn Sie ein PDF veröffentlichen: ein getaggtes PDF mit PDF/UA-1-Ergebnis und dem Grund für verbleibende Fehler.
• Eine Farbnotiz: welche Ihrer Diagrammfarben 3:1 erreichen, welche Paare in der Farbfehlsichtigkeits-Simulation zusammenfallen, und die kleinste Änderung, die ich vorschlage.
• Einen Befundbericht, auch zu dem, was die Prüfungen nicht erkennen.

Sie senden zuerst einen echten Bericht oder Diagrammsatz; der Preis steht fest, bevor die Arbeit beginnt.

1. Senden Sie eine Datei, am besten mit den Daten hinter den Diagrammen (Excel oder CSV). Ich sage Ihnen, was nicht stimmt, auch was sich nicht zu beheben lohnt.
2. Sie erhalten Umfang und Festpreis für diesen Bericht oder den ganzen Bestand.
3. Ich erledige die Arbeit. Sie erhalten eine als Vorschau gekennzeichnete Fassung mit den Messwerten, den Beschreibungen zur Durchsicht und etwaigen Farbvorschlägen.
4. Ihre Freigabe gibt die endgültigen Dateien frei, samt PDF und Befundbericht.

Ich kalkuliere jeden Auftrag, nachdem ich das Material gesehen habe. Die Zahl der Diagramme allein bestimmt den Aufwand nicht: Zwanzig Balkendiagramme aus einer Vorlage können schneller gehen als eine dichte Infografik oder eine Karte. Sie erhalten vor Beginn einen Festpreis für den Bestand, ohne Stundenzähler. Stammen die Diagramme aus einer Vorlage oder einem Stylesheet, ist es meist günstiger, zuerst diese zu korrigieren; das sage ich Ihnen dann.

Öffentliche Stellen müssen ihre Inhalte barrierefrei veröffentlichen, seit dem 28. Juni 2025 gelten BFSG und BaFG für viele Angebote an Verbraucher, und Berichte enthalten mehr Diagramme denn je. Was das für Ihre Organisation bedeutet, ist eine Rechtsfrage; diese Seite behandelt die technische Seite.

• Öffentliche Stellen: Die Richtlinie (EU) 2016/2102 gilt für Websites und Apps öffentlicher Stellen; für Stellen des Bundes setzt die BITV 2.0 sie um. Diagramme auf Statistikseiten und in veröffentlichten Berichten gehören zu diesen Inhalten.
• Die Norm: EN 301 549 V3.2.1, als harmonisierte Norm zitiert im Durchführungsbeschluss (EU) 2021/1339, wendet die Erfolgskriterien der WCAG 2.1 auf Web-Inhalte (Kapitel 9) und Dokumente (Kapitel 10) an. Ich arbeite nach WCAG 2.2 AA und berichte gegen beide, wenn eine Ausschreibung das verlangt.
• Privatwirtschaft: Der European Accessibility Act, Richtlinie (EU) 2019/882, gilt seit dem 28. Juni 2025 für die dort genannten Produkte und Dienstleistungen, in Deutschland umgesetzt durch das Barrierefreiheitsstärkungsgesetz (BFSG), in Österreich durch das Barrierefreiheitsgesetz (BaFG).
• Nachhaltigkeitsberichte: Die CSRD, Richtlinie (EU) 2022/2464, holt Nachhaltigkeitsinformationen in den Lagebericht; die Richtlinie (EU) 2025/794 hat die Termine für spätere Unternehmenswellen verschoben. Die CSRD regelt, was berichtet wird, nicht die Barrierefreiheit der Diagramme; ob Barrierefreiheitsrecht für Ihren veröffentlichten Bericht gilt, ist eine eigene Frage.

Rechtlicher Hinweis: Diese Seite behandelt die technische Seite. Ob BITV 2.0, BFSG oder BaFG für Sie gelten, klären Sie bitte mit Ihrer Rechtsberatung.

Nicht bei einem Diagramm mit mehr als einer Handvoll Werten. Der Alternativtext nennt Typ und Kernaussage in einem Satz; die Details tragen Langbeschreibung und Datentabelle. Im Beispiel hat das Liniendiagramm 146 Werte, und alle 146 stehen in einer Tabelle.

Nur mit Ihrer Zustimmung. Ich messe jede Reihenfarbe gegen den Hintergrund und gegen die anderen Reihen, simuliere Farbfehlsichtigkeit und schlage die kleinste Änderung vor, die besteht. Oft erlaubt ein zweites Merkmal wie Schraffur oder Direktbeschriftung, den Großteil einer Palette zu behalten.

Das Beispiel deckt Diagrammbibliotheken und BI-Werkzeuge nicht ab, und jedes hat eigene Barrierefreiheitseinstellungen. Ich bearbeite exportierte und statische Diagramme sowie von Hand gebautes SVG; bibliotheksspezifische Arbeit kalkuliere ich im Einzelfall, nachdem ich Ihr Setup gesehen habe.

Das hängt vom Programm ab, das das PDF schreibt, und ich sage es Ihnen je Datei. Im Beispiel bestand das mit Chromium gedruckte PDF nach den oben beschriebenen Korrekturen das PDF/UA-1-Profil von veraPDF mit 0 fehlgeschlagenen Prüfungen. Maschinelle Prüfungen decken nur einen Teil von PDF/UA ab; Lesereihenfolge und Qualität der Alternativtexte brauchen menschliche Prüfung.

Den Bericht oder die Seite und nach Möglichkeit die Daten hinter jedem Diagramm als Excel oder CSV. Ohne Daten entnehme ich die Werte dem Diagramm, und Sie bestätigen sie vor der Veröffentlichung.

Nein, und ich behaupte nichts anderes. Meine Befunde stammen aus den Dateien, den Normen und den Prüfprogrammen. Tests durch Menschen, die assistive Technologien nutzen, sollten Sie gesondert beauftragen.

• Barrierefreie PDF (PDF/UA)
• Alternativtexte und Bildbeschreibung
• Barrierefreie Farbpalette
• Barrierefreie Word- und PowerPoint-Dokumente
• Barrierefreies Excel
• Barrierefreies EPUB
• Barrierefreie Mathematik mit MathML
• VPAT und Konformitätsbericht zur Barrierefreiheit

Eine Datei: der Bericht, die Statistikseite oder die Infografik, die Ihnen die meisten Sorgen macht, gern mit den Daten. Sie erhalten eine klare Auskunft, was an den Diagrammen nicht stimmt, auch was sich nicht zu beheben lohnt.

Ali Karabüyük · Tekirdağ, Türkei · Zusammenarbeit aus der Ferne, weltweit · Dokumenten- und Bildproduktion seit 2004, hauptberuflich seit 2008.