Gehirngerecht Digital

Checkliste für: Bilder

Hier findest du Erläuterungen zu den einzelnen Anforderungen der WCAG bzw. EN 301 549 und warum sie Teil der Checkliste sind. Zur Liste zum Abhaken kommst du mit einem Klick auf den Button: “Zur Checkliste”.

Zur Checkliste

Die Checkliste

Bilder, die anklickbar sind, brauchen gute Beschreibungen!

Wenn du Bilder als sogenannte Bedienelemente verwendest, wie Icons, die klickbar sind oder Logos, die zur Startseite verlinken, benötigen diese beschreibende Texte im Alt-Attribut.

Zum Beispiel ein Pfeil in einer App, der die Funktion hat, auf die Seite davor zu verlinken, sollte mit „Zurück“ beschrieben sein und nicht mit „Pfeil nach links“.

Zwei Pfeile. Einer hat kein Alt-Attribut, im Alt-Attribut des anderen steht: Zurück.

Die Alt-Attribute von dekorativen Bildern müssen leer sein

Bilder oder Grafiken, die wirklich nur für Layout-Zwecke da sind, benötigen ein leeres Alt-Attribut. Das sorgt dafür, dass diese Bilder von Screenreadern ignoriert werden.

Zu diesen Bildern gehören zum Beispiel Trennstriche oder redundante Icons.

Ein Icon von einem Brief und dem Text „Schreib eine E-Mail" daneben. Ein mal hat das Icon ein Alt-Text und ein mal nicht.

Vermeide Texte in Bildern

Schrift sollte nicht direkt in Bilder eingebaut werden. Ausnahmen:  Texte, die essenziell für das Bild sind, zum Beispiel Buch-Cover, Zertifikate, Screenshots.

Zudem ist es erlaubt, wenn die Bilder zur Dokumentation oder Erklärung genutzt werden (wie hier!) oder der Text als Alternative daneben steht.

Ein Bild von Text im Bild, in dem steht, dass es kein Text im Bild geben sollte.

Kontraste von Texten in Grafiken

Text in oder auf Bildern müssen die Kontrastanforderungen von 4,5:1 erfüllen. Außer der Text ist über 24px groß, dann reicht 3:1.

Zwei Bilder, auf denen ein Text steht. Bei dem ersten Bild stimmt der Kontrast nicht.
Zur Checkliste

Verlinkungen auf den BIK-BITV-Tests

Wir verlinken in den Erläuterungen auf die Prüfschritte des BIK-BITV-Tests und nicht der WCAG. Das machen wir, weil es das bekannteste Prüfverfahren ist und weil es für die meisten Menschen einfacher ist, die Prüfschritte zu verstehen und ihnen zu folgen. Die Prüfschritte des BIK-BITV sind nur eine Auslegung der EN 301 549. Es gibt auch andere Prüfverfahren, die legitim sind und als Quelle oder Nachschlagewerk genutzt werden können.