img alt im HTML
Der Alt-Text folgt dem Bildzweck
Beitragsbild, Zierlinie, Bildlink: drei Verwendungen, drei alt-Werte.
Bild ersetzen, Sinn behalten
Schreiben Sie alt für den Kontext, nicht für die Datei
Derselbe Bildinhalt braucht je nach Aufgabe einen anderen Ersatz im HTML.
Die Honigernte im Überblick
Die Abfüllung ist abgeschlossen. Das Foto ergänzt, wie das Ergebnis bereitsteht.
01 Bild sichtbar
Abgefüllte Gläser zeigen das konkrete Ergebnis.
02 Bild ersetzt
Sechs abgefüllte Honiggläser stehen in zwei Reihen auf einem Regal.
Zusammen gelesen: Die Abfüllung ist abgeschlossen. Sechs abgefüllte Honiggläser stehen in zwei Reihen auf einem Regal.
<img src="honigernte-2026.jpg"
alt="Sechs abgefüllte Honiggläser stehen in zwei Reihen auf einem Regal."
width="1200" height="800">Drei Schreibweisen, drei Aussagen
Leer und fehlend sind im HTML nicht dasselbe.
alt="Sechs Honiggläser …"Ersatz vorhandenDas Bild trägt Bedeutung; der Text übernimmt diese Aufgabe.
alt=""Bewusst überspringenDas Bild ist dekorativ oder wiederholt bereits sichtbaren Text.
<img src="glas.jpg">Information fehltDer Browser oder ein Screenreader kann stattdessen den Dateinamen melden.
Vier Bildaufgaben im direkten Vergleich
Fragen Sie zuerst, was das Bild an genau dieser Stelle leistet. Daraus folgt der Wert von alt.
Das Bild ergänzt eine Nachricht
Beschreiben Sie den Beitrag des Bildes knapp. „Bild von“ ist unnötig; das Ausgabegerät nennt die Rolle bereits.
alt="Zwei Helfer tragen gemeinsam eine Holzkiste"Die Ziergrafik ändert keine Aussage
Wenn Entfernen weder Bedeutung noch Bedienung ändert, kennzeichnet ein vorhandenes, leeres Attribut die bewusste Entscheidung.
alt=""Das Bild ist der ganze Link
Benennen Sie Ziel oder Aktion, nicht das Motiv. So wird der Alt-Text zum verständlichen Linknamen.
alt="Zum Kontaktformular"Das Diagramm braucht Details daneben
Ein kurzer Alt-Text identifiziert die Grafik. Die vollständigen Stationen stehen als echter Text direkt im Dokument.
alt="Ablauf von Auftrag bis Korrektur"Textalternative: Auftrag festlegen → Seiten prüfen → Befunde im Code korrigieren.
picture wechselt die Datei, nicht die Bedeutung
Die Quellen wählen Zuschnitt oder Format. Das eine img trägt den Ersatztext für alle Varianten.
<picture>
<source media="(min-width: 60rem)" srcset="imkerin-breit.webp">
<source media="(min-width: 36rem)" srcset="imkerin-quadrat.webp">
<img src="imkerin-hoch.jpg"
alt="Imkerin prüft eine Honigwabe auf verdeckelte Zellen"
width="800" height="1000">
</picture>Prüfen Sie jeden Zuschnitt gegen denselben Satz. Verschwindet ein genanntes Detail, passen Sie die Bildauswahl an; source hat kein eigenes alt.
Aus dem Prüfbericht
Zwei Regeln am img-Element
Kritisch img ohne alt-Attribut Regel image-alt
Fehlt alt im HTML, kann ein Vorleseprogramm den Dateinamen vorlesen. Jedes img braucht ein alt, auch ein leeres für Dekoration.
Kritisch Ein img als ganzer Link Regel link-name
Umschließt ein a nur ein img, wird dessen alt zum Linktext. Er nennt im HTML das Ziel des Links.
Zum Mitnehmen
Die Bildalternativen, korrigiert
Ein Attribut, drei Werte: ein Satz, leer, das Ziel.
Korrektur in 3 Schritten ansehen
Informatives Bild beschreiben
Der Alt-Text sagt, was das Bild zum Text beiträgt, nicht wie es gestaltet ist.
KorrekturvergleichSchritt 1 · HTML Vorher
<img src="ernte-2026.jpg">Nachher
<img src="ernte-2026.jpg" alt="Ernte 2026: 260 Kilogramm Honig in Gläsern">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie die Bilder aus. Bleibt der Sinn des Absatzes erhalten, passt der Text.
Dekoration leer lassen
Ein leeres alt sagt dem Vorleseprogramm, dass es die Zierlinie überspringen darf. Ein fehlendes Attribut tut das nicht.
KorrekturvergleichSchritt 2 · HTML Vorher
<img src="trennlinie.svg" alt="Trennlinie">Nachher
<img src="trennlinie.svg" alt="">Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt an dieser Stelle weder Motiv noch Dateiname.
Bildlink nach seinem Ziel benennen
Ist das Bild der ganze Link, tritt sein Alt-Text an die Stelle des Linktexts.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="/kontakt"><img src="brief.svg" alt="Briefumschlag"></a>Nachher
<a href="/kontakt"><img src="brief.svg" alt="Zum Kontaktformular"></a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Der Eintrag heißt „Zum Kontaktformular“.