15. Accessible Images: providing effective alt text for images

Ein Bild sagt mehr als 1000 Worte ...

Was ist ein alt-Text?

Der alt-Text ist ein Text, der ein Bild für Besucher, die nicht sehen können, so beschreibt, dass sie dessen Zweck verstehen können. Der Wert eines alt-Textes bzw. die Wirksamkeit hängt davon ab, wie gut der Zweck des Bildes kommuniziert wird.

Warum sind alt-Texte wichtig/nützlich?

User interface components brauchen einen accName, um einer AT ihren Zweck zu kommunizieren, Bilder brauchen dafür einen alt-Text (der von AT als accName verwendet wird).

Verwendung von alt-Texten:

• von Menschen ohne oder mit schwachem Sehvermögen, die Screenreader oder andere Text-to-speech Technologien verwenden und von
• Menschen, die Spracherkennung benutzen: falls ein Bild nicht geladen wird, können sie mit dem alt-Text die Aktion triggern, die das Bild eventuell repräsentiert.
• alt-Text ist außerdem nützlich für SEO. Suchmaschinen können Bilder mit alt-Text besser indizieren.
• User mit langsamer Internetverbindung, User, die Bilder deaktiviert haben um Daten zu sparen oder wenn Bilder aus irgendeinem Grund nicht geladen werden können.

Das alt-Attribut

Das alt-Attribut funktioniert ausschließlich in Kombination mit dem <img>-Tag, selbst wenn einem generischen <div> ein role="img" zugewiesen wird. In diesem Fall müsste ein accName mit aria-label bzw. aria-labelledby vergeben werden.
In einem <picture>-Element nimmt der Browser das alt-Attribut des Fallback-<img>-Elements.

Arten von Bildern und deren alt-Text

Nicht alle Bilder kommunizieren Informationen. Wenn Bilder rein zu dekorativen Zwecken verwendet werden oder wenn ein Bild keine Aussage hat, die wesentlich für das Verständnis des umgebenden Textes ist, benötigt das Bild keinen alt-Text. Trotzdem müssen alle <img>-Elemente ein alt-Attribut haben! Fehlt es komplett, lesen manche Screenreader (z.B. VoiceOver) den Dateinamen aus dem src-Attribut vor.

1. unwesentliche/unnötige, nicht essentielle Bilder
2. Text als Bild
3. Komplexe Bilder
4. Funktionale Bilder
5. Informative Bilder

1. Unwesentliche bzw. unnötige Bilder

Bilder, die keine Information kommunizieren, die zum Verständnis der Seite beiträgt. Das alt-Attribut bleibt leer, das Bild wird vom Screenreader ignoriert.

• Dekorativ: Hintergrundbilder, Rahmen, visuelles Styling von Blogposts, ...
• Redundant: nicht dekorativ, trägt aber auch nicht zum Verständnis bei. Es ergänzt das, was zuvor schon im Text geschrieben wurde (bringt aber nichts neues dazu). Bsp: Icon-Buttons mit Bild und Text

/* dieses Bild wird vom Screenreader ignoriert */
<img src="/path/to/img.jpg" alt="">
/* dieses Bild wird vom Screenreader erkannt, aber ohne sinnvollen alt-Text vorgelesen */
<img src="/path/to/img.jpg" alt=" ">

/* diese Beispiele sind äquivalent und sie verstecken ein Bild vor dem Screenreader */
<img src="/path/to/img.jpg" alt="">
<img src="/path/to/img.jpg" alt>
<img src="/path/to/img.jpg" alt="[ img description ]" role="none">
<img src="/path/to/img.jpg" alt="[ img description ]" aria-hidden="true">

