Das Wichtigste in Kürze

Informationen in Infografiken und (interaktiven) Visualisierungen müssen für alle Nutzenden so leicht wie möglich zugänglich sein.

Wir ermöglichen auch Menschen mit Beeinträchtigungen oder situativen Einschränkungen, Daten und deren Kernaussagen zu verstehen. Darum bieten wir zur Infografik oder Visualisierung immer ein vergleichbares nicht-visuelles Erlebnis. Das können wir auf zwei Arten erreichen:

1. Wir reduzieren die Informationen aus der Grafik auf das Wesentliche. Die Grafik wird im Sinne der Kernbotschaft gestaltet. Zudem bieten wir diese auch in schriftlicher Form an.
2. Wir bieten alternative Möglichkeiten, die Daten zu lesen, zu verstehen und Erkenntnisse daraus zu ziehen.

Nicht-visueller Zugang

Beim Teilen einer Infografik oder einer (interaktiven) Visualisierung gibt es mehrere Möglichkeiten, Informationen auf eine nicht-visuelle Weise zu vermitteln. Das Wichtigste dabei ist, Blinden und Sehbeeinträchtigten zu ermöglichen, die dargestellten Daten zu verstehen und die Kernaussage daraus mitzunehmen. Je nach Zweck der Grafik gibt es dafür verschiedene Ansätze.

Vorteile:

• Für jede Grafik mit Informationsgehalt beschreiben wir im Alt-Text die Charakteristiken der Grafik und in knapper Form die Hauptaussage.
• Wenn der Alt-Text nicht ausreicht, um die Hauptaussage zu vermitteln, liefern wir im Umfeld der Grafik einen beschreibenden Text, der die Kernaussagen zusammenfasst.
• Wenn die einzelnen Werte oder Kategorien in einem Datensatz von hohem Interesse sind, bieten wir zusätzlich tabellarische Alternativen mit einer barrierefreien Formatierung an.

Genaueres zu den einzelnen Ansätzen finden sich in den folgenden Kapiteln.

Alt-Text schreiben

Der Alt-Text ist eine kurze und prägnante alternative Beschreibung des Inhalts der Infografik oder (interaktiven) Visualisierung.

Good Practice

Vorteile:

• Wir erwähnen, um welche Art von Grafik es sich handelt und welche Daten dargestellt sind, z.B. «Liniendiagramm der Daten XY, welche XY zeigen». Wir vermeiden die Bezeichnung «Grafik von XY». 
  
• Wenn es der Platz erlaubt, ergänzen wir die Hauptaussage. Ansonsten reicht ein Alt-Text in einer allgemeineren Form.
• Wir verwenden möglichst weniger als 150 Zeichen (inklusive Leerzeichen).

Beispiel Alt-Text mit Hauptaussage

Balkendiagramm (=Grafiktyp) zur Anzahl der Logiernächte ausländischer und inländischer Gäste (=Datensatz), das zeigt, dass die Übernachtungen im April 2020 um 90% niedriger sind als im Vorjahresmonat (=Hauptaussage).

Beispiel Alt-Text in allgemeiner Form

Liniendiagramm zum Personenwagenbestand sowie zur Bevölkerungszahl im Kanton Zürich von 1990 bis 2020.

In manchen Fällen ist es nicht möglich, die wichtigsten Kernaussagen im Alt-Text zu beschreiben. Dann ist es wichtig, diese im Fliesstext zu beschreiben, der die Grafik umgibt. 

Zusätzlich zum Alt-Text können Informationen aus oder über die Daten bereits im Titel und Untertitel der Grafik in eine klare Sprache übersetzt werden. Das unterstützt das Verständnis.

Die Informationen im Fliesstext beschreiben

Wir beschreiben mit Fliesstext dieselben Informationen, die in der Grafik visuell dargestellt sind.

Good Practice

Vorteile:

• Wir fassen die Kernaussage der Grafik (z.B. Trends, Minimal- und Maximalwerte, Besonderheiten) im Fliesstext zusammen.
• Der Alt-Text darf in dem Fall allgemeiner sein und muss nicht mehr die Hauptaussage der Grafik beschreiben. Beispiel: «Ein Liniendiagramm zur Bevölkerungsentwicklung zwischen 2010 und 2022 im Bezirk Winterthur.»

Beispiel

Im Fliesstext beschreiben:

Zunahme der Straftaten im Jahr 2022

Die Zahl der polizeilich bekannten Straftaten im Kanton Zürich hat im Berichtsjahr um rund 9 Prozent zugenommen. Der Anstieg war zu erwarten. Die Massnahmen gegen die Corona-Pandemie hatten sich im Vorjahr auch mässigend auf die Kriminalität ausgewirkt. Das Jahr 2022 war in langfristigen Vergleich jedoch eine Ausnahme: Trotz zunehmender Einwohnerzahl nimmt die polizeilich erfasste Kriminalität im Kanton Zürich seit mehr als einem Jahrzehnt tendenziell ab. 2012 wurde die bislang höchste Anzahl polizeilich bekannter Straftaten verzeichnet (148'533), 2021 dagegen die tiefste (103'898). Dies entspricht einer Differenz von 26 Prozent.

