Alt-Tag (Alt-Attribut)

Was ist ein Alt-Tag?

Ein Alt-Tag liefert den Text, der ein Bild ersetzt. So definiert der HTML-Standard den Wert des Attributs alt, den Alt-Text. Würde man jedes Bild einer Seite gegen seinen Alt-Text austauschen, soll sich die Bedeutung der Seite nicht ändern.

Technisch ist der Name ungenau. Ein Tag markiert in HTML ein Element wie <img>, alt ist dagegen ein Attribut dieses Elements. Im Sprachgebrauch halten sich trotzdem viele Varianten, von Alt-Tag und Alttag über Alt-Attribut bis zu Alt-Text und Alternativtext. Gemeint ist immer dieselbe Angabe. Die Alt-Tags einer Seite sind die Alt-Attribute all ihrer Bilder.

Screenreader lesen den Alt-Text blinden und sehbehinderten Menschen an der Stelle des Bildes vor, Browser zeigen ihn bei Netzwerkfehlern oder blockierten Inhalten an, und auch KI-Systeme lesen ihn mit. Außer img haben in HTML nur zwei Elemente ein Alt-Attribut, area für verlinkte Bildbereiche und input mit type="image" für Bild-Buttons in Formularen.

Alt-Tag in HTML: Syntax und Code

Im HTML-Code steht der Alt-Tag als Attribut alt im img-Element, neben der Bildquelle src. Der HTML-Standard, der aus HTML5 hervorgegangen ist, verlangt das Attribut grundsätzlich und regelt in einem eigenen Abschnitt, welcher Text zu welcher Art von Bild passt. Ein Link-Element a hat dagegen kein Alt-Attribut. Enthält ein Link nur ein Bild, übernimmt der Alt-Text dieses Bildes die Rolle des Linktextes.

<img src="tagesgeld-zinsen.png"
  alt="Liniendiagramm zur Entwicklung des Tagesgeldzinses">1
<img src="welle.svg" alt="">2
<a href="/kredit/rechner">3
  <img src="rechner.svg"
    alt="Ratenkredit berechnen">
</a>
<img src="IMG00023.jpg">4

Leeres Alt-Attribut bei dekorativen Bildern

Ein leeres Alt-Attribut, also alt="", kennzeichnet ein Bild als dekorativ. Screenreader überspringen es, und Browser blenden bei einem Ladefehler das Symbol für ein defektes Bild aus. Ein fehlendes Attribut verstößt dagegen bis auf wenige Sonderfälle gegen den HTML-Standard, und manche Screenreader lesen dann den Dateinamen vor. Bilder, die nur zum Design der gesamten Website gehören, stehen laut HTML-Standard ohnehin besser im CSS als im HTML.

Verlinkte Bilder

Ist ein Bild der einzige Inhalt eines Links, beschreibt sein Alt-Text das Ziel oder die Aktion des Links und nicht das Motiv. Für ein Rechner-Symbol, das zum Kreditrechner führt, passt „Ratenkredit berechnen“ besser als „Taschenrechner“.

SVG- und CSS-Bilder

Inline-SVG kennt kein Alt-Attribut. Eine SVG-Grafik mit Aussage bekommt deshalb role="img" und eine Beschriftung über aria-label oder ein title-Element, das Google für Inline-SVG als Gegenstück zum Alt-Attribut nennt. CSS-Hintergrundbilder haben gar kein Alt-Attribut, und Google indexiert sie nicht. Sie eignen sich deshalb nur für Dekoration, alles mit Aussage gehört als img ins HTML.

<svg role="img" aria-labelledby="t1">
  <title id="t1">
    Kontoeröffnung in drei Schritten
  </title>
  …
</svg>

Alt-Tags und Bilder-SEO

Für Bilder-SEO ist der Alt-Tag das wichtigste Attribut am Bild, denn Google nennt den Alternativtext in seinen Image SEO Best Practices (Stand 03/2026) das wichtigste Attribut für Bild-Metadaten. Google nutzt ihn zusammen mit Computer-Vision-Algorithmen und dem Inhalt der Seite, um das Thema eines Bildes zu verstehen. Wie ein Bild eingebunden und beschrieben ist, beeinflusst laut Google, ob es überhaupt indexiert und den passenden Keywords zugeordnet wird. Wichtig sind Alt-Texte für SEO deshalb vor allem dort, wo Google Bilder zeigt, also in der Bildersuche, in Discover und bei Bildern neben Textergebnissen.

