Diagramme erstellen, die für alle funktionieren

Das Diagramm-Problem

Diagramme und Grafiken sind von Natur aus visuelle Objekte. Sie kodieren Informationen über Form, Position und Farbe — drei Kanäle, die für einen erheblichen Teil Ihres Publikums entweder bedeutungslos oder verzerrt sind.

Rund 8 % der Männer haben eine Form von Farbfehlsichtigkeit. Screenreader-Nutzer erhalten aus einem SVG-Balkendiagramm keinerlei sinnvolle Information, sofern der Entwickler sie nicht ausdrücklich bereitgestellt hat. Und Tastaturnutzer finden interaktive Diagramme häufig völlig unerreichbar.

Das Ergebnis: Die Datenvisualisierung ist vermutlich der Bereich des Webdesigns, in dem die Kluft zwischen dem, was sehende Nutzer erleben, und dem, was alle anderen erleben, am größten ist. Und es ist eine Kluft, die Organisationen selten bemerken, weil sich Barrierefreiheits-Audits zunächst auf Formulare und Navigation konzentrieren, bevor sie zu den Diagrammen auf der Berichtsseite kommen.

Dieser Leitfaden erklärt, was barrierefreie Datenvisualisierung tatsächlich erfordert — keine Checkliste, sondern ein Verständnis dafür, warum Diagramme scheitern und was dagegen zu tun ist.

Warum Diagramme besonders schwierig sind

Die meisten HTML-Elemente haben eine native Rolle, einen Namen und einen Zustand, die assistive Technologien verstehen. Ein <button> ist eine Schaltfläche. Eine <table> ist eine Tabelle mit Zeilen und Spalten. Ein Formularfeld hat eine Beschriftung.

Ein als SVG oder Canvas gerendertes Diagramm hat nichts davon. Es ist eine Zeichnung. Screenreader sehen ein Bild (wenn Sie Glück haben) oder gar nichts. Der Entwickler muss die semantische Ebene von Grund auf neu aufbauen.

Gleichzeitig sind Diagramme oft der wichtigste Inhalt einer Seite. Ein Balkendiagramm mit dem Monatsumsatz, ein Liniendiagramm zum Nutzerwachstum, ein Kreisdiagramm zur Kategorieverteilung — häufig sind genau sie der Grund, warum der Nutzer auf der Seite ist. Sie einem erheblichen Teil der Besucher vorzuenthalten, ist ein ernstes Problem, keine kleine Unannehmlichkeit.

Das Farbproblem: Verlassen Sie sich nie auf Farbe allein

Der häufigste Barrierefreiheitsfehler bei Diagrammen ist, Farbe als einziges Unterscheidungsmerkmal für Datenreihen oder Kategorien zu verwenden.

Ein Liniendiagramm mit vier Linien, die sich nur durch Farbe unterscheiden — Rot, Blau, Grün, Orange —, ist für viele Nutzer mit Farbfehlsichtigkeit unlesbar und für alle, die einen Hochkontrastmodus oder eine Graustufenanzeige verwenden, völlig bedeutungslos.

Die Lösung ist redundante Kodierung: Verwenden Sie Farbe plus mindestens eine weitere visuelle Eigenschaft.

• Liniendiagramme: Verwenden Sie zusätzlich zu den Farben unterschiedliche Strichmuster (durchgezogen, gestrichelt, gepunktet, Strich-Punkt)
• Balkendiagramme: Verwenden Sie zusätzlich zu den Farben Texturen oder Muster, oder fügen Sie Datenbeschriftungen direkt auf den Balken hinzu
• Streudiagramme: Verwenden Sie zusätzlich zu den Farben unterschiedliche Markerformen (Kreis, Quadrat, Dreieck, Raute)
• Kreisdiagramme: Fügen Sie Textbeschriftungen innerhalb oder neben jedem Segment hinzu — verlassen Sie sich nie allein auf eine Legende

Dies fällt unter WCAG 2.2 1.4.1 Benutzung von Farbe (Stufe A): Farbe darf nicht das einzige Mittel zur Vermittlung von Informationen sein.

Kontrast bei Diagrammen

Visuelle Nicht-Text-Elemente wie Diagrammbalken, Linienzüge und Datenpunkte müssen nach 1.4.11 Nicht-Text-Kontrast (Stufe AA) einen Kontrast von 3:1 gegenüber ihrem Hintergrund erreichen. Testen Sie Ihre Diagrammpalette mit einem Kontrast-Checker — viele Markenpaletten, die auf großen Flächen gut aussehen, scheitern an dieser Anforderung bei kleineren Größen.

Text innerhalb von Diagrammen — Achsenbeschriftungen, Datenbeschriftungen, Legenden — muss dieselben Kontrastanforderungen erfüllen wie Fließtext: 4,5:1 für normalen Text, 3:1 für großen Text nach 1.4.3 Kontrast (Minimum).

Textalternativen bereitstellen

Jedes Diagramm braucht eine Textalternative, die die dargestellten Daten vermittelt. Welche Form diese genau annimmt, hängt davon ab, wie komplex die Daten sind.

Einfache Diagramme: beschreibender Alternativtext