Es ist natürlich möglich, einem redundanten Bild einen alt-Text mitzugeben. Dann sollte aber nicht der begleitende Text im alt-Text wiederholt werden, sondern eine andere, sinnvolle Beschreibung des Bildes.
Beispiel: eine Grafik visualisiert Werte, die im Text detailliert beschrieben sind. Der alt-Text könnte dann lauten: Grafik, die die Werte aus dem Text darstellt.
Es kommt immer auf den Kontext an ... wenn es sinnvoll ist, dem User mitzuteilen, dass ein Bild auf der Seite ist, sollte man es tun.

Zwei Arten von Bildern kommunizieren essentiellen Textinhalt:

2. Text als Bild

Ein Text, der als Bild dargestellt wird, ist ein essentieller Teil der Seite. In diesem Fall muss der alt-Text exakt denselben Text enthalten wie das Bild. Das ist eines der wenigen Beispiele, in denen alt-Texte lang sein können/müssen. Sollte aber generell vermieden werden! Auch User, die ihre Schrift nur anpassen (Größe, Kontrast, Zeilenabstand, Alignment) oder auch User mit kongitiven Beeinträchtigungen, die das Lesen beeinflussen, haben mit so einer Grafik Probleme. Echter Text ist flexibel anpassbar und zugänglich.

3. Komplexe Bilder

Grafiken, Diagramme, Infografiken, Abbildungen von Karten etc. enthalten viel mehr Information, als in einem kurzen alt-Text untergebracht werden kann. Wenn die Abbildung so komplex ist, muss der alt-Text ergänzt werden:

• mit einer erweiterten Beschreibung des Bildinhaltes
• mit einer alternativen Präsentation des Bildinhaltes

Welche davon sinnvoll ist, hängt davon ab, ob die Beschreibung strukturiert sein muss, oder ob flat Text ausreicht.

Bsp. Khan Academy 2018 annual report:
Ein SVG wird als Objekt eingebettet, im <object>-Element kann ein Fallback-Text eingebunden werden, der dargestellt wird, wenn das SVG nicht geladen werden kann – und dieser Fallbacktext kann gleichzeitig mit aria-describedby als ausführliche Bildbeschreibung verwendet werden. Zwei Fliegen mit einer Klappe. (Feed to birds with one scone.) ABER: das <object>-Element wird nicht als Bild erkannt! Es braucht role="img" und aria-labelledby und aria-describedby.

Weitere Möglichkeiten zur Beschreibung komplexer Bilder:

• <details> und <summary>: Das <img>-Element wird dabei im <summary>-Element untergebracht.
• <figure>-Element zusammen mit <figcaption>
• Noch mehr Möglichkeiten im W3C-Tutorial: WAI Tutorials – Images

4. Funktionale Bilder (mach was)

Funktionale Bilder tun nicht wirklich etwas in dem Sinn, dass sie interaktiv wären. Sie werden üblicherweise als Labels für interaktive Elemente wie Icon-Buttons und Links verwendet, siehe auch accessible Icon Buttons.
(Grundsätzlich sollten SVG-Grafiken für diesen Einsatzzweck bevorzugt werden, da sie besser anpassbar sind, z.B. für den FCM.)
Der alt-Text eines funktionalen Bildes soll die Funktion beschreiben, die das Bild repäsentiert, nicht das Bild selbst:

• Bilder in Links: sollen das Linkziel beschreiben, nicht den Bildinhalt. Der Text innerhalb des Links wird dabei mit dem alt-Text verknüpft (siehe Codebeispiel 1 unten). Wenn ein Icon neben einem Text steht, der das Linkziel bereits beschreibt, dann ist das Bild redundant und ein alt-Text überflüssig (siehe Codebeispiel 2 unten).
• Bilder in Buttons: sollen beschreiben, was der Button auslöst (siehe Codebeispiel 3 unten)

<!-- The accName of this link is:
"How to meet WCAG Quick Reference, Opens in a new window" -->
<!-- In diesem Fall enthält das Bild eine relevante Information, die dem User kommuniziert werden soll. -->

<a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank">
How to meet WCAG Quick Reference
<img src="/path/to/window-icon-svg" alt="Opens in a new window">
</a>