Neben dem Alt-Text wertet Google den Text rund um ein Bild aus, darunter Bildunterschriften und Bildtitel, sowie den Dateinamen, der nach Googles Worten nur leichte Hinweise gibt. Wer Bilder für SEO optimieren will, stellt sie deshalb neben passenden Text, bindet sie als img-Element ein und vergibt kurze, sprechende Dateinamen wie tagesgeld-zinsvergleich.png statt IMG00023.jpg. Bei verlinkten Bildern verwendet Google den Alt-Text als Ankertext.

Bildformate wie WebP und AVIF, die Dateigröße und Lazy Loading betreffen die Ladezeit und gehören zum Thema Pagespeed. Wie Alt-Tags mit den übrigen Faktoren einer Seite zusammenspielen, zeigt der Überblick zur Onpage-SEO.

Alt-Texte und Barrierefreiheit

Alt-Texte machen Bilder für Menschen zugänglich, die sie nicht sehen können, weil Screenreader an der Stelle des Bildes den Alt-Text vorlesen. Die Web Content Accessibility Guidelines (WCAG) des World Wide Web Consortium (W3C) verlangen im Erfolgskriterium 1.1.1 „Nicht-Text-Inhalt“ für alle Nicht-Text-Inhalte eine Textalternative, die denselben Zweck erfüllt. Das Kriterium gehört zur Stufe A, der niedrigsten der drei Konformitätsstufen. Für rein dekorative Bilder verlangt es nur, dass Hilfsmittel wie Screenreader sie ignorieren können, etwa dank eines leeren Alt-Attributs.

In Deutschland gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für bestimmte Dienstleistungen, die nach dem 28.06.2025 für Verbraucher erbracht werden, darunter Bankdienstleistungen für Verbraucher und Dienstleistungen im elektronischen Geschäftsverkehr (§ 1 Abs. 3 BFSG). Kleinstunternehmen, die Dienstleistungen anbieten, sind von den Anforderungen an die Barrierefreiheit ausgenommen (§ 3 Abs. 3 BFSG). Die Verordnung zum Gesetz verlangt in § 12 BFSGV, Websites solcher Dienstleistungen wahrnehmbar, bedienbar, verständlich und robust zu gestalten. Für Informationen über die Funktionsweise der Dienstleistung verlangt sie eine alternative Darstellung, wenn diese nicht-textliche Inhalte enthalten. Dieselben vier Begriffe bilden die Prinzipien der WCAG, und das Kriterium 1.1.1 gehört zum ersten Prinzip „wahrnehmbar“.

Gute Alt-Texte für SEO schreiben

Gute Alt-Texte für Bilder sagen in wenigen Worten, was ein Bild an dieser Stelle der Seite vermittelt. Der HTML-Standard schlägt dafür einen einfachen Test vor. Man stellt sich vor, die Seite jemandem am Telefon vorzulesen, ohne das Bild zu erwähnen. Was man anstelle des Bildes sagen würde, ist ein guter Anfang für den Alt-Text.

• Inhalt oder Funktion beschreiben. Informative Bilder bekommen eine Beschreibung ihres Inhalts, Bilder in Links und Buttons eine Beschreibung ihrer Funktion.
• Kurz bleiben. Die Web Accessibility Initiative (WAI) des W3C empfiehlt die knappste mögliche Beschreibung des Zwecks. Braucht ein Bild mehr als einen kurzen Satz, gehört die ausführliche Fassung auf die Seite selbst oder auf eine verlinkte Seite.
• Kein „Bild von“. Screenreader kündigen Bilder selbst an, Wörter wie „Bild“ oder „Foto“ sind deshalb meist überflüssig. Ausnahme ist die Bildart als Information, etwa bei einem Diagramm.
• Nichts wiederholen. Was schon in der Bildunterschrift oder im Text daneben steht, gehört nicht noch einmal in den Alt-Text.
• Keywords nur, wenn sie passen. Google empfiehlt Keywords, die zum Seiteninhalt passen, und rät davon ab, Alt-Attribute mit Keywords zu überladen.

Für eine Bildbeschreibung mit Keywords heißt das, dass ein Keyword in den Alt-Text darf, wenn das Bild es zeigt. Google erklärt den Unterschied an einem Welpenfoto. Eine Kette aus Hunderassen und Futterbegriffen gilt als Keyword-Stuffing, „Welpe“ ist besser und „Dalmatiner Welpe apportieren“ am besten.

