Alt-Text

Kurzdefinition

Alt-Text ist die Textalternative im alt-Attribut eines Bildes. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn die Datei nicht lädt, und Suchmaschinen lesen ihn als ausdrückliche Aussage darüber, was das Bild bedeutet.

Guter Alt-Text beantwortet eine Frage: Was trägt dieses Bild zu dieser Seite bei? Er ist keine Bildunterschrift, kein Dateiname und kein Platz für Keyword-Listen. Manchmal ist die richtige Antwort ein leeres Attribut, weil das Bild nichts sagt, was der umgebende Text nicht schon sagt.

Die drei Aufgaben von Alt-Text

Alt-Text bedient drei Zielgruppen gleichzeitig, und die stehen sich selten im Weg.

1. Menschen mit assistiver Technik. Eine blinde Nutzerin hört den Alt-Text anstelle des Bildes. Fehlt er, verpasst sie, was das Bild zeigen sollte, oder hört einen sinnlosen Dateinamen.
2. Alle, wenn das Bild ausfällt. Bei schwacher Verbindung, blockierten Bildern oder einem kaputten CDN-Pfad zeigt der Browser den Alt-Text dort, wo das Bild stehen sollte.
3. Suchmaschinen. Google nutzt Alt-Text zusammen mit dem Seiteninhalt und Bilderkennung, um ein Bild zu verstehen. Bei einem verlinkten Bild wirkt der Alt-Text ähnlich wie der Ankertext eines Textlinks.

Barrierefreiheit ist der eigentliche Zweck. WCAG 2.2 verlangt Textalternativen auf Stufe A (Erfolgskriterium 1.1.1), also auf der grundlegendsten Konformitätsstufe. Seit dem 28. Juni 2025 gilt in der EU außerdem der European Accessibility Act für bestimmte Produkte und Dienstleistungen, in Deutschland umgesetzt durch das Barrierefreiheitsstärkungsgesetz. Ob er für deine Website gilt, ist eine rechtliche Frage. Der SEO-Nutzen folgt daraus, dass du die Barrierefreiheit ernst nimmst.

Wo Alt-Text im HTML steht

Das Attribut gehört ins <img>-Element. Es gilt auch für Bild-Buttons mit <input type="image"> und für <area>-Elemente in Image Maps.

html<!-- Informatives Bild: alt beschreibt, was hier zählt -->
<img src="klicktiefe-diagramm.png" alt="Balkendiagramm: Die meisten Produktseiten liegen vier oder mehr Klicks von der Startseite entfernt">

<!-- Dekoratives Bild: leeres alt, Screenreader überspringen es -->
<img src="trennlinie-welle.svg" alt="">

<!-- Fehlendes alt: ein Fehler, keine Entscheidung -->
<img src="teamfoto.jpg">

Der Unterschied zwischen dem zweiten und dritten Beispiel ist wichtig. Ein leeres Attribut (alt="") sagt bewusst: Dieses Bild trägt keine Information. Ein fehlendes Attribut überlässt die Entscheidung dem Screenreader, und viele lesen dann den Dateinamen oder die URL vor. „teamfoto punkt jpg“ hilft niemandem.

Nach Zweck entscheiden, nicht nach Aussehen

Die Web Accessibility Initiative des W3C ordnet Bilder nach ihrer Funktion. Das ist der verlässlichste Weg zu gutem Alt-Text, denn dasselbe Bild kann an verschiedenen Stellen unterschiedlichen Text brauchen.

Informative Bilder

Fotos, Illustrationen und Screenshots mit Information brauchen eine kurze Beschreibung genau dieser Information. Beschreibe, was die Leserin mitnehmen soll, nicht jedes Pixel.

Funktionale Bilder

Ist ein Bild ein Link oder Button, beschreibst du die Aktion oder das Ziel. Eine Lupe im Suchbutton heißt „Suchen“, nicht „Lupe“. Ein Logo, das zur Startseite führt, braucht meist den Firmennamen oder „Startseite“.

Dekorative Bilder

Ornamente, Hintergrundtexturen und Stockfotos, die nur Stimmung erzeugen, bekommen alt="". Steht das Bild in einem Link, der schon sichtbaren Text hat, ist es oft ebenfalls überflüssig und darf leer bleiben.

