English
Überschriften, Bilder & Medien

Alt-Text (Alt-Attribut)

Auch genannt: Alt-Attribut, Alternativtext, Alt-Tag

Der Alt-Text (Alternativtext) ist eine kurze Beschreibung eines Bildes, die im HTML im alt-Attribut des img-Elements steht. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn das Bild nicht lädt, und Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen.

Auf einen Blick

Art
HTML-Attribut alt am img-Element
Wirkt auf
Screenreader, Google Bilder, Ankertext bei Bild-Links
Barrierefreiheit
WCAG 2.2, Erfolgskriterium 1.1.1 (Stufe A)
Dekorative Bilder
alt="" (leer)
Doku
Google: Best Practices für die SEO bei Google Bilder

Stand:

Wozu dient der Alt-Text?

Barrierefreiheit: Das WCAG-Erfolgskriterium 1.1.1 (Stufe A) verlangt für jeden Nicht-Text-Inhalt eine Textalternative, die denselben Zweck erfüllt. Rein dekorative Bilder sollen so eingebunden werden, dass Hilfstechnologien sie überspringen können.

Fallback: Lädt ein Bild nicht, etwa wegen eines Netzwerkfehlers, zeigt der Browser den Alt-Text an.

SEO: Google bezeichnet das alt-Attribut als wichtigstes Attribut für zusätzliche Bild-Metadaten. Google wertet es zusammen mit Computer-Vision-Verfahren und dem Seiteninhalt aus. Ist ein Bild verlinkt, verwendet Google den Alt-Text als Ankertext des Links. Bilder, die nur per CSS eingebunden sind, indexiert Google nicht. Wer in der Bildersuche gefunden werden will, braucht also ein img-Element.

Die verbreitete Bezeichnung „Alt-Tag“ ist technisch ungenau. alt ist ein Attribut des img-Elements.

Beispiel

HTML
<!-- Informatives Bild -->
<img src="lastenrad-rot.jpg"
     alt="Rotes Longtail-Lastenrad mit zwei Kindersitzen vor einer Hauswand">

<!-- Dekoratives Bild: alt bleibt leer -->
<img src="welle-trenner.svg" alt="">

<!-- Bild als Link: alt beschreibt das Ziel -->
<a href="/warenkorb/">
  <img src="icon-warenkorb.svg" alt="Warenkorb öffnen">
</a>

Häufige Fehler

  • Fehlendes alt-Attribut. Manche Screenreader lesen dann den Dateinamen vor (laut MDN und WebAIM).
  • Keyword-Stuffing. Google warnt ausdrücklich vor Alt-Texten, die mit Keywords vollgestopft sind. Das schadet der Nutzererfahrung und kann als Spam gewertet werden.
  • Beschreibung bei Dekoration. Für Schmuckgrafiken ist alt="" richtig, sonst hören Screenreader-Nutzer unnötige Ansagen.
  • Leerer Alt-Text bei Bild-Links. Der Link hat dann keinen zugänglichen Namen und für Google keinen Ankertext.

Häufige Fragen

Was ist ein guter Alt-Text? Er beschreibt, was das Bild im jeweiligen Zusammenhang aussagt, so knapp wie möglich und so ausführlich wie nötig. Bei Links oder Buttons beschreibt er die Funktion, bei Produktfotos die sichtbaren Merkmale.

Wie lang darf ein Alt-Text sein? HTML und WCAG 1.1.1 nennen keine feste Höchstlänge. WebAIM schreibt, meist reichten wenige Wörter, in seltenen Fällen ein bis zwei kurze Sätze. Für komplexe Grafiken wie Diagramme gehört die ausführliche Erklärung in den Fließtext oder eine verlinkte Beschreibung.

Muss jedes Bild einen Alt-Text haben? Jedes img-Element braucht ein alt-Attribut. Bei rein dekorativen Bildern bleibt es leer (alt="").

Quellen

  1. Best Practices für die SEO bei Google Bilder – Google Search Central (Stand 04.03.2026)developers.google.com
  2. Links crawlbar machen – Google Search Centraldevelopers.google.com
  3. Understanding Success Criterion 1.1.1: Non-text Content – W3C WCAG 2.2w3.org
  4. Decorative Images – W3C WAI Images Tutorialw3.org
  5. <img>: Das Bild-Einbettungselement – MDNdeveloper.mozilla.org
  6. Alternative Text – WebAIM (Zweitquelle)webaim.org

Stand: