Barrierefreie Grafiken

Die Gestaltung barrierefreier Grafiken und Bildern stellt besonders große Herausforderungen, da Zielgruppen, wie Sehbehinderte, Sehgeschwächte, Menschen mit Rot-Grün-Blindheit mit unterschiedlichen visuellen und gestalterischen Mitteln gleichermaßen erreicht werden müssen. Dabei kann man sich verschiedener visueller und technischer Hilfsmittel bedienen.

Alternativtext oder Erläuterung zur Grafik

Grundsätzlich gilt, dass eine Grafik ohne beschreibenden Text von blinden Menschen nicht erfasst werden kann. Die BITV (Barrierefreie Informationstechnik-Verordnung) definiert folgende Anforderung: „Für jeden Nicht-Text-Inhalt sind bereitzustellen, die an die Bedürfnisse der Nutzerinnen und Nutzer angepasst werden können“.

Quelle: www.gesetze-im-internet.de und BIK

mehr Infos

Folgende Maßnahmen erleichtern die Zugänglichkeit

  1. Der erläuternde Text im ALT-Attribut sollte kurz und aussagekräftig sein. „Der Alternativtext (alt-Text) macht den Inhalt und die Funktion von Bildern für blinde Menschen zugänglich.“ Quelle: BIK
  2. Grafiken, die als Link dienen oder eine Aktion auslösen, sind im ALT-Attribut entsprechend zu beschriften. Also alt=“Link“ oder alt=“Aktion“ (Beispiel: alt=“Homepage der FernUniversität“)
  3. Dekorative Grafiken „Schmuckgrafiken“ ohne informative Funktion bedürfen keiner Information im ALT-Attribut. Das ALT-Attribut wird somit leergelassen. alt=““ sollte jedoch stehenbleiben.
  4. Entfallen kann das ALT- Attribut auch, wenn bei Bildunterschriften einer Grafik zusammen mit dem FIGURE-Element gestaltet ist. Zusammen mit einer Bildunterschrift <figcaption> in einem gruppierenden <figure> erschließt sich so die Grafik.
  5. Bei informativen Grafiken (wie z.B. Diagramme und Schaubilder) werden komplexere Informationen vermittelt. Diese sind für den ALT-Attribut, welches nur maximal 80 Zeichen erfasst, zu umfangreich und sollten in Textform in einer ausführlicheren Beschreibung erfasst werden.
    Hinweis: <longdesk> war ein Link zu einer längeren Beschreibung als im alt-Text. Dieser ist nicht mehr aktuell und kann durch <figcaption> ersetzt werden.
  6. Die Inhalte des Bildes werden im Kontext beschrieben. Je mehr Informationen im Kontext stehen, desto kürzer darf die Textalternative sein. Wird das Bild ausreichend im Kontext beschrieben, kann ein identifizierender Alternativtext eingesetzt werden. Es wird eine lange Beschreibung mit dem Bild verknüpft. Quelle: Barrierefreies Webdesign

Verwendung von Farben

Die Überprüfbarkeit der Erfolgskriterien der Web Content Accessibility Guidelines (WCAG) 2.0 z.B. von Farbe ermöglicht Barrierefreies-webdesign

