Barrierefreie Infografiken
Informationen für alle zugänglich machen
Infografiken sind ein beliebtes Mittel, um komplexe Informationen schnell und visuell ansprechend darzustellen. Sie fassen Daten kompakt zusammen, machen Zusammenhänge sichtbar und können Sachverhalte deutlich leichter verständlich machen als reiner Text.
Was ist aber, wenn eine Person die Infografik nicht sehen oder nicht vollständig erfassen kann? Genau hier setzt das Thema barrierefreie Infografiken an. Unser Artikel zeigt, was das bedeutet, wie man barrierefreie Infografiken praktisch umsetzt und welche Anforderungen durch die Web Content Accessibility Guidelines (WCAG) bestehen.
Was sind barrierefreie Infografiken?
Barrierefreie Infografiken sind grafische Darstellungen von Informationen, die so aufbereitet sind, dass sie unabhängig von individuellen Einschränkungen für alle Menschen zugänglich bleiben. Dazu gehören Eigenschaften wie deutlich erkennbare Kontraste, gut lesbare Farben, eine einfache Sprache, textliche Alternativen sowie eine logisch aufgebaute Struktur.
Wer sind die Zielgruppen?
| Folgende Zielgruppen profitieren von barrierefreien Infografiken | |
|---|---|
| Menschen mit Sehbehinderungen, die Screenreader verwenden | |
| Personen mit Farbfehlsichtigkeit, die Farben nicht unterscheiden können | |
| Menschen mit kognitiven Einschränkungen, die von klar strukturierten Inhalten profitieren | |
| Personen mit Leseschwäche, die einfache Textstrukturen bevozugen | |
| Nicht-Muttersprachlerinnen und -sprachler, die Verständnisschwierigkeiten haben könnten | |
| Alle Personen, die komplexe Informationen nicht leicht verarbeiten können |
Eigenschaften der barrierefreien Infografik
Eine barrierefreie Infografik hat bestimmte Eigenschaften, die sicherstellen, dass ihre Inhalte für alle Menschen verständlich und zugänglich sind.
Hier die wichtigsten:
- Hoher Farb- und Helligkeitskontrast → Inhalte bleiben auch bei Sehbehinderungen erkennbar
- Keine reine Farb-Codierung → Informationen werden nicht ausschließlich über Farben vermittelt; zusätzliche Symbole, Muster oder Beschriftungen kommen zum Einsatz
- Einfache, klare Gestaltung → Reduktion auf das Wesentliche, verständliche Sprache, übersichtlicher Aufbau
- Lesbare Schriftarten und Größen → gut skalierbar, auch bei Zoom oder kleiner Anzeige noch erkennbar
- Strukturierte Darstellung → logischer Aufbau, eindeutige Zuordnung von Texten und grafischen Elementen
- Responsiv & skalierbar → funktioniert auf unterschiedlichen Geräten und Bildschirmgrößen
- Technisch zugänglich → mit Screenreader nutzbar, Alt-Attribute, ARIA-Beschreibungen und semantisches HTML sind vorhanden
- Textalternative vorhanden → Jedes Element mit inhaltlicher Bedeutung ist auch in Textform verfügbar
WCAG-Anforderungen für Infografiken
Die WCAG (Web Content Accessibility Guidelines) sind die internationale Grundlage für barrierefreie Webinhalte. Für Infografiken sind vor allem folgende Kriterien relevant:
1.1.1 Nicht-Text-Inhalte: Jede Grafik braucht ein Textäquivalent.
1.4.3 Kontrast (Minimum): Text und grafische Elemente müssen ausreichend Kontrast zum Hintergrund haben.
1.4.5 Bilder von Text: Texte sollten nicht ausschließlich in Grafiken eingebettet sein, sondern als echter Text verfügbar sein.
Diese Vorgaben sind nicht nur Best Practices, sondern in vielen Ländern auch rechtlich bindend, z.B. EU-Richtlinie über die Barrierefreiheit von Websites und mobilen Anwendungen öffentlicher Stellen, in Deutschland BITV 2.0.
Muss es immer eine textliche Alternative geben?
Ja – grundsätzlich fordert die WCAG ein Textäquivalent für nicht-textuelle Inhalte (Erfolgskriterium 1.1.1). Das bedeutet, dass jede Infografik durch eine Beschreibung ergänzt werden muss. Das Ziel ist nicht, die Grafik zu ersetzen, sondern die Information für alle nutzbar zu machen.
Dabei gilt:
- Kurze Infografiken: ein einzelnes Icon oder ein einfaches Diagramm benötigen meist nur einen aussagekräftigen Alternativtext.
- Komplexe Infografiken: mehrschichtige Diagramme oder Prozessdarstellungen sollten eine ausführliche Textalternative erhalten, die alle Informationen der Grafik abbildet.
Welche Optionen gibt es für die Umsetzung der Textalternative?
Es gibt mehrere Ansätze, wie man eine Textalternative integriert:
- Umschalter Text/Bild
Nutzende können per Umschalter selbst wählen, ob sie die Grafik oder eine Textversion sehen möchten.
Beispiel unter: sandstein.de/team (hier: Woher kommen die Sandsteine?) - Text unter/neben dem Bild
Ein Text direkt unter/neben der Infografik ist praktisch, da der (aufklappbare) Text auch für sehende Personen nützlich ist.
Beispiel unter: kommweiter.bayern.de (hier: Virtuelle Weiterbildung ist vielfältig.) - Kombination Text/Bild
Hybrid-Lösung: visuelle Darstellung mit begleitenden Textbausteinen, die wesentliche Inhalte zusammenfassen.
Beispiel unter: schau-rein-sachsen.de (hier: die Sachsenkarte) - Text in einem Modal
Die Beschreibung legt sich in einem Overlay über die Seite, kann scrollbar sein und komplexe Inhalte der Infografik erläutern.
(Beispiel folgt)
Die Wahl hängt schließlich von Art und Komplexität der Infografik ab.
Beispiel einer barrierefreien Infografik: Woher kommen die Sandsteine?
Nehmen wir ein Beispiel: Unsere Infografik "Woher kommen die Sandsteine" zeigt die Herkunft der SandsteinNM Mitarbeitenden. Über den Umschalter rechts oben lässt sich die Textalternative anzeigen. So wird die Information sowohl visuell als auch textlich klar vermittelt.
Die Infografik mit dem Titel "Woher kommen die Sandsteine?" zeigt eine Karte von Deutschland. Darauf ist die Anzahl der Mitarbeiterinnen und Mitarbeiter von SandsteinNM hinter den Orten vermerkt.
Aus Sachsen:
- Coswig: 1
- Dippoldiswalde: 1
- Dresden: 8
- Ebersbach-Neugersdorf: 1
- Gröditz: 1
- Radebeul: 1
- Reinhardsgrimma: 1
- Seidewinkel: 1
- Treuen: 1
- Wildenhain: 1
- Wülknitz: 1
- Zittau: 1
Aus anderen Bundesländern
- Berlin: 1
- Eilsleben, Sachsen-Anhalt: 1
- Elsterwerda, Brandenburg: 1
- Herzberg, Niedersachsen: 1
- Lauchhammer, Brandenburg: 1
- Ortrand, Brandenburg: 1
- Sanitz, Mecklenburg-Vorpommern: 1
- Schönwald, Baden-Württemberg: 1
- Stuttgart, Baden-Württemberg: 1
- Ueckermünde, Mecklenburg-Vorpommern: 1
Aus dem Ausland
- Wien, Österreich: 1
- Deir Ez Zor, Syrien: 1
Fazit
Barrierefreie Infografiken machen Informationen für alle Menschen zugänglich – unabhängig von individuellen Einschränkungen. Sie kombinieren gutes Design mit technischer Umsetzung und sind ein zentraler Bestandteil digitaler Barrierefreiheit.
Wer Infografiken erstellt, sollte daher immer auch an eine verständliche, textliche Alternative denken. So profitieren nicht nur Menschen mit Einschränkungen, sondern auch all jene, die Inhalte lieber lesen, drucken oder durchsuchen möchten.
Barrierefreiheit ist damit kein Hindernis, sondern ein echter Mehrwert für alle Menschen.
Mehr lesen!
Bleiben Sie auf dem Laufenden mit unserem Blog.
SandsteinNM als Partner für barrierefreie Websites
SandsteinNM unterstützt Unternehmen und öffentliche Institutionen bei der Umsetzung barrierefreier Websites. Von Texten in Leichter Sprache über Gebärdensprachvideos bis zur barrierefreien Navigation – unser erfahrenes Team entwickelt maßgeschneiderte Lösungen, um digitale Inhalte für alle zugänglich zu machen. Auf Wunsch führen wir auch Tests mit kognitiv eingeschränkten Nutzerinnen und Nutzern durch, um die Usability von Websites oder Wireframes zu testen und sie daraufhin anzupassen.
Unsere Referenzen
- Bayerisches Staatsministerium für Familie, Arbeit und Soziales - "bayern.barrierefrei" Sensibilisieren, Informieren und Animieren - und das barrierefrei
- Staatliche Kunstsammlungen Dresden - Online Shop Moderner barrierefreier Online-Shop
- Bayerisches Staatsministerium für Familie, Arbeit und Soziales - Rahmenvertrag Know-how in Konzeption und Programmierung
- Bayerisches Staatsministerium für Familie, Arbeit und Soziales - "Einfach finden" Gebündelte Infos in Leichter Sprache und Gebärdensprache
- Bayerisches Staatsministerium für Familie, Arbeit und Soziales Portal - "Partizipation" Möglichkeiten der Partizipation transparent machen
Auch interessant!
Überzeugen Sie sich von unseren Leistungen.