Alt-Tag-Beispiele für Finanzseiten

Welcher Alt-Text passt, hängt davon ab, wozu ein Bild auf der Seite dient. Die Übersicht zeigt für sechs typische Bildtypen einer fiktiven Bank je einen schwachen und einen besseren Alt-Text. Die Beispiele folgen den Regeln des HTML-Standards und des Bilder-Tutorials der WAI.

Alt-Tags für Produktbilder

Alt-Tags für Produktbilder nennen das Produkt und das Merkmal, in dem sich das Bild von den übrigen Bildern unterscheidet. Zeigt eine Galerie dieselbe Kreditkarte von vorn, von hinten und in der App, gehört genau dieser Unterschied in den Alt-Text, etwa „Kreditkarte Gold der Beispielbank, Rückseite mit Unterschriftsfeld“. Gleichlautende Alt-Texte für alle Varianten sagen nicht, worin sich die Bilder unterscheiden.

Diagramme, Personen, Logos und Bilder mit Text

Diagramme und Infografiken bekommen einen kurzen Alt-Text, der Art und Thema nennt und bei Bedarf sagt, wo die Werte stehen. Die einzelnen Werte gehören als Text oder Tabelle auf die Seite, denn die WAI empfiehlt für komplexe Bilder eine zweiteilige Textalternative aus kurzer Beschreibung und ausführlicher Fassung. Bei Personen nennt der Alt-Text Namen und Funktion, wenn beides für die Seite zählt, etwa beim Foto einer Beraterin auf einer Kontaktseite. Ein Logo als Link zur Startseite bekommt den Namen der Brand und den Hinweis auf die Startseite, nie das Wort „Logo“. Enthält ein Bild nur Text, etwa ein Banner, steht genau dieser Text im Alt-Attribut.

Alt-Attribut, title-Attribut und Bildunterschrift

Das Alt-Attribut ersetzt ein Bild, das title-Attribut ergänzt es, und die Bildunterschrift erklärt es für alle sichtbar. Das title-Attribut zeigen Browser meist als Tooltip, wenn der Mauszeiger über dem Bild steht. Der HTML-Standard rät davon ab, sich darauf zu verlassen, weil viele Browser es Tastatur- und Touch-Nutzern nicht zugänglich machen. Die Bildunterschrift steht im HTML meist im Element figcaption und gehört laut Standard nicht in den Alt-Text.

Googles Anleitung zur Bilder-SEO empfiehlt aussagekräftige Dateinamen, Titel und Alt-Texte. Das Thema eines Bildes leitet Google auch aus dem Seiteninhalt ab, ausdrücklich aus Bildunterschriften und Bildtiteln. Ob mit Titel das title-Attribut gemeint ist, lässt die Anleitung offen. Als wichtigstes Attribut nennt sie den Alt-Text. Wer bei Bildern zwischen Alt und Title wählt, setzt deshalb immer den Alt-Text und das title-Attribut nur, wenn es eine echte Zusatzinformation liefert. Mit dem Title-Tag hat das title-Attribut nur den Namen gemeinsam. Der Title-Tag legt den Titel der ganzen Seite im HTML-Kopf fest, das title-Attribut steht an einem einzelnen Element wie einem Bild oder Link.

Bild-Tags und Metadaten bei Fotos

Tags bei Fotos sind Schlagwörter, mit denen Fotoverwaltungen, Bilddatenbanken und Plattformen Bilder ordnen und durchsuchbar machen. Bildprogramme speichern sie oft direkt in der Bilddatei, nach dem Fotometadaten-Standard des International Press Telecommunications Council (IPTC) im Feld Keywords. Der Standard kennt außerdem Felder für Beschreibung, Urheber und Copyright und seit Version 2021.1 ein eigenes Feld für einen Alt-Text. Technische Aufnahmedaten wie Kamera, Belichtung oder GPS-Position schreibt dagegen die Kamera selbst in die Datei, meist im Format EXIF (Exchangeable Image File Format).

Bild-Tags und Alt-Tags teilen sich nur das Wort Tag. Bild-Tags stehen nicht im HTML der Seite, und Screenreader lesen sie dort nicht vor. Aus IPTC-Daten liest Google laut seiner Dokumentation Urheber, Credit-Angabe, Copyright-Hinweis, Lizenzangaben und die Kennzeichnung KI-erzeugter Bilder, Schlagwörter gehören nicht dazu. Lizenzangaben lassen sich alternativ als strukturierte Daten im HTML hinterlegen. Bilder mit Tags zu versehen, ersetzt deshalb keine Angabe im HTML. Für Bilder-SEO zählen Alt-Text, Dateiname, Bildunterschrift, Bildtitel und der Text rund um das Bild.

