Richtlinien für barrierefreie Infografiken

Warum Barrierefreiheit und WCAG in Kürze

Barrierefreie Infografiken vergrößern Ihre Reichweite, verbessern die Benutzererfahrung und helfen Ihnen dabei, über alle Kanäle hinweg konsistent zu kommunizieren. Für (halb-)staatliche Stellen ist dies verpflichtend, aber für jede Organisation bringt es Vorteile: weniger Fehlinterpretationen, bessere Auffindbarkeit und mehr Vertrauen.

Die WCAG-Richtlinien basieren auf vier Prinzipien: wahrnehmbar, bedienbar, verständlich und robust. Für Infografiken bedeutet dies unter anderem: ausreichender Farbkontrast, keine Informationen, die nur durch Farbe vermittelt werden, klare Typografie, Textalternativen für Bildschirmlesegeräte und eine technische Gestaltung, die auf allen Geräten und mit allen assistiven Technologien funktioniert. Streben Sie das Niveau AA der WCAG 2.2 an. Möchten Sie die Anforderungen an die Barrierefreiheit bereits zu Beginn sicherstellen? Dann lesen Sie die Informationen zur Erstellung einer Infografik.

Praktische Leitlinien für barrierefreie Infografiken

Farbe und Kontrast

Verwenden Sie Farbe bewusst und niemals als einzigen Informationsträger. Kombinieren Sie Farbe mit Mustern, Schraffuren, Markierungen oder Beschriftungen, damit Kategorien auch ohne Farbunterschiede erkennbar sind. Verwenden Sie mindestens Kontrastverhältnisse von 4,5:1 für normalen Text und 3:1 für großen Text. Überprüfen Sie auch den Kontrast zwischen grafischen Elementen wie Linien, Balken und deren Hintergrund. Wählen Sie eine Farbpalette, die für Farbenblinde geeignet ist, und verwenden Sie gesättigte Farbtöne sparsam. Geben Sie Interaktionszuständen und hervorgehobenen Informationen nicht nur eine andere Farbe, sondern auch eine andere Form oder einen anderen Linienstil.

Typografie und Hierarchie

Wählen Sie eine gut lesbare serifenlose Schriftart mit ausreichender x-Höhe. Sorgen Sie für eine klare visuelle Hierarchie mit einheitlichen Überschriften, Unterüberschriften und Beschriftungen. Halten Sie ausreichend Weißraum und einen Zeilenabstand von etwa 1,4 bis 1,6 ein. Vermeiden Sie Text in Großbuchstaben und zu enge Abstände. Für digitale Publikationen sind 16 px ein praktisches Minimum für Fließtext; vergrößern Sie Wertbeschriftungen in Diagrammen, damit sie auch auf Mobilgeräten lesbar sind. Schreiben Sie nach Möglichkeit auf B1-Niveau und vermeiden Sie Fachjargon oder erklären Sie ihn kurz in der Legende.

Textalternativen und Beschreibungen

Verseh jede Infografik mit einem kurzen Alt-Text, der den Zweck und die Kernbotschaft zusammenfasst. Füge außerdem eine ausführliche Beschreibung oder Zusammenfassung in der Nähe der Grafik hinzu. Veröffentliche die zugrunde liegenden Daten in Form einer zugänglichen Tabelle, damit auch Nutzer, die keine Bilder sehen können, alle Informationen einsehen können. Verwende klare Titel und Untertitel, die die Botschaft deutlich machen, nicht nur das Thema.

Interaktive und statische Formate