Komplexe Bilder

Diagramme, Schaubilder und Karten enthalten mehr Information, als ein kurzer Alt-Text tragen kann. Gib ihnen einen knappen Alt-Text mit Bildtyp und Kernaussage und liefere die vollständigen Daten oder die Erklärung im Text daneben oder in einer Tabelle.

Bilder mit Text

Enthält ein Bild wichtige Wörter, gehören sie in den Alt-Text. Noch besser: Veröffentliche den Text als echtes HTML, wie es auch die WCAG wo immer möglich empfehlen.

Wie Google Alt-Text nutzt

Googles Dokumentation zur Bild-SEO ist hier deutlich. Alt-Text ist ein Signal unter mehreren. Google verwendet ihn zusammen mit dem Seiteninhalt und Computer Vision, um zu verstehen, was ein Bild zeigt. Er hilft auch, das Bild in der Google Bildersuche mit passenden Suchanfragen zu verbinden.

Daraus folgen drei Dinge.

• Alt-Text unterstützt das Verständnis und das Auffinden von Bildern. Er ist kein Hebel, der eine Seite allein in der Websuche nach oben schiebt.
• Bei verlinkten Bildern behandelt Google den Alt-Text als Ankertext. Ein Bildlink ohne Alt-Text gibt keinen beschreibenden Hinweis auf sein Ziel.
• Google warnt ausdrücklich davor, alt-Attribute mit Keywords zu füllen. Das verschlechtert die Nutzererfahrung und kann dazu führen, dass die Website als Spam eingestuft wird. Es ist dasselbe Problem wie bei vollgestopftem Fließtext (warum Wiederholung kein Qualitätssignal ist, erklärt der Eintrag zur Keyword-Dichte).

Moderne Bildmodelle erkennen Inhalte auch ohne Hilfe, und KI-Suchfunktionen arbeiten zunehmend direkt mit Bildern. Überflüssig wird Alt-Text dadurch nicht. Ein Modell sieht, dass ein Foto eine rote Jacke zeigt. Dass es genau das wasserdichte Modell ist, um das es auf deiner Seite geht, weiß es nur, wenn die Seite es sagt.

Wenn Bilder für deinen Traffic zählen, wirf in der Google Search Console im Leistungsbericht einen Blick auf den Suchtyp „Bild“. Dort siehst du, bei welchen Suchanfragen deine Bilder erscheinen und ob jemand klickt.

So schreibst du guten Alt-Text

Wenige Regeln decken die meisten Fälle ab.

• Schreib für diese Seite. Beschreibe die Rolle des Bildes im umgebenden Inhalt. Dasselbe Produktfoto braucht auf der Produktseite vielleicht „Vorderansicht des Rucksacks Modell S“, in einem Blogbeitrag über Verkaufszahlen dagegen „Unser meistverkaufter Rucksack“.
• Das Wichtigste zuerst. Screenreader lesen linear vor. Stell die zentrale Information an den Anfang.
• Konkret, wo es zählt. „Dalmatinerwelpe fängt einen Ball“ hilft mehr als „Hund“. Erfinde keine Details, die nicht sichtbar oder nicht relevant sind.
• Kein „Bild von“ oder „Foto von“. Screenreader kündigen ohnehin an, dass ein Bild folgt. Nenne das Medium nur, wenn es wichtig ist, etwa „Ölgemälde von“ oder „Screenshot von“.
• Bildunterschrift nicht wiederholen. Sagt eine sichtbare Bildunterschrift schon alles, darf der Alt-Text kürzer sein oder bei rein illustrierenden Bildern leer bleiben.
• Natürliche Sprache. Ein Keyword gehört nur hinein, wenn es das Bild tatsächlich beschreibt.

Wie lang darf Alt-Text sein?

Kein Standard legt eine Grenze fest. HTML, WCAG und Google verlangen nützlichen, knappen Text. Die oft zitierten 125 Zeichen sind eine Faustregel, keine Vorgabe. In der Praxis reicht meist ein Satz. Brauchst du einen ganzen Absatz, gehört die Information wahrscheinlich in den Seitentext, wo alle sie lesen können.

