Alt-Attribut / Alt-Text (oft auch Alt-Tag bezeichnet)

· SEO-Tutorials

Beim Alt-Attribut (auch Alt-Text, umgangssprachlich oft „Alt-Tag“ genannt) handelt es sich um ein Attribut des <img>-Elements innerhalb eines HTML-Dokuments. Es stellt den Inhalt einer Grafik in Textform bereit – für alle, die das Bild nicht sehen können, und für Programme, die es nicht sehen.

So wird das Alt-Attribut geschrieben

Das Attribut steht direkt im <img>-Element, neben Quelle und Abmessungen:

<img src="/bilder/allianz-arena-abendlicht.jpg"
     width="800" height="500"
     alt="Ausverkaufte Allianz-Arena im Abendlicht, von außen fotografiert">

Zwei Dinge fallen daran auf. Erstens ist alt ein Attribut, kein eigenes Tag – die verbreitete Bezeichnung „Alt-Tag“ ist streng genommen falsch, auch wenn sie sich hartnäckig hält. Zweitens beschreibt der Text, was auf dem Bild zu sehen ist, und nicht, welcher Suchbegriff ranken soll. Genau darin liegt der Unterschied zwischen einem brauchbaren und einem nutzlosen Alt-Text.

Ein Gegenbeispiel, wie es sich in der Praxis leider häufig findet:

<!-- unbrauchbar -->
<img src="IMG_4711.jpg" alt="">
<img src="IMG_4712.jpg" alt="stadion münchen fußball arena tickets kaufen">

Der erste Fall lässt Menschen, die mit einem Screenreader arbeiten, mit dem Dateinamen allein. Der zweite ist eine Begriffsliste, die über das Bild nichts aussagt und die Google in seinen Richtlinien ausdrücklich als unerwünscht beschreibt.

Dekorative Bilder bekommen ein leeres Alt-Attribut

Ein Punkt, der regelmäßig übersehen wird: Nicht jedes Bild braucht eine Beschreibung. Trennlinien, Verlaufsgrafiken, dekorative Hintergrundmotive oder ein Icon, dessen Bedeutung ohnehin im danebenstehenden Text steht – solche Grafiken tragen keine Information. Sie bekommen ein leeres, aber vorhandenes Alt-Attribut:

<img src="/bilder/trennlinie.svg" alt="">

alt="" bedeutet für einen Screenreader: Hier ist ein Bild, es trägt nichts zum Inhalt bei, überspringe es. Fehlt das Attribut dagegen ganz, verhalten sich Screenreader anders und lesen im Zweifel den Dateinamen vor. Der Unterschied zwischen alt="" und gar keinem alt ist also erheblich, obwohl beide Varianten im Browser identisch aussehen.

Für Icons mit einer Funktion gilt das Gegenteil. Ein Lupensymbol in einem Suchbutton braucht einen Alt-Text, der die Funktion benennt („Suche starten“) und nicht das Motiv („Lupe“).

Barrierefreiheit ist seit dem BFSG kein Nice-to-have mehr

Lange galten Alt-Texte als Kür. Das hat sich geändert. Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), das die europäische Barrierefreiheitsrichtlinie umsetzt. Es nimmt unter anderem Anbieter von Online-Shops und digitalen Dienstleistungen im Endkundengeschäft in die Pflicht; für Kleinstunternehmen sieht das Gesetz Ausnahmen vor. Ob und in welchem Umfang die Anforderungen für ein konkretes Angebot greifen, ist eine juristische Frage und gehört entsprechend geprüft.

Technisch ist die Anforderung dagegen unstrittig. Der zugrunde liegende Standard EN 301 549 verweist auf die Web Content Accessibility Guidelines, deren Erfolgskriterium 1.1.1 für jeden Nicht-Text-Inhalt eine Textalternative verlangt. Ein Bild ohne sinnvolles alt ist damit kein Schönheitsfehler, sondern ein benennbarer Mangel.

Der praktische Nutzen bleibt derselbe wie immer: Wer mit einem Screenreader arbeitet, bekommt den Bildinhalt vorgelesen. Wer bei schlechter Verbindung unterwegs ist und die Grafik nicht geladen bekommt, sieht wenigstens den Text. Und wer die Textsuche des Browsers benutzt, findet auch das Bild.

Alt-Attribut, Title-Attribut, Bildunterschrift

