Barrierefreiheit von Infografiken und Visualisierungen

Inhaltsverzeichnis

Hauptkapitel
Barrierefreiheit
Unterkapitel
Vorgaben
Gilt für
Websites & Webapplikationen (mit Login)

Nicht-visueller Zugang

Alle Informationen und Daten sollen auch für blinde und sehbeeinträchtigte Menschen zugänglich sein.

Beim Teilen einer Grafik oder interaktiven Visualisierung gibt es mehrere Möglichkeiten, Informationen auf eine nicht-visuelle Weise zu vermitteln. Je nach Komplexität der Grafik empfiehlt sich ein anderer Ansatz.

Vorteile:

  • Grundsätzlich ergänzen wir jede Grafik mit einem beschreibenden Alt-Text.
  • Wir bieten zusätzlich tabellarische Alternativen mit barrierearmer Formatierung an. Diesen Ansatz nutzen wir bei datenlastigen Grafiken und mehrdimensionalen Daten.
  • Wir führen Daten redundant mit Überschriften und Text direkt auf der Seite auf. Diesen Ansatz nutzen wir, wenn die Daten oder Informationen im Text leichter verständlich sind als in einer Tabelle. Das gilt z.B. für lange Zeitreihen.

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

Alt-Text schreiben

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

Good Practice

Vorteile:

  • Wir verwenden möglichst weniger als 150 Zeichen (inklusive Leerzeichen).
  • Wir vermeiden die Bezeichnung «Grafik von XY». Stattdessen erwähnen wir, um welche Art von Grafik es sich handelt, z.B. «Liniendiagramm von XY».

Beispiel: Die Anzahl der Logiernächte ausländischer und inländischer Gäste [Dateityp] verdeutlicht, dass die Übernachtungen im April 2020 um 90% niedriger sind als im Vorjahresmonat [Grund].

Daten in einer separaten Tabelle zugänglich machen

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

In diesem Fall blenden die Grafik für den Screenreader aus.

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 des Files soll einen Rückschluss auf die darin enthaltenen Daten zulassen.

Die Informationen im Fliesstext beschreiben

Wenn die Daten oder Informationen der Grafik besser mit Überschriften und Text beschrieben werden, bauen wir die Informationen in den Fliesstext ein.

Good Practice

Vorteile:

  • Wir beschreiben mit Fliesstext dieselben Informationen, die in der Tabelle oder der Grafik visuell dargestellt sind.
  • Wir fassen die Kernaussage der Grafik (z.B. Trends, Kategorien, Minimal- und Maximalwerte) im Fliesstext zusammen.
  • Der Alt-Text darf allgemeiner sein und muss nicht mehr die Aussage der Grafik beschreiben. Beispiel: «Ein Liniendiagramm zur Bevölkerungsentwicklung».

Darstellung von Typografie in Infografiken

Alle Texte einer Infografik müssen gut lesbar sein.

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

Nutzende müssen alle grafischen Elemente korrekt interpretieren können.

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.
LEER

Redundanter Informationsaufbau

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

Grundsatz: Eine Infografik soll auch ohne Farbe lesbar bleiben.

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.

LEER

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.

LEER

Kontakt

Staatskanzlei – Digitale Verwaltung und E-Government, ZHweb

Ihre Anlaufstelle für Fragen und Anregungen rund um den barrierefreien Informationszugang.

Mehr erfahren