Alt-Text-Checker
Blenden Sie das Bild aus
Was ohne Bild bleibt, ist der Alt-Text. Zwei Regeln prüfen ihn.
Bildzweck vor Wortwahl
Vier Bilder unter derselben Prüflampe
Ein Alt-Text beschreibt nicht automatisch, was zu sehen ist. Er ersetzt die Aufgabe, die das Bild genau an dieser Stelle erfüllt.
Die Bildprobe: Sehen, Zweck bestimmen, Text einsetzen
Bild ist der ganze Link.
Funktion
Der Text nennt das Ziel des Links.
alt="Warenkorb öffnen"Merkmale entscheiden über den Kauf.
Information
Der Text nennt die sichtbaren, relevanten Merkmale.
alt="Rucksack mit Rollverschluss und seitlichem Flaschenfach"Keine neue Information.
Dekoration
Das Bild soll in der Sprachausgabe nicht auftauchen.
alt=""Die Details brauchen Text außerhalb des Bildes.
Komplexe Information
Kurz benennen; die vollständige Anleitung folgt als Text.
alt="Montage in drei Schritten; Anleitung folgt"- Platte an den Markierungen ausrichten.
- Schraube von oben einsetzen und festziehen.
- Abdeckung auf die Platte setzen.
Wo der Checker endet
Im HTML sichtbar
<img src="ornament.svg" alt="">- Ist das
alt-Attribut vorhanden? - Ist sein Wert leer oder gefüllt?
- Hat ein Bildlink einen zugänglichen Namen?
Nur im Seitenkontext erkennbar
- Ist das Bild wirklich nur Dekoration?
- Fehlt eine Information aus dem Bild im Text?
- Passt die Wortwahl zum Zweck an dieser Stelle?
Ein leeres alt="" kann genau richtig oder ein Informationsverlust sein. Der Quelltext sieht in beiden Fällen gleich aus; die Entscheidung braucht den Inhalt.
Alle Bilder auf einer Seite sichtbar machen
Öffnen Sie die Browserkonsole. Die erste Zeile findet fehlende Attribute. Die zweite stellt Quelle und Alt-Wert nebeneinander. Prüfen Sie anschließend jedes Ergebnis an seiner sichtbaren Stelle auf der Seite.
document.querySelectorAll('img:not([alt])')
[...document.images].map((img) => ({
src: img.currentSrc,
alt: img.getAttribute('alt')
}))Quellen für die Entscheidung
Der Alt-Entscheidungsbaum der W3C WAI führt vom Bildzweck zum passenden Wert. Das WAI-Tutorial zu Bildern trennt informative, funktionale, dekorative und komplexe Bilder. Für umfangreiche Grafiken zeigt die WAI Verfahren für Kurztext und vollständige Beschreibung.
Aus dem Prüfbericht
Zwei Regeln, fünf Bilder
Kritisch Das Bild hat kein alt Regel image-alt
Ohne alt liest ein Vorleseprogramm den Dateinamen. Der Checker findet das Attribut, den passenden Text finden Sie.
Kritisch Der Bildlink hat keinen Namen Regel link-name
Ein Link, dessen einziger Inhalt ein Bild mit alt="" ist, hat keinen Namen. Der Alt-Text nennt das Ziel.
Zum Mitnehmen
Die Bilder, korrigiert
Vier Bildzwecke, vier Alt-Texte. Der Checker zeigt die Stelle.
Korrektur in 2 Schritten ansehen
Logo-Link und Foto beschriften
Im Link nennt alt das Ziel. Beim Foto nennt alt, was zu sehen ist.
KorrekturvergleichSchritt 1 · HTML Vorher
<a href="/"><img src="logo.svg" alt=""></a> <img src="IMG_4821.jpg">Nachher
<a href="/"><img src="logo.svg" alt="Rösterei Nordlicht, Startseite"></a> <img src="IMG_4821.jpg" alt="Drei Sorten Bohnen im Röstvergleich">Markierte Zeilen wurden geändert
So prüfen Sie es Deaktivieren Sie Bilder im Browser. Statt der Bilder stehen die Alt-Texte.
Dekoration leer beschriften, Diagramme benennen
alt="" überspringt Zierbilder. Ein Diagramm nennt seine Aussage, die Details stehen im Text daneben.
KorrekturvergleichSchritt 2 · HTML Vorher
<img src="ornament.svg" alt="Geschwungene Linie"> <img src="chart.png" alt="chart.png">Nachher
<img src="ornament.svg" alt=""> <img src="chart.png" alt="Absatz 2024 bis 2026, jedes Jahr höher">Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm überspringt die Linie und sagt beim Diagramm die Aussage.