<a href="https://twitter.com/SaraSoueidan">
<img src="/path/to/twitter-icon.png" alt="">
Follow me on Twitter
</a>

<!-- do this -->
<img src="/path/to/magnifier-icon.svg" alt="Search">
<!-- not this -->
<img src="/path/to/magnifier-icon.svg" alt="magnifier">

<!-- do this -->
<img src="/path/to/printer-icon.svg" alt="Print">
<!-- not this -->
<img src="/path/to/printer-icon.svg" alt="printer">

5. Informative Bilder

Informative Bilder sind Bilder, die Information kommunizieren, die essentiell oder nützlich ist, um den Inhalt der Seite zu verstehen. Der alt-Text soll beschreiben, was das Bild enthält. Diese Information ist immer abhängig vom Kontext, in dem das Bild verwendet wird.

Best practices für effektive alt-Texte

1. Beschreibe das Bild so, wie du einer Person am Telefon das Bild beschreiben würdest, ohne zu erwähnen, dass es um ein Bild geht. Das ist typischerweise ein guter Start für alt-Texte.
2. Halte den Text kurz und präzise - so kurz wie möglich, so lang wie nötig. Es gibt keine Zeichenbegrenzung dafür. (Achtung: JAWS splittet in 125-Buchstaben-Teile).
3. Mach einen Punkt am Ende des alt-Textes. Der Screenreader macht dann eine Pause.
4. Erwähne nicht, dass es ein Bild ist, außer es ist ein ganz spezieller Typ, die Information also relevant (Skizze, Illustration, Aquarellbild, ...)
5. Kontext ist wichtig: immer fragen, was will ich damit ausdrücken? Was ist im jeweiligen Kontext wirklich bedeutsam? Warum wird ausgerechnet dieses Bild verwendet, um etwas zu kommunizieren? Die Antwort auf diese Frage ist auch ein guter Hinweis auf einen passenden alt-Text. Ein Bild kann immer ausführlich beschrieben werden, aber man sollte sich auf das beschränken, was im Kontext wichtig ist.
6. Emotion matters. Emotion ist wichtig und soll transportiert werden. In diesem Sinn sind manche Bilder, von denen man denkt, sie sind nur dekorativ, gar nicht wirklich "nur" dekorativ.
7. Nicht den Dateinamen im alt-Text verwenden: das ist nicht der Zweck des Bildes! Btw wenn das alt-Attribut weggelassen wird, dann lesen manche Screenreader den Dateinamen vor, den sie aus dem src-Attribut herauslesen.
8. Verwende niemals das title-Attribut: erstens ist das title-Attribut kein adäquater Ersatz für das alt-Attribut (wenn Bilder nicht geladen werden können oder deaktiviert sind), und zweitens – wenn das Bild geladen wird – werden beide Texte vorgelesen. Wenn beides vorhanden ist, sollte der Titel als Description verwendet werden, dieses Verhalten ist aber nicht konsistent implementiert.
9. Verwende nicht das alt-Attribut für Image Credits oder Copyright-Hinweise: in den Text packen oder <figcaption> verwenden. <figcaption> und alt sind nicht dasselbe: <figcaption> ist editorial oder illustrativ, ergänzende Erklärung zum Inhalt von <figure> (z.B.: Dieses Foto habe ich an einem kalten Novembertag aufgenommen.).

Alt-Texte manuell testen

Bilder mit der Web-Developer-Extension deaktivieren und mit alt-Attributen ersetzen (siehe Prüfdokument: Wie teste ich ...).

AI??? No.

AI kann keine aussagekräftige Bildbeschreibung machen, die mit einer menschlichen Beschreibung vergleichbar wäre. AI kennt keinen Zweck, keine Emotion. AI kann den Bildinhalt beschreiben, aber sie weiß nicht, warum genau gerade dieses Bild verwendet wird (siehe auch Artikel von Adrian Roselli).

alt-Text matters!