🧾 SOP 21: Infografiken und Diagramme für alle verständlich machen

So übersetzt du komplexe visuelle Informationen in zugängliche Inhalte
📄 SOP als PDF downloaden ⚡ Quick Card downloaden 📚 Zum Inhaltsverzeichnis

Wer sollte diese SOP lesen?

📊 Projektleitung | 👔 Geschäftsführung | 🖥️ IT | 🧑‍⚖️ Recht 🧾

Überblick zu SOP 21

📌 Was du hier machstDu entwickelst einen verbindlichen Prozess, um komplexe visuelle Inhalte (z. B. Diagramme, Infografiken) so aufzubereiten, dass sie für alle Nutzer:innen – auch ohne Sehsinn – verständlich sind.
🧠 VoraussetzungDu veröffentlichst Inhalte mit informativen Grafiken, z. B. Zahlen, Abläufe oder Strukturen.
⏱️ DauerInitial 30–90 Minuten pro Grafik. Wenn es im Workflow etabliert ist, deutlich weniger. 🧷 Pflicht? Ja – sowohl aus rechtlicher Sicht als auch für echte Teilhabe.
🧷 Gesetzlich verpflichtend?✅  Ja – sowohl aus rechtlicher Sicht als auch für echte Teilhabe.
📍 Nächster Schritt→ SOP 22: Social Media-Kanäle barrierefrei bespielen

Am Ende hast du einen klaren Prozess, um für alle komplexen Grafiken eine umfassende textliche Alternative bereitzustellen. Damit stellst du sicher, dass die Kernaussagen und Daten, die visuell vermittelt werden, auch für Menschen zugänglich sind, die die Grafik nicht sehen können.

Du legst deine Farbpalette in demselben Ordner wie alle deine Dokumentationen und Richtlinien zur Barrierefreiheit ab, deinem Barrierefreiheitsordner.

  • ⏱ Initialaufwand: 30–90 Minuten pro Grafik, um eine qualitativ hochwertige Langbeschreibung zu verfassen.
  • ♻️ Pflegeaufwand: Minimaler Mehraufwand im Designprozess, wenn Barrierefreiheit von Anfang an mitgedacht wird.
  • DU (Projektleitung, EAA-Verantwortliche:r): setzt die Richtlinie durch, dass keine Infografik ohne Textalternative veröffentlicht wird.
  • UX / Design: gestaltet die Grafik nach den Prinzipien der Barrierefreiheit (Kontraste, Schriftgrößen, keine reine Farbinformation).
  • Content / Marketing: ist verantwortlich für das Verfassen der detaillierten Langbeschreibung, da hier das inhaltliche Verständnis entscheidend ist.
  • Entwicklung / IT: implementiert die Langbeschreibung technisch korrekt auf der Webseite.

🕓 Wann musst du das machen?

  • Immer, wenn du eine komplexe, informative Grafik veröffentlichst.
  • Konkret bei: Prozess-Flussdiagrammen, Organigrammen, Balken-, Linien- oder Tortendiagrammen, die Daten visualisieren, und bei detaillierten Infografiken.

⚖️ Welches Gesetz verlangt das?

  • WCAG 2.1 , das Kernkriterium ist hier: 1.1.1 Non-text Content: Dieses Kriterium fordert explizit, dass für komplexe Grafiken eine vollständige Textalternative bereitgestellt wird, die die Information der Grafik äquivalent wiedergibt. 🧭 Der Prozess im Detail

🧭 Der Prozess im Detail

0 von 4 Schritten erledigt0 %
🟥 Schritt 1: Gestalte das Design VON ANFANG AN barrierefrei

Die Zugänglichkeit eginnt schon beim Aussehen deiner Grafiken, Bilder und Texte.

Das bedeutet:

• Sorge für starke Kontraste: Texte und wichtige grafische Elemente (wie z. B. die Balken eines Diagramms) müssen sich klar vom Hintergrund abheben. Achte auf einen Kontrast von mindestens 3:1. Wenn jemand schlecht sieht oder farbenblind ist, können Farben allein nicht die Lösung sein . Stell dir vor, du hast Produkte in verschiedenen Farben – füge zusätzlich Muster oder Symbole hinzu, damit jeder sie unterscheiden kann .

• Wähle lesbare Schriftarten: Benutze klare Schriften, die du auch in ausreichend großer Größe gut lesen kannst.

• Nutze Farben nicht als einziges Merkmal: Verlasse dich nicht nur auf Farben, um Informationen zu vermitteln. Wenn du zum Beispiel Produkte nach Farbe sortierst, füge immer auch Symbole, Muster oder Text hinzu. Stell dir vor, jemand ist farbenblind: Eine Legende, die nur Farben zeigt, bringt ihm nichts . Bedenke, dass etwa 8 % der Männer und 0,5 % der Frauen eine Farbsehschwäche haben .

• Beschrifte Elemente direkt: Platziere Beschriftungen oder Werte (z. B. Preise oder Größen) direkt auf deinen Grafiken oder Produktbildern, statt sie nur in einer separaten Legende oder im Text daneben zu verstecken. So sind sie sofort sichtbar .

Nachdem dein Shop gut aussieht und die grundlegenden Barrieren schon im Design fallen, kümmern wir uns darum, dass Suchmaschinen und Screenreader wissen, was auf deinen Bildern zu sehen ist.

🟧 Schritt 2: Nutze Alt-Tags – als %22Ankündigung%22 deiner Langbeschreibung

Der alt-Text für eine komplexe Grafik soll nicht die gesamte Grafik beschreiben. Seine Aufgabe ist es, die Grafik kurz zu identifizieren und anzukündigen, dass eine ausführliche Beschreibung folgt (die schreiben wir übrigens im nächsten Schritt).

•   Sei prägnant und informativ: Stell dir vor, du beschreibst das Bild jemandem am Telefon – kurz und auf den Punkt.

•

Gutes Beispiel: alt="Balkendiagramm, das die Umsatzsteigerung von 2023 bis 2025 zeigt. Detaillierte Daten findest du weiter unten."

Schlechtes Beispiel: alt="Diagramm" (zu vage) oder der Versuch, alle Daten ins Alt-Attribut zu quetschen (zu lang und unstrukturiert) .

•

Wichtiger Spezialfall: Bild als Link (funktionales Bild): Wenn dein Bild gleichzeitig ein Link ist (z. B. dein Logo, das zur Startseite führt), beschreibt der Alt-Text nicht das Bild selbst, sondern das Ziel des Links . Also nicht alt="Firmenlogo" , sondern alt="Zur Startseite" oder alt="Homepage" . Das ist super wichtig für Screenreader, damit klar ist, wohin der Klick führt .

• Wenn das Türschild hängt und deine Bilder sprechend werden, geht es ins Detail: Wir machen die eigentlichen Inhalte deiner Grafiken für jeden zugänglich

🟨Schritt 3: Schreibe jetzt deine Langbeschreibung

Hier wird die eigentliche Information der Grafik für alle zugänglich gemacht. Es gibt zwei gute Methoden, sie bereitzustellen:

  • Methode 1 (bevorzugt): Text auf derselben Seite Schreibe die vollständige Beschreibung als normalen HTML-Text direkt unter die Grafik. Dies ist die beste Lösung für Nutzer:innen und für die Suchmaschinenoptimierung (SEO). Um Platz zu sparen, kannst du den Text in einem barrierefreien Akkordeon (siehe SOP 26) „verstecken“.
  • Methode 2: Link zu einer separaten Beschreibungsseite Platziere einen Link direkt neben der Grafik, der zu einer neuen Seite führt, auf der sich die ausführliche Beschreibung befindet.

Was gehört in eine gute Langbeschreibung?

  • Titel: Wiederhole den Titel oder die Überschrift der Grafik.
  • Kernaussage: Beginne mit 1-2 Sätzen, die die wichtigste Schlussfolgerung der Grafik zusammenfassen (z. B. „Das Diagramm zeigt ein stetiges Umsatzwachstum über die letzten drei Jahre, mit dem stärksten Anstieg im Jahr 2025.“).
  • Daten präsentieren: Gib die Daten strukturiert wieder. Für Diagramme eignet sich hier oft eine einfache, barrierefreie HTML-Tabelle (siehe SOP 12) am besten. Für Flussdiagramme oder Organigramme kannst du verschachtelte Listen verwenden, um die Hierarchie abzubilden