Allgemeiner Alt-Text dazu:

Flächendiagramm, welches die Anzahl Straftaten nach Gesetzen im Kanton Zürich abbildet.

Daten in einer separaten Tabelle zugänglich machen

Als Alternative zur grafischen Darstellung auf der Webseite können wir eine Tabelle einbinden.

Jedoch gilt zu beachten, dass sich dies eher für kleinere Datensätze anbietet. Bei grossen Tabellen, bspw. mit vielen Jahren oder Kategorien, kann der Informationsgehalt schnell zu gross werden. Dies erschwert es den Nutzenden, aus den Daten die generellen Muster und wichtigsten Entwicklungen zu entnehmen – insbesondere mittels Screenreader.

Bei grösseren Datensätzen, in denen die einzelnen Datenpunkte von Interesse sind, muss eine Möglichkeit bestehen, auf die relevanten Datenpunkte filtern zu können. Beispiel: Wir wollen Nutzenden ermöglichen, die Abstimmungsresultate oder den Steuerfuss der eigenen Gemeinde abzufragen.

Wenn wir eine Tabelle anbieten, können wir die Grafik für Screenreader ausblenden (sehr einfache Grafiken/Tabellen) oder einen allgemeinen Alt-Text schreiben (komplexe Grafiken/Tabellen).

Good Practice

Vorteile:

• Wir bieten zugängliche Tabellenformate an. Solche sind:
  • HTML-Tabelle auf der Website
  • Excel-Tabelle zum Download (kein CSV-Format).
• Die Benennung der Datei soll einen Rückschluss auf die darin enthaltenen Daten zulassen.

Darstellung von Typografie in Infografiken

Anforderungen an die Schriftgrösse und -farbe

Vorteile:

• Um gut lesbar zu sein, soll die Schriftgrösse nicht kleiner als 12 Pixel sein.
• Wir wählen eine Hintergrundfarbe mit maximalem Kontrast zum Hintergrund. Vorgaben dazu:
  • Normaler Text (14pt bis 17 pt): Mindestens 4.5:1
  • Grosser Text (18 pt und mehr oder 14 pt fett): Mindestens 3:1

Good Practice

Vorteile:

• Wir platzieren die Beschriftung oder Legende ausserhalb der Visualisierung.
• Ist der Farbkontrast des Textes zum Hintergrund nicht gewährleistet, hinterlegen wir Texte in Visualisierungen mit einem hellen Rechteck oder Kreis.
  

Darstellung grafischer Elemente in Infografiken

Anforderungen an Farben und Kontrast

Vorteile:

• Kontrast von grafischen Elementen zum Hintergrund: Mindestens 3:1.
• Kontrast von grafischen Elementen untereinander: Mindestens 3:1
• Der Kontext einer Informationen muss klar sein.
• Auch Farbenblinde müssen die Farbinformation wahrnehmen können.

Nur Farben verwenden mit einem Kontrast von 3:1 zum Hintergrund

Vorteile:

• Wir wählen eine Farbpallette, die den Kontrastwert von mindestens 3:1 zum Hintergrund gewährleistet.
• Es bietet sich an, die Farben gleich so zu wählen, dass sie auch die Anforderung von mindestens 4.5:1 Farbkontrast zu Text erfüllen.

Redundanter Informationsaufbau

Farbe darf nicht als einziges visuelles Mittel zur Vermittlung von Informationen verwendet werden.

Vorteile:

• Besonders bei Unterscheidungen von Kategorien bietet sich der Einsatz von Formen (formale Symbole) an.
• Wenn formale Symbole nicht geeignet sind oder kein Platz vorhanden ist, wird empfohlen, die Farbdifferenzierung durch eine Musterdifferenzierung zu ergänzen.

Good Practice: Konturen trennen die verschieden Farbflächen

Bei Infografiken mit einer umfangreicheren Farbpalette (mehr als vier Farben) ist es kaum möglich, genügend Farben zu finden, die untereinander einen Kontrast von 3:1 aufweisen.

Eine Umrandung von einer 1-Pixel-Kontur in der Farbe des Hintergrundes trennt Farbflächen visuell zuverlässig.

Konturen bei Karten

Wenn sequenzielle Farben auf Karten verwendet werden, sollten Regionen mit einem kontrastreichen Strich im Verhältnis 3:1 zum Hintergrund umrissen werden.

Andernfalls können Regionen mit kontrastarmen Farben, insbesondere Inseln, leicht verloren gehen. Auch Seen sollten mit einer Kontur umrandet werden, damit diese nicht im Hintergrund untergehen.

Konturen und Trennlinien bei Balken- und Flächendiagrammen

Gelegentlich kann es vorkommen, dass ein Diagramm eine umfangreichere Farbpalette benötigt. Eine Umrandung der Flächen mit einer 1-Pixel-Kontur in der Hintergrundfarbe (Verhältnis 3:1 zum Hintergrund) kann beim Lesen unterstützen.