"

Für Web-Editor:innen

Barrierearme Grafiken

Regel

Informationen aus Grafiken müssen auch für Personen zugänglich sein, die visuelle Inhalte nicht oder nur eingeschränkt wahrnehmen können. Relevante Informationen dürfen deshalb nie ausschliesslich über Farbe vermittelt werden, sondern sind zusätzlich in Textform bereitzustellen.

Farbe

Informationen dürfen nicht ausschliesslich über Farben vermittelt werden. Dies ist insbesondere bei Diagrammen und Grafiken wichtig, bei denen Daten anhand unterschiedlicher Farben visualisiert werden. Während dies für Menschen ohne Beeinträchtigung in der Regel eine sehr nützliche Darstellungsform ist, kann eine Unterscheidung für Nutzende mit einer Sehbeeinträchtigung wie z.B. Farbfehlsichtigkeit unmöglich sein. Die Bedeutung der einzelnen Farben sollte deshalb zusätzlich durch eine Beschriftung, Symbole oder unterschiedliche Muster der Segmente erkennbar sein.

Kontraste

Grafische Elemente müssen einen ausreichenden Kontrast zum Hintergrund aufweisen. Auch Text innerhalb einer Grafik muss einen ausreichenden Kontrast zum Hintergrund haben. Werden verschiedene grafische Elemente durch ihre Farbe voneinander unterschieden, muss auch zwischen diesen Elementen ein ausreichender Kontrast bestehen. Weitere Informationen findest du in den Kapiteln Kontraste und Kontraste der HfH-Farben.

Text

Informationen, die für das Verständnis einer Grafik relevant sind, müssen auch in Textform zugänglich sein. Dies gilt insbesondere für Diagramme, Infografiken und andere Grafiken, die inhaltliche Informationen vermitteln. Dabei kann die Information je nach Art und Komplexität der Grafik über den umgebenden Text, eine Beschriftung oder Legende, einen Alternativtext oder eine längere Bildbeschreibung bereitgestellt werden.

Alternativtext und Bildbeschreibung

Ist eine Grafik nicht rein dekorativ, benötigt sie einen Alternativtext. Der Alternativtext beschreibt die für den jeweiligen Kontext relevante Information und nicht einfach das Aussehen der Grafik. Bei rein dekorativen Grafiken kann auf einen Alternativtext verzichtet werden. Auch wenn die für das Verständnis relevante Information bereits vollständig im umgebenden Text vermittelt wird, ist kein zusätzlicher Alternativtext notwendig.

Bei komplexen Grafiken mit umfangreichen Inhalten ist ein kurzer Alternativtext in der Regel nicht ausreichend. Die relevanten Informationen müssen zusätzlich in einer längeren Bildbeschreibung zugänglich gemacht werden, sofern sie nicht bereits vollständig im umgebenden Text enthalten sind.

Für die Bildbeschreibung wird unterhalb der Grafik ein weiterer Textblock eingefügt. Dieser beginnt mit «Beschreibung der Grafik.» in fetter Schrift und mit einem Punkt am Ende. Anschliessend werden die für das Verständnis der Grafik relevanten Inhalte beschrieben.

Weitere Informationen findest du im Kapitel Alternativtexte und textliche Beschreibungen bei Bildern und Grafiken.

Beispiel

Dieses Beispiel zeigt, wie ein Tortendiagramm mit Verwendung der HfH-Farben barrierearm gestaltet werden kann:

Bild 1: Gesamtübersicht der Ergebnisse. Alle Farben weisen einen ausreichenden Kontrast auf. Weisse Rahmen zwischen den Tortenstücken sorgen für zusätzliche Abgrenzung. Die Legende neben der Grafik ordnet jedem farblich dargestellten Segment die entsprechende Kategorie und den zugehörigen Prozentwert zu.

Bild 2-5: Beim Überfahren (Hover) eines Tortenstücks wird das entsprechende Segment hervorgehoben und die übrigen Segmente ausgegraut. Das Ergebnis wird im Tooltip sowohl in Prozent als auch in Worten angezeigt. Die übrigen Segmente werden dabei ausgegraut. Gleichzeitig wird der entsprechende Wert in der Legende fett hervorgehoben. So wird die Zuordnung zwischen den Diagrammsegmenten und den Werten in der Legende erleichtert.

Auch auf zuugs und ILIAS sind ähnliche Funktionen für die Gestaltung von barrierearmen Grafiken vorhanden. Wenn du Fragen hast bei der Erstellung deiner visuellen Infomaterialien oder nicht sicher bist, wie du am besten die Barrierefreiheit gewährleistest, melde dich gerne beim Digi!

Lizenz

Icon für Creative Commons Namensnennung-Nicht kommerziell-Weitergabe unter gleichen Bedinungen 4.0 International

E-Accessibility an der HfH Copyright © 2022 by Interkantonale Hochschule für Heilpädagogik is licensed under a Creative Commons Namensnennung-Nicht kommerziell-Weitergabe unter gleichen Bedinungen 4.0 International, except where otherwise noted.