Wenn die Langbeschreibung steht und alle Inhalte erfasst sind, können wir bei Bedarf noch einen Schritt weiter gehen, um die Verbindung für Screenreader zu optimieren und so die technische Barrierefreiheit zu perfektionieren.

🟩 Schritt 4: Sorge dafür, dass das Bild mit der Beschreibung noch klarer verbunden ist

Um die Verbindung zwischen Bild und Beschreibung für Screenreader noch deutlicher zu machen, verwendest du das Attribut aria-describedby .

Was das ist: ARIA (Accessible Rich Internet Applications) sind zusätzliche Anweisungen im HTML-Code, die Screenreadern helfen, Inhalte besser zu verstehen. aria-describedby ist wie ein Pfeil, der vom Bild direkt zu deiner langen Beschreibung zeigt.

Wie das geht:

• Im HTML-Code deines Bildes ( -Tag) fügst du aria-describedby="deine-id-hier" ein.

HTML

< img src = "diagramm.png" alt = "Balkendiagramm..." aria-describedby = "beschreibung-id" >

 

• Deine lange Beschreibung (idealerweise direkt unter dem Bild) bekommt die passende id="beschreibung-id" .

HTML

< div id = "beschreibung-id" > < h4 > Langbeschreibung zum Balkendiagramm </ h4 > < p > Das Diagramm zeigt ... </ p > </ div >

 

Wo im CMS: Das machst du meistens im HTML-Editor deines Content-Management-Systems (CMS). Wenn du unsicher bist, frag deine Entwickler:innen oder such nach speziellen Barrierefreiheits-Plugins für dein CMS.

✅ Ergebnis

Am Ende dieser SOP hast du:

  • Sichergestellt, dass komplexe visuelle Informationen für alle Menschen zugänglich sind, auch für blinde Nutzer:innen. 
  • Die gesetzlichen Anforderungen an Nicht-Text-Inhalte zuverlässig erfüllt.
  • Den Wert deiner Inhalte erhöht, da die textlichen Beschreibungen auch von Suchmaschinen gelesen und indiziert werden können.
  • Eine klare Richtlinie für alle im Team, wie mit informativen Grafiken umzugehen ist.

💬 Copy-Paste-Baustein

Infos zur Barrierefreiheit von Bildern & Grafiken

Hier ist ein Vorschlag für einen Copy-Paste-Baustein, den du beispielsweise in euren Styleguide, eure Design-Guidelines oder in die Kommunikation mit Content-Erstellern und Entwicklern einfügen kannst:

Betreff: So machen wir unsere Bilder & Grafiken barrierefrei!

