Es ist wichtig, unsere Inhalte allen Leser*innen zur Verfügung zu stellen. Und wir haben gelernt, dass schon aus SEO-Gründen Texte auf Bildern nicht gut sind. Unsere Bilder sind in den meisten Fällen dekorativ und müssen aus Accessibility-Gesichtspunkten nicht beschrieben werden. Wir gehen sogar soweit, dass wir Nutzer*innen von Screanreadern keine überflüssigen Informationen zumuten möchten und dekorative Bilder bewusst nicht beschreiben werden. 

Das Alt-Attribut bleibt in den meisten Fällen ungenutzt und wird von den Screenreadern als nicht befüllt bewertet. Nur in wenigen Fällen beschreiben wir Bilder und nutzen hierfür das Alt-Attribut.

Im Zweifelsfall ist Accessibility immer höher zu gewichten als SEO. Dies gilt insbesondere für Bilder, bei denen nicht eindeutig festgelegt werden kann, ob sie dekorativer oder informativer Natur sind. Unnötige Bildbeschreibungen können den Navigationsfluss für Nutzer:innen von Screenreadern erheblich stören.

• Die meisten Bilder, die wir verwenden, sind nicht informierender Natur und müssen nicht beschrieben werden. 
• Wenn Bildinhalte wichtig für das Gesamtverständnis sind und nicht im Text beschrieben werden, nutzen wir das Alt-Attribut.
• Verlinkte Bilder sollten nicht gleichzeitig informative Bilder sein. Sobald ein Bild verlinkt ist oder eine Aktion ausführt, muss der Link-Zweck bzw- die Aktion beschrieben werden und nicht das Bild. Die Beschreibung der interaktiven Funktion hat immer Vorrang. 
• Für komplexe Grafiken nutzen wir sobald verfügbar Description-Felder.
• Image Title wird im Kontext von Accessibility nicht verwendet. Da die Screenreader über das Alt-Attribut (gefüllt oder leer) entscheiden, ob sie ihren Nutzern eine Information weitergeben, schadet es auch nicht, wenn der Image Title Tag für andere Zwecke (bspw. SEO genutzt wird).
• Screenshots von Apps und Webseiten enthalten theoretisch Text. Wir bewerten diese Screenshots in der Regel als dekorativ und beschreiben sie nicht. Wenn der Informationsgehalt einer Webseite darunter leiden würde, wenn das Bild nicht beschrieben wird, dann beschreiben wir es. 
• Wir vermeiden wo immer möglich Text auf Bild. Bilder auf denen Text zu sehen ist – sogenannte Schriftgrafiken – benötigen einen Alternativtext, wenn der Text auf dem Bild nicht im direkten Kontext wiederholt wird. Schriftgrafiken stellen einen Verstoß gegen die WCAG dar, falls die Information verlustfrei ebenso als „normaler“ Text zur Verfügung gestellt werden kann. Ausnahmen gelten für Schriftgrafiken als Teil eines Logos.

Wir haben in unserem Komponentenset Teaser und Bühnen, können die aber auch durch eine Zusammenstellung von Columns, Text, Images und Buttons simulieren. Das Problem ist, dass ein Teaser ganzheitlich verlinkt wird, wir hier aber alles, was geklickt werden soll, auch verlinken müssen. Nutzer*innen eines Screanreaders bekommen unter Umständen unterschiedlich beschriebene Links mit demselben Ziel vorgelesen. 

Wir sollten also darauf achten, nicht mehrere gleiche Links untereinander zu setzen, d.h. in solchen selbstgebastelten Teaserkonstrukten bspw. nur den Button zu verlinken und in Teasern den Button wegzulassen. 

Grundsätzlich gilt:

Sobald ein Bild verlinkt ist oder eine Aktion ausführt, muss der Link-Zweck bzw- die Aktion beschrieben werden und nicht das Bild. Die Beschreibung der interaktiven Funktion hat immer Vorrang.

Bei komplexen Grafiken, Diagrammen oder Infografiken kann eine längere Beschreibung erforderlich sein. In solchen Fällen sollte zusätzlich zum alt-Attribut eine „long description“ - also „lange Beschreibung“ - verwendet werden. In diesem Fall dient das alt-Attribut dazu, den Zweck des Bildes kurz darzustellen und auf die detaillierte Beschreibung hinzuweisen.

Ein Beispiel für das Alt-Attribut:

"Säulendiagramm, welches die monatlichen Zugriffszahlen auf deutsche-bank.de im 1. Quartal 2023 anzeigt."

Eine Long Description ist aktuell noch nicht einsetzbar; sobald das soweit ist, gibt es hier weitere Informationen.

Danach wird das Alt-Attribut sein:

"Säulendiagramm, welches die monatlichen Zugriffszahlen auf deutsche-bank.de im 1. Quartal 2023 anzeigt. Nachfolgend im Detail beschrieben."

QR-Codes behandeln wir wie verlinkte Bilder. Sie erhalten einen Alternativtext, in dem steht, dass es ein QR-Code ist und was passiert, wenn man dem QR-Code folgt:

"QR-Code, mit dem Sie die Kontaktdaten von Berater XY in Ihrem Telefon speichern können."

Nicht verpflichtend, aber für künftige QR-Codes überlegenswert sind Rahmen um die QR-Codes herum, die helfen, den QR-Code besser zu treffen. 

Und zusätzlich brauchen wir eine barrierefreie Textalternative oder einen Link zum QR-Ziel.

• Wir vermeiden  die Verwendung von Text auf Bildern, wenn es nicht unbedingt erforderlich ist. Stattdessen platzieren wir den Text direkt auf der Seite, damit er von Screenreadern erkannt und vorgelesen werden kann.
• Wenn wir dennoch Text auf Bildern verwenden müssen, stellen wir sicher, dass der Text ausreichend groß und kontrastreich ist, um für Menschen mit Sehbeeinträchtigungen gut lesbar zu sein. Es gelten die gleichen Kontrastanforderungen wie bei Text: 4,5:1 oder 3:1 bei großem Text.
• Wenn wir Text auf Bildern verwenden, stellen wir immer eine alternative Beschreibung (Alternativtext) bereit, die den Text auf dem Bild 1 zu 1 enthält.
• Bei umfangreichen Texten kann es schwierig werden, den Text auf dem Bild 1 zu 1 im Alternativtext zu schreiben (Beispiel Testsiegel). Hier sollte dann ein guter Kompromiss aus dem vollständigen Text und einem kurzen und prägnanten Alternativtext gebildet werden.