Das alt-Attribut bietet eine Textalternative, die den Inhalt oder die Funktion eines Bildes beschreibt. Es dient Benutzer:innen und Werkzeugen, die das Bild nicht sehen können.
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
Das alt-Attribut bietet eine Textalternative, die den Inhalt oder die Funktion eines Bildes beschreibt. Es dient Benutzer:innen und Werkzeugen, die das Bild nicht sehen können.
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt-Text laut vor, damit ein blinder Benutzer weiß, was das Bild vermittelt. Ohne ihn hört man nur den Dateinamen oder einfach "Bild" — nutzlos.alt-Text statt eines kaputten Bildsymbols an.alt zum Verständnis und zur Indizierung von Bildern (Bild-SEO).<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
alt="" (leer, aber vorhanden) ist wichtig: Es teilt Screenreadern mit: "Das ist dekorativ, ignorieren Sie es." alt ganz wegzulassen ist etwas anderes — dann kann der Reader möglicherweise den Dateinamen ankündigen.
alt ist das wichtigste Zugänglichkeitsattribut für Bilder und eine gesetzliche Anforderung gemäß Barrierefreiheitsstandards (WCAG).
Es macht Inhalte für sehbehinderte Benutzer:innen wahrnehmbar, bietet einen Fallback, wenn Bilder beschädigt sind, und hilft bei der SEO — beschreiben Sie, was das Bild im Kontext bedeutet, und verwenden Sie alt="" für rein dekorative Bilder.