mehr Infos

  1. Zur besseren Wahrnehmbarkeit sind die Farben von Vorder- und Hintergrund kontrastreich zu gestalten. Die visuelle Darstellung von Text und Bildern hat ein Kontrastverhältnis von mindestens 4,5:1. Zur Überprüfung der Kontraste gibt es Tools oder Webseiten wie z.B.:
  2. Schriftgrafiken sind zu vermeiden, da sie nicht als Text lesbar sind. Sofern sich Schriftgrafiken (z.B. bei einem Schaubild) nicht vermeiden lassen, muss auf ausreichende Schriftgröße und Kontrast zwischen Schrift- und Hintergrundfarbe geachtet werden.
  3. „Bilder und Farbverläufe sind als Texthintergrund ungeeignet, da beides zu wechselnden und irritierenden Kontrastverhältnissen führt.“ (Zum Blogartikel des DBSV - Angebot des Deutschen Blinden- und Sehbehindertenverbandes)
  4. Komplexität der Grafiken auf ein Minimum beschränken. (Inhalte im Web werden beim Scrollen gefiltert und nur dann erfasst, wenn sie schnell zugänglich sind.)
  5. Leserichtung im Web beachten, da im Web und insbesondere bei mobilen Anwendungen von oben nach unten gescrollt wird. (Es ist ungünstig Grafiken für das Web mit Lesefluss von unten nach oben zu erfassen. Optimal bietet sich die Leserichtung von oben nach unten oder von links nach rechts im europäischen Raum an.)
  6. Überflüssige Schmuckelemente (Gestaltungselemente ohne Informationsgehalt) und dünne Linien (die nur schwer erfasst werden können) sind zu vermeiden. Diese lenken vom reinen Informationsgehalt der Grafik ab. (Kohärenz-Prinzip der Gestaltungslehre: unnötige Details weglassen. Siehe Punkt 11: Gestaltungsprinzipien.)
  7. Farben, die Symbolcharakter haben (Warn- und Signalfarben, wie z. B. knallrot), sind sparsam und nicht zweckentfremdet anzuwenden. Dabei ist Rot-Grün-Blindheit zu beachten.
  8. Grafiken nie ausschließlich über Farben z.B. in Bezug zu einer Legende, verdeutlichen, sondern immer zusätzlich über Formattribute oder Textattribute. Nur so können farbenblinde Menschen die Grafik interpretieren.
  9. Formen sind klar zu definieren. (Genügend Weissraum zwischen einzelnen Grafikelementen belassen.)
  10. Beim Speichern der Grafik für das Web auf ausreichende Größe achten. Beim Heranzoomen im Browser sollte die Grafik nicht sofort pixelig sein. (Enthält die Grafik Schriften, so wird die Lesbarkeit beeinträchtigt. Visuelle Informationen gehen verloren.)
  11. Grafiken möglichst nicht auf farbigen Hintergrund stellen oder als .png mit Transparenzraum speichern. Beim .png-Format darauf achten, dass der vordefinierte Hintergrund im Transparenzraum durchscheint.) Sofern möglich, Grafiken im Format .jpg oder .svg speichern. SVG Grafiken sind ohne Qualitätsverlusst skalierbar.
  12. Form und Farbenlehre sollten allgemeine Gestaltungsprinzipien beim Erstellen einer Grafik grundsätzlich Beachtung finden, da sie die Barrierefreiheit und Usability unterstützen, wie, Kohärenz-Prinzip (unnötige Details weglassen) und Prinzip der räumlichen Nähe (zusammengehörige Wort- und Bildelemente nah aneinander setzen)

Bewegte oder blinkende Bilder

Bewegte oder blinkende Inhalte sind nicht vorhanden, stoppen spätestens nach 5 Sekunden, oder es gibt eine Möglichkeit, die Bewegung/das Blinken anzuhalten, zu beeenden oder auszublenden.

Quelle: testen.bitv-test.de

mehr Infos

Folgende Maßnahmen erleichtern die Zugänglichkeit

Ablenkung durch blinkende oder sich bewegende Elemente soll vermieden werden, auf 5 Sekunden begrenzt sein oder abschaltbar sein.


Grafiken prüfen

Um sicher zu gehen, gilt vor der Veröffentlichung die Aussage und Informationen der Grafik zu überprüfen, kritisch zu hinterfragen und von Probanden (der Zielgruppe) testen zu lassen.

Zusammenfassung

Im folgenden Dokument haben wir wichtige Aspekte zu barrierefreien Grafiken zusammengefasst.

Barrierefreie Grafiken im Web (PDF 84 KB)

webberatung | 12.08.2021