Alt-Text im HTML
Ohne Bild bleibt nur der Text
Vier Bildrollen, vier Alt-Texte. Der Dateiname ist keiner davon.
Eine Datei, drei Aufgaben
Der Kontext schreibt den Alt-Text
Dasselbe Bienenfoto kann Information, Schmuck oder Link sein. Sehen Sie zuerst auf seine Aufgabe in der Seite. Erst dann schreiben Sie alt.
mauerbiene.jpg
Die Pixel ändern sich nicht. Was Menschen ohne das Bild brauchen, ändert sich mit dem Text und der Funktion ringsum.
Arten bestimmen
Die zwei Hörnchen am Kopf helfen bei der Bestimmung.
Informativ
Das Bild ergänzt ein Merkmal
Was fehlt, wenn das Bild weg ist?
Die sichtbaren Fortsätze. Genau diese Information gehört in den Alt-Text.
<img
src="/bilder/mauerbiene.jpg"
width="960"
height="600"
alt="Rostrote Mauerbiene mit zwei
hornartigen Fortsätzen am Kopf">Ansage: „Grafik, Rostrote Mauerbiene mit zwei hornartigen Fortsätzen am Kopf“
Gärtnern in der Stadt
Pflanzen Sie heimische Blüten für Wildbienen.
Dekorativ
Der Text sagt schon alles
Fehlt ohne das Bild eine Aussage?
Nein. Das Foto schafft Stimmung. Ein weiterer Satz würde die Aussage wiederholen.
<img
src="/bilder/mauerbiene.jpg"
width="960"
height="600"
alt="">Ansage: keine. Das Bild wird übersprungen.
Artenverzeichnis
Nur das Foto führt zum vollständigen Artenporträt.
Verlinkt
Das Bild ist die ganze Aktion
Wohin führt ein Klick auf das Bild?
Zum Artenporträt. Der Alt-Text benennt deshalb das Ziel statt des Motivs.
<a href="/arten/rostrote-mauerbiene">
<img
src="/bilder/mauerbiene.jpg"
width="960"
height="600"
alt="Artenporträt Rostrote Mauerbiene">
</a>Ansage: „Artenporträt Rostrote Mauerbiene, Link“
Die entscheidende Frage
Welche Aufgabe übernimmt das Bild genau hier?
Es ergänzt WissenInhalt kurz beschreiben
Es ist die AktionZiel oder Funktion benennen
Es fügt nichts hinzualt="" setzen
Ein fehlendes alt-Attribut ist keine vierte Lösung. Programme können dann den Dateinamen oder die Bildadresse ansagen.
So prüfen Sie es
Lesen Sie die Seite einmal ohne Bild
- Bild abdecken. Bestimmen Sie, welche Information oder Aktion fehlt.
- Alt-Text einsetzen. Lesen Sie Absatz, Alt-Text und Linkziel am Stück.
- Wiederholung streichen. Bleibt nur Stimmung, verwenden Sie
alt="".
Verlässliche Vertiefung
Die Beispiele folgen dem Alt-Entscheidungsbaum des W3C. Details finden Sie bei informativen Bildern, dekorativen Bildern und funktionalen Bildern.
Aus dem Prüfbericht
Zwei Regeln, vier Bilder
Kritisch img ohne alt Regel image-alt
Ein Bild ohne alt-Attribut wird als Dateiname vorgelesen. Jedes img braucht alt, auch ein leeres.
Kritisch Ein Bildlink ohne Namen Regel link-name
Ist das Bild der ganze Link, ist sein Alt-Text der Linktext. Er nennt das Ziel, nicht das Motiv.
Zum Mitnehmen
Die vier Bilder, korrigiert
Funktional, informativ, dekorativ, komplex: jede Rolle hat ihren Alt-Text.
Korrektur in 2 Schritten ansehen
Funktionales und informatives Bild beschriften
Im Link nennt alt das Ziel. Im Fließtext nennt alt, was das Foto zum Text beiträgt.
KorrekturvergleichSchritt 1 · HTML Vorher
<a href="/"><img src="logo.svg"></a> <img src="IMG_4821.jpg">Nachher
<a href="/"><img src="logo.svg" alt="Imkerei Sommerfeld, zur Startseite"></a> <img src="IMG_4821.jpg" alt="Honig fließt aus der Schleuder ins Glas">Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Imkerei Sommerfeld, zur Startseite, Link“ und dann den Fototext.
Dekoration überspringen, Diagramm zusammenfassen
alt="" lässt das Vorleseprogramm die Zierlinie auslassen. Das Diagramm nennt seine Kernaussage.
KorrekturvergleichSchritt 2 · HTML Vorher
<img src="ornament.svg" alt="Ornament"> <img src="ernte.png" alt="Diagramm">Nachher
<img src="ornament.svg" alt=""> <img src="ernte.png" alt="Ernte 2024 bis 2026: von 180 auf 260 Kilogramm">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder aus. Die Zierlinie verschwindet ohne Ersatz, das Diagramm hinterlässt seinen Satz.