Veröffentlichen Sie nach Möglichkeit in HTML oder SVG mit echtem Text, damit Bildschirmlesegeräte Beschriftungen und Werte lesen können. Stellen Sie sicher, dass die Interaktion über die Tastatur bedienbar ist und dass Fokusstile sichtbar sind. Arbeiten Sie an interaktiven Varianten? Lesen Sie Was ist eine interaktive Infografik? Verwenden Sie barrierefreie Tooltips und bieten Sie die gleichen Informationen auch im festen Layout der Grafik an. Für PDF: Taggen Sie Elemente korrekt, legen Sie die Lesereihenfolge richtig fest und testen Sie mit einem Screenreader. Bieten Sie immer eine Alternative ohne Animation oder Zeitdruck an. Sind Sie sich unsicher, ob leichte Bewegungen hilfreich oder störend sind? Lesen Sie dann „Infografik-Animation: Was ist das?”. Ziehen Sie subtile Bewegungen wie Mikroanimationen in Betracht und respektieren Sie die Bewegungspräferenzen aller Nutzer. Veröffentlichen Sie Ihre Informationen als Video? Lesen Sie „Was ist eine Video-Infografik?” für Richtlinien zu Untertiteln, Transkripten und Audiodeskriptionen.

Checkliste barrierefreie Infografik

• Ziel und Kern – Formulieren Sie eine Hauptbotschaft und machen Sie diese im Titel und in der Einleitung deutlich.
• Farbe und Muster – Keine Informationen nur über Farbe, verwenden Sie Muster und Etiketten.
• Kontrast – Überprüfen Sie 4,5:1 für Text, 3:1 für große Text- und Grafikelemente.
• Typografie – Lesbare Schriftarten, ausreichende Größe und Leerraum, B1-Wortwahl.
• Beschriftungen und Legende – Platzieren Sie Beschriftungen in der Nähe der Daten und schreiben Sie die Legende deutlich aus.
• Alt-Text – Kurze Zusammenfassung von Ziel und Ergebnis sowie ausführliche Beschreibung.
• Datenalternative – Bieten Sie eine barrierefreie Tabelle oder einen Daten-Download an.
• Technik – HTML/SVG mit echtem Text, tastaturzugänglich, korrekter Fokus.

Häufig gestellte Fragen

Können Infografiken barrierefrei sein?

Ja. Indem Sie Farbe nicht als einzigen Träger verwenden, ausreichend Kontrast schaffen, Beschriftungen und Muster hinzufügen, eine klare Typografie wählen und Alt-Texte und Datentabellen anbieten, machen Sie Infografiken für alle nutzbar. HTML oder SVG mit echtem Text und Tastaturzugänglichkeit runden dies ab. Entscheiden Sie sich nur für Bewegung, wenn diese die Informationen unterstützt und keine Hindernisse schafft.

Was muss eine Erklärung zur Barrierefreiheit erfüllen?

Beschreiben Sie den Umfang Ihrer Website oder Veröffentlichung, den Grad der Einhaltung der WCAG 2.2, bekannte Mängel mit Begründung, eventuelle Ausnahmeregelungen und einen Verbesserungsplan mit Zeitplan. Fügen Sie das Datum, die verantwortliche Organisation und einen Ansprechpartner hinzu. Aktualisieren Sie die Erklärung regelmäßig bei Änderungen.

Was macht eine gute Infografik aus?

Eine gute Infografik hat eine klare Botschaft, eine logische Hierarchie, einen sparsamen Einsatz von Farben, eindeutige Beschriftungen in der Nähe der Daten und einen kurzen, informativen Titel. Für die Barrierefreiheit gelten zusätzliche Anforderungen: ausreichender Kontrast, keine rein farbige Codierung, B1-Texte, Alt-Texte und eine Datentabelle als vollwertige Alternative.

Hilfe bei barrierefreien Bildmaterialien

Möchten Sie Ihre Infografik WCAG-konform gestalten, ohne dabei an Wirkung einzubüßen? Animation Agency Organisationen im Gesundheitswesen und Behörden mit verständlichen, inklusiven Visualisierungen. Wir arbeiten mit B1-Kommunikation, starken Farbkontrasten, Untertiteln und Audiodeskriptionen, wo dies relevant ist. Kontaktieren Sie uns Beratung oder Produktion oder sehen Sie sich unser Portfolio an Infografiken an, um Beispielfälle und Best Practices zu sehen.