Image Alt Checker
Jedes Bild an seinem Zweck prüfen
Bild, Bildlink, Bildrolle, Bildtaster: vier Stellen für einen Alt-Text.
Prüflabor für Bilder
Der Checker findet Namen. Sie prüfen Bedeutung.
Vier Bildarten, vier sichere technische Befunde. Ein grünes Ergebnis sagt noch nicht, ob der Text zum Bild und zu seiner Aufgabe passt.
Regel: image-alt
Inhaltsbild ohne alt
<img src="honig.jpg">×Fund Name fehlt.
Danach klären: Welche Information ergänzt das Foto?
Regel: link-name
Bild ist der ganze Link
<a href="/"><img src="logo.svg"></a>×Fund Linkname fehlt.
Danach klären: Welches Ziel muss der Alt-Text nennen?
Regel: role-img-alt
Bildrolle ohne Namen
<div role="img">…</div>×Fund Zugänglicher Name fehlt.
Danach klären: Ist das Element wirklich eine Grafik?
Regel: input-image-alt
Bildtaster ohne Namen
<input type="image" src="senden.svg">×Fund Aktion hat keinen Namen.
Danach klären: Was löst der Taster aus?
Automatisch belegbar
Struktur und berechneter Name
01Element erkanntimg · Link · role · input
02Namensquelle erkanntalt · aria-label · aria-labelledby
03Name nicht leertechnischer Pass möglich
Von Menschen zu beurteilen
Aufgabe, Kontext und Qualität
AIst das Bild informativ?Oder wirklich nur Dekoration?
BTrifft der Text die Aussage?„Bild“ ist vorhanden, aber nutzlos.
CReicht ein kurzer Text?Diagramme brauchen oft Daten daneben.
Übergabe: Ein automatischer Pass grenzt die technische Prüfung ein. Die inhaltliche Freigabe folgt an der konkreten Seite.
Nach jedem Fund
Die Korrektur folgt der Bildfunktion
InformationBeitrag des Bildes kurz beschreibenalt="Honig fließt ins Glas"
Link oder TasterZiel oder Aktion benennenalt="Anfrage absenden"
DekorationBewusst aus der Ansage nehmenalt=""
Nur TextFalsche Bildrolle entfernen<div>Farbtafel …</div>
Lokale Bestandsaufnahme
Drei Bildarten in der Konsole auflisten
Dieses Snippet zeigt Kandidaten und vorhandene Namensattribute. Es bewertet den Inhalt nicht und ersetzt keinen vollständigen Checker.
const bilder = document.querySelectorAll(
'img, input[type="image"], [role="img"]'
);
console.table([...bilder].map((element) => ({
element: element.tagName.toLowerCase(),
alt: element.getAttribute('alt'),
label: element.getAttribute('aria-label'),
labelledby: element.getAttribute('aria-labelledby')
})));Prüfregeln zum Nachschlagen
Der W3C-Entscheidungsbaum für Alt-Texte ordnet Bilder nach ihrer Aufgabe. Die ACT-Regeln beschreiben die technischen Tests für Bilder mit zugänglichem Namen und Bildtaster. W3C erklärt außerdem die Grenzen automatischer Prüfwerkzeuge.
So prüfen Sie es
Vom Bericht zurück zum Bild
- Fundstelle öffnen. Prüfen Sie Element, Kontext und sichtbares Bild.
- Bild ausblenden. Benennen Sie, welche Information oder Aktion fehlt.
- Korrektur einsetzen. Nutzen Sie Beschreibung, Funktion oder leeres
alt. - Erneut prüfen. Der Befund muss weg sein; die Seite muss ohne Bild verständlich bleiben.
Aus dem Prüfbericht
Vier Bildrollen, vier Befunde
Kritisch Das Foto im Beitrag hat kein alt Regel image-alt
Beim Prüfen fällt zuerst das img ohne alt-Attribut auf. Vorgelesen wird dann der Dateiname. Jedes img braucht ein alt, auch ein leeres.
Kritisch Das Logo verlinkt ohne Namen Regel link-name
Ist das Bild der ganze Link, wird sein Alt-Text zum Linktext. Er nennt beim Prüfen das Ziel, nicht das Motiv.
Kritisch Die Textkarte gibt sich als Grafik aus Regel role-img-alt
Ein Element mit role="img" braucht einen zugewiesenen Namen. Enthält es nur Text, entfernen Sie die Bildrolle statt einen Namen zu erfinden.
Kritisch Der Bildtaster im Formular Regel input-image-alt
Ein input type="image" ohne alt sagt nicht, was es absendet. Das alt benennt beim Prüfen die Aktion des Tasters.
Zum Mitnehmen
Die vier Bilder, korrigiert
Vier Bildarten, vier Namensquellen. Das Layout bleibt, wie es ist.
Korrektur in 2 Schritten ansehen
Foto und Bildlink beschriften
Im Fließtext nennt alt, was das Foto beiträgt. Im Link nennt alt das Ziel, zu dem der Klick führt.
KorrekturvergleichSchritt 1 · HTML Vorher
<img src="IMG_4821.jpg"> <a href="/"><img src="logo.svg"></a>Nachher
<img src="IMG_4821.jpg" alt="Honig fließt aus der Schleuder ins Glas"> <a href="/"><img src="logo.svg" alt="Imkerei Sommerfeld, zur Startseite"></a>Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie die Bilder im Browser aus. Statt der Dateinamen stehen jetzt Texte da.
Bildrolle und Bildtaster korrigieren
Enthält die Karte nur Text, entfällt die Bildrolle. Der Bildtaster erhält mit alt den Namen seiner Aktion.
KorrekturvergleichSchritt 2 · HTML Vorher
<div role="img">Farbtafel des Splintholzes</div> <input type="image" src="senden.svg">Nachher
<div>Farbtafel des Splintholzes</div> <input type="image" src="senden.svg" alt="Anfrage absenden">Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste auf den Taster. Ein Vorleseprogramm sagt „Anfrage absenden, Schaltfläche“.