Barrierefreie Grafiken

Die Gestaltung barrierefreier Grafiken und Bilder 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 Alternativen in Textform bereitzustellen, die an die Bedürfnisse der Nutzerinnen und Nutzer angepasst werden können“.

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

mehr Infos

Regeln für Alternativtexte

  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. Bildtyp angeben, wie Foto, Gemälde, Diagramm etc.
  3. Kurze, objektive Beschreibung dessen, was man sieht, ohne Interpretation
  4. Fachbegriffe nennen
  5. Abgebildeten Text im Bild mit aufnehmen. Diesen in Anführungszeichen setzen.
  6. Formulierungen wie „Im Bild zu sehen“ oder „in der Grafik wird dargestellt“ vermeiden
  7. 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“)
  8. Dekorative Grafiken „Schmuckgrafiken“ ohne informative Funktion bedürfen keiner Information im ALT-Attribut. Das ALT-Attribut wird somit leergelassen. alt=““ sollte jedoch stehenbleiben.
  9. Im Zweifelsfall bei Alternativtexten eher beschreiben als nicht bescheiben.
  10. 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.
  11. Bei informativen Grafiken (wie z. B. Diagramme und Schaubilder) werden komplexere Informationen vermittelt. Diese sind für den ALT-Attribut 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.
  12. 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

Zur besseren Wahrnehmbarkeit einer Grafik spielt die richtige Anwendung von Farben eine große Rolle. So sind Vorder- und Hintergrund kontrastreich zu gestalten und bestimmte Farbkombinationen, wie rot grün zu vermeiden. Um unterschiedliche Inhalte in Grafiken hervorzuheben reicht die ausschließliche Kennzeichnung von Bereichen nur über Farbe nicht aus.

mehr Infos

Kontrastanalyse

Die visuelle Darstellung von Text und Bildern hat ein Kontrastverhältnis von mindestens 4,5:1.
Zur Überprüfung der Kontraste gibt es viele Tools oder Webseiten, die dies berechnen können, wie

Kontrastrechner von leserlich.info

oder als Download

Farbkontrast-Analyser von tpgi.com

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

Barrierefreie Gestaltung von Farben

Bei Farbengestaltungen sind Prinzipien einzuhalten, wie:

  1. 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.
  2. „Bilder und Farbverläufe sind als Texthintergrund ungeeignet, da beides zu wechselnden und irritierenden Kontrastverhältnissen führt.“ (Zum Artikel von Leserlich.info - Angebot des Deutschen Blinden- und Sehbehindertenverbandes)
  3. 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.)
  4. 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.)
  5. Ü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.)
  6. 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.
  7. 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.
  8. Formen sind klar zu definieren. (Genügend Weissraum zwischen einzelnen Grafikelementen belassen.)
  9. 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.)
  10. 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.
  11. 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 | 19.09.2023