Schwacher und nützlicher Alt-Text: Beispiele

Präzision macht den Unterschied, nicht Länge.

Warum dasselbe Bild unterschiedlichen Alt-Text braucht

Viele Content-Management-Systeme speichern einen Alt-Text pro Datei in der Mediathek und setzen ihn überall ein, wo die Datei verwendet wird. Das ist bequem und eine leise Quelle für schlechten Alt-Text. Ein Teamfoto mit „Unser Support-Team beim Offsite 2026“ passt auf der Über-uns-Seite. Auf einer Karriereseite über Remote-Arbeit kann das Bild einen ganz anderen Zweck haben.

Behandle den Mediathek-Wert als Vorschlag und prüfe ihn im Kontext. In Galerien braucht jedes Bild eine eigene Beschreibung. Zehn Produktbilder, die alle nur den Produktnamen tragen, sagen einer Screenreader-Nutzerin nichts über die Unterschiede.

Alt-Text, title, Bildunterschrift, Dateiname und aria-label

Diese Begriffe werden oft verwechselt, dabei erledigen sie verschiedene Aufgaben.

• alt ist die Textalternative. Auf dieses Feld verlassen sich assistive Technik und Suchmaschinen.
• title erzeugt in vielen Browsern einen Tooltip beim Überfahren mit der Maus. Screenreader lesen ihn nicht verlässlich vor, als Ersatz für alt taugt er nicht.
• Bildunterschrift (<figcaption>) ist für alle sichtbar. Sie ergänzt Kontext, Quelle oder Einordnung und kann den Alt-Text sinnvoll ergänzen.
• Dateiname ist für Google ein schwacher Hinweis. trailschuh-oliv-seite.webp ist besser als IMG_4821.webp, ersetzt aber keinen Alt-Text.
• aria-label kann Elementen einen Namen geben, die kein <img> sind, etwa einem Inline-SVG mit role="img". Googles Bild-Dokumentation setzt auf <img> mit alt, also nutze dieses Muster für Bilder, die in der Suche auftauchen sollen.

Sonderfälle

CSS-Hintergrundbilder. Google indexiert Bilder nicht, die nur per CSS eingebunden sind, und sie können keinen Alt-Text tragen. Nutze sie für Dekoration und <img> für alles mit Bedeutung.

Inline-SVG. Ein bedeutungstragendes Inline-SVG bekommt role="img" und einen zugänglichen Namen über <title> oder aria-label. Dekorative SVGs versteckst du mit aria-hidden="true" vor assistiver Technik.

Per JavaScript eingefügte Bilder. Fügt ein Skript Bilder oder alt-Attribute erst nach dem Laden ein, zählt das gerenderte HTML. Prüfe es mit dem URL-Prüftool, und lies dich zu Server-Side Rendering ein, wenn wichtige Inhalte von clientseitigem Code abhängen.

Responsive Bilder. Ein alt gilt für alle srcset-Kandidaten. Zeigt <picture> auf dem Smartphone einen anderen Ausschnitt, prüfe, ob der Alt-Text zu jeder Version passt (mehr dazu unter Responsive Design).

KI-generierter Alt-Text. Mehrere CMS und Plugins schlagen inzwischen automatisch Alt-Texte vor. Behandle sie als Entwurf. Ein Modell beschreibt, was es sieht. Warum das Bild auf deiner Seite steht, weiß es nicht.

Alt-Text prüfen: der Ablauf

1. Crawle die Website und liste alle <img>, <input type="image"> und <area> auf, auf Basis des gerenderten HTML.
2. Trenne Bilder ohne alt-Attribut von Bildern mit alt="".
3. Behebe zuerst jedes fehlende Attribut. Jedes ist ein eindeutiger Fehler.
4. Prüfe die leeren Attribute stichprobenartig. Sind die Bilder wirklich dekorativ, gerade große Bilder weit oben auf der Seite?
5. Sieh dir ausgefüllten Alt-Text auf wichtigen Templates an: Produktseiten, Kategorien, Ratgeber.
6. Achte auf Dubletten in Galerien, Keyword-Listen, Dateinamen als Alt-Text und Präfixe wie „Bild von“.
7. Prüfe verlinkte Bilder gesondert. Ihr Alt-Text muss das Linkziel beschreiben.
8. Lass einen automatischen Barrierefreiheits-Check wie Lighthouse laufen und teste eine wichtige Seite mit einem echten Screenreader.
9. Crawle nach der Korrektur erneut und bestätige, dass die Template-Änderung jede betroffene Seite erreicht hat.