Hallo zusammen, du weißt ja, wie wichtig es ist, dass unsere Inhalte für alle zugänglich sind. Besonders bei Bildern und Grafiken gibt es oft versteckte Hürden, die wir mit ein paar einfachen Schritten aus dem Weg räumen können. Damit machen wir unseren Content nicht nur inklusiver, sondern auch besser für Suchmaschinen! Ich habe mal die wichtigsten Punkte für dich zusammengefasst, wie wir unsere visuellen Inhalte fit für alle machen:

  1. Das Design von Anfang an barrierefrei gestalten Hier geht es schon beim Erstellen los. Achte auf: Starke Kontraste: Texte und wichtige Elemente müssen sich klar vom Hintergrund abheben (mindestens 3:1 Kontrastverhältnis). Lesbare Schriftarten: Klare Schriften, die auch in ausreichend großer Größe gut lesbar sind. Farben sind nicht alles: Nutze Farben niemals als einziges Merkmal, um Informationen zu vermitteln. Ergänze sie immer durch Symbole, Muster oder Text. (Denk daran: ca. 8 % der Männer haben eine Farbsehschwäche!) Direkte Beschriftung: Platziere Beschriftungen oder Werte (z. B. Preise, Größen) direkt auf Grafiken oder Produktbildern.
  2. Alt-Texte nutzen – die „Ankündigung“ der Langbeschreibung Der Alt-Text ist super wichtig für Screenreader. Er soll die Grafik kurz identifizieren und ankündigen, dass eine ausführlichere Beschreibung folgt. Prägnant & informativ: Beschreibe das Bild kurz und auf den Punkt. Beispiel: alt=“Balkendiagramm, das die Umsatzsteigerung von 2023 bis 2025 zeigt. Detaillierte Daten findest du weiter unten.“ Achtung bei Links: Ist das Bild ein Link (z. B. unser Logo zur Startseite)? Dann beschreibt der Alt-Text das Ziel des Links! Beispiel: alt=“Zur Startseite“
  3. Die Langbeschreibung verfassen Hier kommt die eigentliche Information der Grafik ins Spiel. Wo platzieren? Am besten direkt unter der Grafik als normaler HTML-Text. Wenn der Platz begrenzt ist, geht auch ein barrierefreies Akkordeon. Alternativ: Ein Link zu einer separaten Beschreibungsseite. Was gehört rein? Ein Titel. Die Kernaussage in 1-2 Sätzen. Die Daten strukturiert wiedergegeben (z. B. als einfache HTML-Tabelle oder verschachtelte Liste).
  4. Bild & Beschreibung technisch verbinden (aria−describedby) Für Screenreader ist es optimal, Bild und Langbeschreibung technisch zu verknüpfen. Das passiert über das Attribut $aria-describedby$. Wie geht das? Im HTML-Code des Bildes fügst du $aria-describedby=“deine-id-hier“$ ein. Die Langbeschreibung selbst bekommt dann die passende $id=“deine-id-hier“$. Im CMS: Das machst du meist im HTML-Editor. Wenn du unsicher bist, frag deine Entwickler:innen! Ich weiß, das sind einige Punkte, aber jeder Schritt macht einen riesigen Unterschied! Lass uns gemeinsam daran arbeiten, unsere Inhalte für wirklich alle zugänglich zu machen. Wenn du Fragen hast oder Unterstützung bei der Umsetzung brauchst, melde dich jederzeit bei mir! Viele Grüße, [Dein Name] Fragen und Antworten (FAQ ) zu dieser SOP
Zu SOP 22 → 📚 Zurück zum Inhaltsverzeichnis

Fragen und Antworten (FAQ) zu dieser SOP

Wie gehe ich mit interaktiven Diagrammen oder Infografiken um, die z.B. Tooltips oder Filterfunktionen haben?

Interaktive Elemente sind eine besondere Herausforderung. Die Langbeschreibung (Schritt 3 der SOP) ist hier noch wichtiger, da sie die Kerninformationen statisch bereitstellt. Zusätzlich musst du sicherstellen, dass:

• Tastaturnavigation: Alle interaktiven Elemente (Buttons, Slider, Filter, Tooltips) müssen vollständig mit der Tastatur bedienbar sein. Der Fokus muss sichtbar sein.

• ARIA-Attribute für Interaktion: Nutze ARIA-Attribute wie aria-controls , aria-expanded oder aria-haspopup , um Screenreadern den Status und die Funktion interaktiver Komponenten zu vermitteln.

• Tooltips zugänglich: Informationen in Tooltips müssen auch bei Tastaturnavigation oder für Screenreader zugänglich sein (z.B. durch Fokus auf das Element, das den Tooltip auslöst, oder durch die Bereitstellung der Information im Alt-Text/der Langbeschreibung).

• Daten als Tabelle: Biete die zugrunde liegenden Rohdaten des interaktiven Diagramms immer auch in einer barrierefreien HTML-Tabelle (oder als CSV-Download) an.

Was mache ich, wenn mein Diagramm so komplex ist, dass die Langbeschreibung extrem lang wird? Gibt es Alternativen zum direkten Text auf der Seite?

Ja, bei sehr komplexen Infografiken oder Diagrammen kann eine extrem lange Langbeschreibung unübersichtlich werden. Hier sind Optionen:

• Akkordeon/Aufklapp-Element: Wie in der SOP erwähnt, kannst du den Text in einem barrierefreien Akkordeon verstecken. Das spart Platz, der Inhalt ist aber weiterhin direkt auf der Seite verfügbar und suchmaschinenrelevant.

• Link zu separater Seite: Bei sehr umfangreichen Beschreibungen kann ein Link zu einer separaten HTML-Seite sinnvoll sein, die ausschließlich die detaillierte Beschreibung enthält. Stelle sicher, dass der Link klar als „Detaillierte Beschreibung des Diagramms X“ beschriftet ist.