Bei einem Balkendiagramm mit fünf Werten kann ein gut geschriebenes alt-Attribut die zentrale Erkenntnis zusammenfassen:

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

Der Alternativtext leistet hier zwei Dinge: Er nennt die Datenpunkte und fasst die zentrale Erkenntnis zusammen. Beschreiben Sie das Diagramm nicht nur visuell (“ein Balkendiagramm, das den Umsatz zeigt”). Beschreiben Sie, was das Diagramm vermittelt.

Komplexe Diagramme: ergänzende Datentabellen

Wenn ein Diagramm mehr Daten enthält, als in ein alt-Attribut passen, stellen Sie in der Nähe eine barrierefreie Datentabelle bereit. Das hilft auch Menschen, die tabellarische Daten visuellen Formaten vorziehen. Die Tabelle kann standardmäßig ausgeblendet, aber erreichbar sein:

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

SVG-spezifische Muster

Inline gerenderte SVG-Diagramme (statt Bilddateien) lassen sich mit ARIA direkt barrierefrei machen. Zentrale Muster:

• Fügen Sie role="img" zum <svg>-Element hinzu
• Stellen Sie ein <title> als erstes Kind von <svg> bereit und verknüpfen Sie es mit aria-labelledby
• Fügen Sie ein <desc> für längere Beschreibungen hinzu und verknüpfen Sie es mit aria-describedby
• Markieren Sie dekorative Elemente (Gitterlinien, Achsenmarkierungen) mit aria-hidden="true", um Rauschen zu reduzieren

Bei interaktiven Diagrammen, in denen Nutzer Datenpunkte auswählen können, braucht jedes interaktive Element eine korrekte Rolle, einen Namen und Tastaturunterstützung.

Tastaturnavigation für interaktive Diagramme

Wenn Ihre Diagramme interaktiv sind — Hover-Tooltips, klickbare Segmente, Auswählen und Zoomen —, müssen sie nach 2.1.1 Tastatur (Stufe A) vollständig per Tastatur bedienbar sein.

Für Diagramme mit vielen Datenpunkten implementieren Sie ein Roving-tabindex-Muster: Nur ein Element im Diagramm befindet sich jeweils in der Tab-Reihenfolge, und die Pfeiltasten bewegen den Fokus zwischen den Datenpunkten innerhalb des Diagramms.

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Tooltips, die nur beim Hover erscheinen, müssen auch bei Tastaturfokus erscheinen. Ein Tooltip, der nur für Mausnutzer sichtbar ist, ist ein Barrierefreiheitsfehler.

Den richtigen Diagrammtyp wählen

Manche Diagrammtypen sind von Natur aus barrierefreier als andere. Wenn Sie die Wahl haben:

Diagrammtyp	Barrierefreiheit	Anmerkungen
Balkendiagramm	Hoch	Mengen lassen sich leicht mit Beschriftungen kodieren; gute Tastaturunterstützung möglich
Liniendiagramm	Hoch	Unterschiedliche Strichmuster verwenden; wichtige Punkte annotieren
Tabelle	Am höchsten	Am einfachsten barrierefrei zu machen; für Daten oft die richtige Wahl
Streudiagramm	Mittel	Erfordert sorgfältige Marker-Unterscheidung; Tastaturnavigation komplex
Heatmap	Niedrig	Von Natur aus farbabhängig; immer eine Tabellenalternative bereitstellen
Kreis-/Donut-Diagramm	Niedrig	Werte schwer zu vergleichen; bei mehr als 3–4 Segmenten vermeiden

Im Zweifel ist eine gut formatierte Tabelle fast immer barrierefreier als ein Diagramm — und oft unabhängig von einer Behinderung leichter zu lesen. Verwenden Sie ein Diagramm nicht, weil es modern aussieht; verwenden Sie es, wenn es Nutzern wirklich hilft, einen Trend oder Vergleich schneller zu erfassen, als es tabellarische Daten könnten.

Ihre Diagramme testen

Automatisierte Barrierefreiheits-Scanner können fehlende alt-Attribute und einige ARIA-Muster prüfen, aber sie können nicht verifizieren, ob die Diagrammdaten aussagekräftig sind, ob die Tastaturnavigation korrekt funktioniert oder ob das Diagramm für einen Screenreader-Nutzer Sinn ergibt. Testen Sie mit:

1. Einem Screenreader (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): Navigieren Sie zum Diagramm und prüfen Sie, was angesagt wird
2. Nur Tastatur: Tabben Sie zum Diagramm und bestätigen Sie, dass alle interaktiven Elemente per Tastatur erreichbar und bedienbar sind
3. Farbenblindheits-Simulation: Verwenden Sie die Chrome DevTools (Rendering > Emulate vision deficiency), um zu sehen, wie das Diagramm bei verschiedenen Arten von Farbfehlsichtigkeit erscheint
4. Zoom auf 200 %: Prüfen Sie, dass Beschriftungen und Legenden sich nicht überlappen oder abgeschnitten werden

Unser Service zur Screenreader-Evaluation testet Diagramme mit echten Nutzern assistiver Technologien — der schnellste Weg herauszufinden, was Ihre Nutzer tatsächlich erleben.