Diese drei werden gern verwechselt.

Das Alt-Attribut ist die Textalternative. Es ersetzt das Bild, wenn das Bild nicht ankommt.

Das Title-Attribut erzeugt einen Tooltip, der erscheint, wenn der Mauszeiger einige Sekunden über der Grafik verweilt. Auf Touchgeräten passiert dabei gar nichts, und viele Screenreader ignorieren es. Es taugt deshalb höchstens für eine ergänzende Randbemerkung, nie für Information, die jemand tatsächlich braucht. Häufig tragen beide Attribute denselben Inhalt – das ist erlaubt, bringt aber nichts.

Das longdesc-Attribut, früher für ausführliche Bildbeschreibungen vorgesehen, ist in HTML5 veraltet und wird von Browsern wie Hilfsmitteln praktisch nicht mehr unterstützt. Braucht ein Bild eine längere Erklärung – ein Organigramm, ein Diagramm, eine Karte –, gehört diese heute in den sichtbaren Seiteninhalt:

<figure>
  <img src="/bilder/umsatzverteilung.png"
       alt="Balkendiagramm der Umsatzverteilung nach Vertriebskanal">
  <figcaption>
    Der stationäre Handel liegt vor dem eigenen Shop, Marktplätze folgen
    auf Platz drei.
  </figcaption>
</figure>

Das hat den angenehmen Nebeneffekt, dass die Erklärung allen zugutekommt und nicht nur denen, die ein bestimmtes Hilfsmittel benutzen.

Was der Alt-Text für die Suchmaschinenoptimierung leistet

Die klassische Begründung lautete jahrelang, Suchmaschinen könnten Bildinhalte nicht interpretieren. Das stimmt so nicht mehr. Bildklassifikation ist inzwischen Standardtechnik, und Google sieht einem Foto durchaus an, dass ein Stadion darauf ist.

Was ein Algorithmus einem Bild nicht ansieht, ist seine Bedeutung im Kontext dieser Seite. Ob das Stadionfoto eine Reportage über ein Spiel illustriert, einen Artikel über Beleuchtungstechnik oder ein Angebot für Stadionführungen, steht nicht im Bild. Genau dafür ist der Alt-Text da, und deshalb bleibt er relevant.

Google beschreibt in seiner Dokumentation zur Bildersuche den Alt-Text als eines der Signale, über die sich der Inhalt einer Grafik erschließt – neben dem Dateinamen, dem umgebenden Text und der Seite, auf der das Bild eingebunden ist. Ein Bild, das in der Bildersuche gefunden wird, ist ein eigener Einstiegspunkt in die Website.

Sinnvoll ist außerdem, Bilder in die XML-Sitemap aufzunehmen oder eine eigene Bilder-Sitemap zu pflegen, wenn Bilder für das Angebot eine Rolle spielen – etwa in einem Shop mit vielen Produktfotos. Beim Format lohnt der Blick auf die Ladezeiten der Seite: WebP und AVIF liefern bei vergleichbarer Qualität deutlich kleinere Dateien als JPEG.

Häufige Fehler

  • Kein Alt-Attribut vorhanden. Der häufigste Fall, meist weil das Redaktionssystem das Feld nicht verlangt.
  • Der Alt-Text ist der Dateiname. alt="IMG_4711.jpg" ist genauso nutzlos wie gar nichts.
  • Keyword-Stuffing. Eine kommagetrennte Begriffsliste im Alt-Attribut hilft niemandem und verstößt gegen Googles Richtlinien.
  • Dekorative Bilder mit Beschreibung. Wer jede Trennlinie beschreibt, macht die Seite für Screenreader-Nutzer unbenutzbar.
  • Verlinkte Bilder beschreiben das Motiv statt das Ziel. Steckt das Bild in einem Link und gibt es keinen weiteren Linktext, muss der Alt-Text sagen, wohin der Link führt.
  • Text als Grafik. Eine Grafik, die nur aus Schrift besteht, gehört als echter Text ins HTML-Dokument – nicht als Bild, dessen Inhalt im Alt-Attribut nachgereicht wird.

Wie Überschriften einen Text gliedern und was ein sauberes Title-Tag leistet, greifen die beiden verwandten Tutorials auf. Wenn Sie den Bestand einer gewachsenen Website systematisch prüfen lassen möchten, gehört das zum technischen Teil der Suchmaschinenoptimierung.