• Zusammenfassung + Details: Beginne die Langbeschreibung mit einer prägnanten Kernaussage und einer kurzen Zusammenfassung. Danach kannst du die Details in Abschnitte unterteilen, vielleicht sogar mit Ankern, damit Nutzer:innen direkt zu relevanten Daten springen können.

• Daten-Download: Biete immer die Möglichkeit, die zugrunde liegenden Daten als barrierefreie Tabelle oder als CSV/Excel-Datei herunterzuladen. Dies ist für viele Nutzer:innen die bevorzugte Methode, um komplexe Daten zu analysieren.

Wie kann ich sicherstellen, dass die Farbkontraste in meinen Diagrammen (z.B. bei Balken oder Linien) ausreichend sind, wenn ich viele Datenreihen habe?

Das ist eine der größten Herausforderungen bei Diagrammen! Die 3:1-Regel für Kontraste ist ein Minimum, aber bei vielen Farben wird es schwierig.

• Nicht nur Farbe: Das Wichtigste ist, Farben niemals als einziges Unterscheidungsmerkmal zu nutzen. Füge immer:

• Muster/Texturen: Unterschiedliche Schraffuren, Punkte oder Linienmuster.

• Symbole/Formen: Unterschiedliche Marker (Kreise, Quadrate, Dreiecke) für Datenpunkte.

• Direkte Beschriftung: Platziere Labels oder Werte direkt auf den Balken/Linien, anstatt nur eine Legende zu verwenden.

• Kontrast-Tools: Nutze Tools, die dir den Kontrast zwischen Vordergrund- und Hintergrundfarben messen (z.B. der WebAIM Contrast Checker). Achte darauf, dass jede Datenreihe einen ausreichenden Kontrast zum Hintergrund und auch zu benachbarten Datenreihen hat, wenn diese sich überlappen könnten.

• Farbpaletten für Farbsehschwäche: Es gibt speziell entwickelte Farbpaletten (z.B. ColorBrewer), die auch für Menschen mit verschiedenen Farbsehschwächen gut unterscheidbar sind.

•

Meine Infografik ist ein komplexes Flussdiagramm. Wie beschreibe ich das am besten in der Langbeschreibung?

Flussdiagramme erfordern eine logische, sequentielle Beschreibung.

• Strukturierte Listen: Nutze verschachtelte HTML-Listen (

    ,
      ,
    1. ), um die Hierarchie und den Fluss der Schritte abzubilden.

      • Beginne mit dem Startpunkt.

      • Beschreibe jeden Schritt und die möglichen Verzweigungen.

      • Nutze Einrückungen in der Liste, um Hierarchien oder Unterprozesse darzustellen.

      • Klarer Sprachgebrauch: Verwende präzise Verben und Formulierungen, die den Prozess oder die Entscheidungswege klar beschreiben (z.B. „Wenn Bedingung X erfüllt ist, gehe zu Schritt Y; andernfalls zu Schritt Z“).

      • Ankerpunkte: Bei sehr großen Flussdiagrammen können Ankerpunkte innerhalb der Langbeschreibung helfen, schnell zu bestimmten Abschnitten zu springen.

Was ist mit animierten Infografiken oder Diagrammen? Wie mache ich die zugänglich?

Animierte Inhalte sind eine Herausforderung, da sie oft schnell Informationen vermitteln, die für manche Nutzer:innen nicht erfassbar sind.

• Pausieren/Stoppen: Biete immer Steuerelemente zum Pausieren, Stoppen und Wiedergeben der Animation an.

• Transkript/Statische Version: Die wichtigste Regel: Alle Informationen, die in der Animation vermittelt werden, müssen auch in einer statischen (nicht-animierten) Version oder als vollständiges Text-Transkript verfügbar sein. Dies ist die Langbeschreibung der Animation.

• Vermeide flackernde Inhalte: Inhalte, die schnell flackern oder blinken, können Anfälle auslösen und müssen vermieden oder mit Warnungen versehen werden.

• Alternative Formate: Überlege, ob die Kernbotschaft der Animation auch als statisches Bild mit Langbeschreibung oder als einfacher Text vermittelt werden kann. Oft ist die Animation nur eine „nette“ Ergänzung, aber nicht essenziell für die Informationsvermittlung.