Automatische Tools finden fehlende Attribute zuverlässig. Ob der Text stimmt und hilft, kann nur ein Mensch beurteilen.

Häufige Fehler

• das alt-Attribut weglassen, statt bei Dekoration alt="" zu setzen
• Keywords oder Keyword-Varianten in den Alt-Text stopfen
• Dateinamen, Artikelnummern oder „Bild“ als Alt-Text verwenden
• allen Bildern einer Galerie denselben Alt-Text geben
• bei einem verlinkten Logo das Logo beschreiben statt des Linkziels
• dekorative Bilder beschreiben, sodass Screenreader-Nutzer Rauschen anhören müssen
• wichtige Information nur im Bild unterbringen, ohne Text auf der Seite
• automatisch erzeugten Alt-Text ungeprüft übernehmen
• bedeutungstragende Bilder als CSS-Hintergrund einbinden

Crawl-Foundry-Perspektive

Alt-Text-Probleme sind meist Template-Probleme. Ein fehlendes Attribut in der Produktkachel wiederholt sich auf Tausenden URLs. Deshalb ist ein Crawl der richtige erste Schritt. Der Site Audit von Crawl Foundry nutzt einen eigenen Crawler und prüft das gerenderte HTML, also die Fassung, die zählt, wenn Skripte Bilder hinzufügen oder verändern. Mit dem Crawl-Verlauf vergleichst du Läufe und siehst, ob eine Template-Korrektur wirklich ausgeliefert wurde.

Der Site Audit ist eine bezahlte Datenaktion, den Preis siehst du vorab. Er nutzt den offiziellen Lighthouse-Runner auf unseren eigenen Servern, und die Lighthouse-Messung selbst kostet dich nichts extra. Was kein Crawler leisten kann: entscheiden, was ein Bild auf deiner Seite bedeutet. Ob eine präzise Beschreibung oder ein leeres Attribut richtig ist, bleibt eine redaktionelle Entscheidung.

FAQ

Hilft Alt-Text bei SEO?

Ja, in Grenzen. Google nutzt Alt-Text, um Bilder zu verstehen und in der Bildersuche einzuordnen, und behandelt den Alt-Text verlinkter Bilder als Ankertext. Eine Abkürzung zu besseren Rankings in der Websuche ist er nicht, und vollgestopfter Alt-Text kann schaden.

Braucht jedes Bild einen Alt-Text?

Jedes <img> braucht ein alt-Attribut. Informative und funktionale Bilder brauchen beschreibenden Text. Dekorative Bilder brauchen ein leeres Attribut, alt="", damit assistive Technik sie überspringt.

Was ist der Unterschied zwischen Alt-Text und Bildunterschrift?

Eine Bildunterschrift sehen alle, sie liefert Kontext. Alt-Text ersetzt das Bild für Menschen, die es nicht sehen. Eine Bildunterschrift kann einen langen Alt-Text überflüssig machen, das Attribut ersetzt sie aber nicht.

Verwandte Begriffe

• Bildoptimierung
• Onpage-SEO
• Offpage-SEO
• Title Tag
• Überschriften-Tags
• Lighthouse
• Core Web Vitals
• Seitengeschwindigkeit
• JavaScript-Rendering für SEO
• Video-SEO
• Mobile SEO

Quellen für den Review

• Google Search Central: Best Practices für die Bilder-SEO
• W3C WAI: An alt decision tree
• W3C: Understanding WCAG 2.2, Erfolgskriterium 1.1.1 Nicht-Text-Inhalt
• WHATWG HTML Standard: Anforderungen an Textalternativen für Bilder
• MDN Web Docs: Das img-Element