Alt-Texte prüfen

Fehlende Alt-Attribute finden ein SEO-Crawler für die ganze Website und Lighthouse für einzelne Seiten. Ob ein Alt-Text passt, zeigt dagegen nur der Blick auf Bild und Kontext. Ein Crawler ruft alle URLs ab und listet je Seite Bilder ohne Alt-Attribut, mit leerem Attribut oder mit sehr langem Text auf. Das eignet sich für große Websites und für den Vergleich vor und nach einer Korrektur.

Lighthouse steckt in den Chrome-Entwicklertools und in PageSpeed Insights und prüft mit dem Audit „Image elements have [alt] attributes“, ob jedes Bild ein Alt-Attribut hat. Im Barrierefreiheits-Score gewichtet Lighthouse diese Prüfung mit 10, der höchsten Stufe (laut Lighthouse-Dokumentation vom 22.10.2025). Dieselbe Regel gibt es in der Prüfbibliothek axe, die auch als Browser-Erweiterung läuft. Keines dieser Werkzeuge beurteilt, ob der Text das Bild treffend beschreibt.

Für die inhaltliche Prüfung bietet die W3C-Initiative WAI eine Prüfhilfe für die Lesezeichenleiste an, die jedes Bild einer Seite mit seinem Alt-Text markiert. Dabei gilt die Regel aus dem HTML-Standard. Jedes img braucht ein Alt-Attribut, und leer bleibt es nur bei Bildern, die nichts hinzufügen, etwa Dekoration oder ein Symbol neben gleichlautendem Text.

Alt-Texte in der KI-Suche

In der KI-Suche wirken Alt-Texte als normaler Seitentext, den ChatGPT beim Abruf einer Seite mitliest. Öffnet ChatGPT eine Seite, legt es eine Textkopie im sogenannten Reading-Cache an. Laut einer Analyse auf Search Engine Land (17.08.2026) fallen dabei Scripts und JSON-LD weg, Alt-Texte bleiben erhalten. Im eigenen Suchindex Labrador besteht ein Treffer aus URL, Titel und rund 200 Zeichen Text um die H1. Sitzt ein Bild direkt unter der H1, kann sein Alt-Text Teil dieses Snippets sein. Wie der Index arbeitet, erklärt der KKP-Artikel zu ChatGPTs eigenem Suchindex.

Der Agent ChatGPT Deep Research verarbeitet Bilder nicht visuell, sondern liest ihren Alt-Text als Inhalt. In einer Auswertung von Peec AI (06/2026, über 10 kostenlose Konten mit je rund 20 Anfragen) übernahm er die Bewertung aus dem Alt-Text eines Siegels und übersprang ein Bild ohne Alt-Text als vermutlich dekorativ. Für Finanzseiten mit Testsiegeln, Auszeichnungen und Zinsdiagrammen heißt das, dass deren Aussage im Alt-Text stehen sollte, wenn sie in einer KI-Antwort ankommen soll.

Alt-Texte mit KI erstellen

KI-Bilderkennung kann Alt-Texte für große Mediatheken automatisch vorschlagen, ersetzt aber nicht die redaktionelle Prüfung. Google bezeichnet es in seiner Anleitung zu KI-Inhalten (englische Fassung, Stand 10/2026) als entscheidend, KI-erzeugte Inhalte vor der Veröffentlichung von Hand auf Richtigkeit zu prüfen, und nennt dabei ausdrücklich Alt-Texte. Eine Bilderkennung beschreibt, was zu sehen ist, kennt aber den Zweck des Bildes auf der Seite nicht. Dasselbe Foto einer Frau am Laptop braucht auf einer Seite zur Online-Kontoeröffnung einen anderen Alt-Text als in einem Ratgeber zum Homeoffice.

Gratis Download

AI Search Guide: Sichtbar in ChatGPT & Co.

Der Praxis-Guide zeigt auf 164 Seiten, wie eine Brand in ChatGPT, Google AI Overviews, Gemini und Perplexity sichtbar wird, von den Grundlagen über Messung und KPIs bis zu konkreten Maßnahmen.

Kostenlos herunterladen →