Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03487.jsonl.gz/1093

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