Alt-Attribut

Das Alt-Attribut ist ein HTML-Attribut, das für ein Bild einen textlichen Ersatz bereitstellt. Im Web ist damit meist das alt-Attribut des <img>-Elements gemeint. Sein Wert wird als Alt-Text, Alternativtext oder alternative Textbeschreibung bezeichnet. Der HTML Living Standard zum <img>-Element beschreibt den Wert des alt-Attributs als Ersatzinhalt für Menschen oder Systeme, die das Bild nicht verarbeiten können. Ein typisches Beispiel lautet:

<img src="labrador-im-park.jpg" alt="Brauner Labrador apportiert einen roten Ball">

Das Attribut ist vor allem für Barrierefreiheit relevant, kann bei nicht geladenen Bildern als Ersatztext dienen und liefert Suchmaschinen zusätzliche Informationen über Bildinhalt und Seitenkontext. Der passende Wert hängt von der Funktion des Bildes ab. Ein informatives Foto benötigt meist einen beschreibenden Alt-Text; ein rein dekoratives Bild erhält in der Regel ein leeres Alt-Attribut alt="".

Alt-Attribut, Alt-Text und Alt-Tag

Die Begriffe werden häufig synonym verwendet, bezeichnen technisch aber unterschiedliche Dinge:

Begriff	Bedeutung	Beispiel
Alt-Attribut	HTML-Attribut alt	alt="Roter Laufschuh"
Alt-Text	Wert des Alt-Attributs	Roter Laufschuh
Alt-Tag	Umgangssprachliche, technisch ungenaue Bezeichnung	Gemeint ist meist das Alt-Attribut oder der Alt-Text

Ein eigenes HTML-Element oder HTML-Tag namens <alt> existiert nicht. Die WCAG-Technik H37 des W3C bezeichnet den Wert des alt-Attributs ausdrücklich als „alt text“.

Welche Funktion erfüllt das Alt-Attribut?

Das Alt-Attribut stellt eine textliche Alternative für Informationen oder Funktionen bereit, die sonst nur visuell über ein Bild vermittelt würden. Der HTML-Standard zu Textalternativen für Bilder formuliert als Grundidee, dass der Sinn der Seite erhalten bleiben soll, wenn Bilder durch ihre jeweiligen Alt-Texte ersetzt werden.

Daraus ergeben sich mehrere Anwendungsfunktionen:

• Barrierefreiheit: Assistive Technologien können die relevante Information oder Funktion eines Bildes in Textform zugänglich machen
• Fallback: Browser können den Alternativtext verwenden, wenn ein Bild nicht dargestellt werden kann
• Suchmaschinenverständnis: Suchmaschinen erhalten zusätzliche textliche Informationen zum Bild
• Funktionale Beschriftung: Bei Bildern in Links, Buttons oder Image Maps kann der Alt-Text Ziel oder Aktion beschreiben.

Die Formulierung richtet sich daher nicht allein nach dem sichtbaren Motiv. Maßgeblich ist, welche Information oder Funktion das Bild im jeweiligen Kontext übernimmt.

Alt-Texte nach Bildtyp

Der W3C-Leitfaden zu Textalternativen für Bilder unterscheidet verschiedene Bildfunktionen. Derselbe Bildinhalt kann je nach Seitenkontext einen anderen Alt-Text benötigen.

Bildtyp	Geeignete Behandlung	Beispiel
Informativ	Wesentliche Information knapp als Text wiedergeben	alt="Umsatz steigt von Januar bis März um 18 Prozent"
Dekorativ	Leeres Alt-Attribut	alt=""
Funktional	Aktion oder Ziel beschreiben	alt="Suche öffnen"
Bild mit Text	Relevanten sichtbaren Text wiedergeben	alt="Sommeraktion: 20 % Rabatt"
Komplexe Grafik	Kurze Identifikation plus ausführliche Textbeschreibung außerhalb des Alt-Attributs	alt="Balkendiagramm der monatlichen Bestellungen 2025"
Redundantes Bild	Leeres Alt-Attribut, wenn dieselbe Information bereits direkt im Text steht	alt=""

Informative Bilder

Informative Bilder vermitteln eigenständige Informationen, etwa durch Fotos, Illustrationen, Symbole oder einfache Diagramme. Der Alt-Text soll die Bedeutung des Bildes im Kontext wiedergeben. Die W3C-Anleitung zu informativen Bildern weist darauf hin, dass eine wörtliche Beschreibung der sichtbaren Merkmale nicht immer nötig ist. Relevant ist die Information, die das Bild vermittelt.

Beispiel:

<img
  src="flaschenverschluss.png"
  alt="Verschluss herunterdrücken und gegen den Uhrzeigersinn drehen">

Eine Beschreibung wie alt="Schwarzer Pfeil über einem Flaschenverschluss" wäre weniger hilfreich, wenn das Bild eigentlich eine Bedienungsanweisung vermittelt.

Dekorative Bilder

Rein dekorative Bilder tragen keine zusätzliche Information bei. Für solche Bilder empfiehlt die W3C-Anleitung zu dekorativen Bildern ein leeres Alt-Attribut:

<img src="ornament.svg" alt="">

Assistive Technologien können das Bild dadurch ignorieren. Ein leeres Alt-Attribut ist eine bewusste semantische Angabe: Das Bild ist vorhanden, benötigt für das Verständnis aber keinen textlichen Ersatz.

Auch ein Bild, dessen gesamte relevante Information direkt im angrenzenden Text bereits enthalten ist, kann im konkreten Kontext redundant und damit für die Textalternative wie ein dekoratives Bild behandelt werden.

Funktionale Bilder

Bilder können selbst Teil eines Bedienelements sein, etwa als alleiniger Inhalt eines Links oder Buttons. In diesem Fall beschreibt der Alt-Text die Funktion oder das Ziel und nicht primär das sichtbare Symbol. Die W3C-Anleitung zu funktionalen Bildern nennt dafür Beispiele wie „Suchen“ statt „Lupe“ oder „Drucken“ statt „Druckersymbol“.

<a href="/suche/">
  <img src="lupe.svg" alt="Suche">
</a>

Steht bereits ein gleichbedeutender sichtbarer Linktext neben dem Symbol, wäre eine zusätzliche Wiederholung häufig redundant:

<a href="/suche/">
  <img src="lupe.svg" alt="">
  Suche
</a>

Bei verlinkten Bildern ist das auch für Suchmaschinen relevant. Google erklärt in den Best Practices für crawlbare Links, dass bei Bildern als Links der Alt-Text als Ankertext verwendet werden kann.

Bilder mit Text

Enthält ein Bild Text, der für das Verständnis erforderlich und nicht an anderer Stelle vorhanden ist, soll der Alternativtext diesen Inhalt wiedergeben. Die W3C-Anleitung zu Bildern mit Text empfiehlt zugleich, normalen HTML-Text zu bevorzugen, wenn keine sachliche Notwendigkeit für ein Bild aus Text besteht.

Ein Werbebanner mit dem sichtbaren Inhalt „Versandkostenfrei ab 50 Euro“ könnte beispielsweise so ausgezeichnet werden:

<img
  src="versand-banner.png"
  alt="Versandkostenfrei ab 50 Euro">

Typografische Effekte müssen nicht beschrieben werden, wenn sie keine eigenständige Bedeutung besitzen.

Logos

Bei Logos hängt der Alt-Text von ihrer Funktion ab. Der HTML-Standard unterscheidet unter anderem folgende Fälle:

• Repräsentiert das Logo allein ein Unternehmen oder eine Organisation, kann deren Name der passende Alt-Text sein
• Steht der Unternehmensname bereits unmittelbar neben dem Logo, kann alt="" Redundanz vermeiden
• Wird das Aussehen eines Logos selbst thematisiert, muss die für diese Aussage relevante Gestaltung beschrieben werden.

Ein pauschales Schema wie alt="Firmenlogo" übermittelt daher häufig zu wenig Information.

Komplexe Bilder, Diagramme und Infografiken

Diagramme, Karten und Infografiken können mehr Information enthalten, als sich sinnvoll in einem kurzen Alt-Attribut unterbringen lässt. Der W3C-Leitfaden zu komplexen Bildern empfiehlt in solchen Fällen eine kurze Identifikation des Bildes und zusätzlich eine ausführliche textliche Beschreibung der wesentlichen Daten, Beziehungen oder Aussagen.

Beispiel:

<figure>
  <img
    src="umsatzentwicklung-2026.png"
    alt="Liniendiagramm der monatlichen Umsätze von Januar bis Juni 2026">
  <figcaption>
    Der Umsatz steigt von 82.000 Euro im Januar auf 119.000 Euro im Juni.
    Der stärkste Monatsanstieg liegt zwischen März und April.
  </figcaption>
</figure>

Bei datenreichen Grafiken kann eine Tabelle geeigneter sein als ein sehr langer Fließtext. Die ausführliche Alternative muss die fachlich relevante Information vermitteln, nicht jede Farbe, Linie oder Position beschreiben.

Wie schreibt man einen guten Alt-Text?

Ein geeigneter Alt-Text ist ein Ersatz für die Information oder Funktion des Bildes im konkreten Seitenkontext. Der W3C-Entscheidungsbaum für Alt-Texte bietet dafür eine praktische Reihenfolge: prüfen, ob das Bild Text enthält, funktional ist, inhaltliche Bedeutung trägt, redundant ist oder ausschließlich dekorativ verwendet wird.

Für redaktionelle Alt-Texte gelten folgende Grundsätze:

• Die für den Seitenkontext wesentliche Information nennen
• Funktion statt Aussehen beschreiben, wenn das Bild ein Bedienelement ist
• Informationen aus dem direkt angrenzenden Text nicht unnötig wiederholen
• Generische Formulierungen wie Bild, Grafik oder den Dateinamen vermeiden, wenn sie keinen Informationswert haben
• Keywords nur verwenden, wenn sie den Bildinhalt oder seine Funktion natürlich und zutreffend beschreiben
• Komplexe Informationen nicht in ein überlanges Alt-Attribut pressen, sondern zusätzlich als normalen Seiteninhalt bereitstellen
• Dekorative Bilder mit alt="" kennzeichnen.

Die W3C-Tipps für Textalternativen empfehlen einen möglichst knappen Ersatztext und bei Inhalten, die mehr als eine kurze Phrase oder einen kurzen Satz benötigen, eine ausführlichere Beschreibung. Eine allgemeingültige WCAG-Regel wie „Alt-Texte dürfen höchstens 125 Zeichen lang sein“ gibt es nicht. Die sinnvolle Länge richtet sich nach dem Informationsbedarf.

Kontext entscheidet über den Inhalt

Dasselbe Foto benötigt nicht auf jeder Seite denselben Alt-Text. Ein Produktfoto kann auf einer Kategorieseite nur das Produkt identifizieren, auf einer Detailseite aber eine relevante Variante, Farbe oder Ansicht vermitteln. Ein Foto einer Person kann in einem Nachrichtenbeitrag die Person identifizieren, während dieselbe Aufnahme als rein dekoratives Hintergrundmotiv keinen inhaltlichen Alt-Text benötigt.

Automatisch generierte Alt-Texte ohne Kenntnis des Seitenkontexts können deshalb sachlich korrekt beschreiben, was sichtbar ist, und dennoch die falsche Information priorisieren.

alt="" und fehlendes Alt-Attribut

Ein leeres Alt-Attribut und ein fehlendes Alt-Attribut sind nicht gleichbedeutend.

<!-- Bewusst leere Textalternative -->
<img src="deko.svg" alt="">

<!-- Alt-Attribut fehlt -->
<img src="produkt.jpg">

Die WCAG-Technik H67 verwendet alt="" für Bilder, die assistive Technologien ignorieren sollen, und stellt ausdrücklich klar, dass ein leeres Alt-Attribut nicht dasselbe ist wie ein fehlendes Attribut.

Der HTML Living Standard verlangt grundsätzlich einen angemessenen Alternativtext und erlaubt das Weglassen des alt-Attributs nur in begrenzten Sonderfällen. Fehlende redaktionelle Arbeit ist nach der Spezifikation kein zulässiger Grund, das Attribut wegzulassen.

In der Praxis können Screenreader bei fehlendem Alt-Attribut beispielsweise Dateinamen oder URLs ankündigen. Bei alt="" besteht dagegen die ausdrückliche Absicht, das Bild aus der nicht-visuellen Ausgabe auszunehmen.

Unterschied zwischen alt und title

Das title-Attribut ist kein Ersatz für das alt-Attribut. Der HTML-Standard beschreibt alt als Ersatzinhalt und title als Möglichkeit für ergänzende Informationen. Ein Beispiel:

<img
  src="produkt.jpg"
  alt="Schwarzer Wanderschuh Modell Trek 4"
  title="Erhältlich in den Größen 38 bis 47">

Die zentrale Bildinformation gehört in den Alt-Text oder in den normalen Seiteninhalt. Zusatzinformationen, Tooltips oder Beschriftungen über title erfüllen eine andere Funktion. Für dekorative Bilder empfiehlt die WCAG-Technik H67 ein leeres alt und kein inhaltliches title, damit das Bild tatsächlich ignoriert werden kann.

Alt-Attribut und SEO

Google bezeichnet den Alt-Text in seinen Best Practices für Google Bilder als wichtige Metadatenquelle für Bilder. Google nutzt den Alt-Text zusammen mit Computer-Vision-Verfahren und dem Seiteninhalt, um das Thema eines Bildes zu verstehen. Auch die Platzierung des Bildes in der Nähe relevanter Texte und ein aussagekräftiger Dateiname liefern Kontext.

Für SEO ergeben sich daraus drei praktische Konsequenzen:

1. Der Alt-Text soll den Bildinhalt oder die Bildfunktion präzise wiedergeben.
2. Ein relevantes Keyword kann sinnvoll sein, wenn es die tatsächliche Bildinformation natürlich beschreibt.
3. Keyword-Listen oder wiederholte Suchbegriffe im alt-Attribut verschlechtern die Nutzbarkeit und können laut Google als Keyword-Stuffing beziehungsweise Spam gewertet werden.

Ein Alt-Text ist damit kein Feld für zusätzliche Keyword-Dichte. Seine SEO-Wirkung entsteht aus einer präzisen, kontextgerechten Beschreibung. Für die Einordnung in weitere Suchmaschinenfaktoren bietet das SEO-Periodensystem von Nioveo eine breitere Übersicht.

Schlechte und bessere SEO-Beispiele

Schlecht:

<img
  src="schuh.jpg"
  alt="wanderschuhe wanderschuh kaufen trekking schuhe günstig wandern">

Besser:

<img
  src="schuh.jpg"
  alt="Schwarzer Trekkingstiefel mit knöchelhohem Schaft und Profilsohle">

Der zweite Text liefert eine verständliche Bildinformation. Ein Suchbegriff gehört nur dann hinein, wenn er sachlich zum gezeigten Produkt und zum Seitenkontext passt.

Barrierefreiheit und WCAG

Das WCAG-2.2-Erfolgskriterium 1.1.1 „Nicht-Text-Inhalt“ fordert für nicht-textliche Inhalte eine Textalternative mit gleichwertigem Zweck, sofern keine der definierten Ausnahmen greift. Das Kriterium gehört zur Konformitätsstufe A.

Für HTML-Bilder dokumentiert das W3C mit der Technik H37 eine Möglichkeit, dieses Ziel über das alt-Attribut zu erfüllen. Die WCAG-Techniken sind Beispiele für ausreichende Umsetzungen und nicht selbst die normative Anforderung.

Für dekorative Inhalte erlaubt WCAG 2.2 eine Umsetzung, durch die assistive Technologien das Element ignorieren können. Bei <img> ist alt="" dafür eine etablierte HTML-Technik.

Neben Textalternativen für Bilder gehören auch ausreichende Farbkontraste zu den Anforderungen an barrierefreie Webinhalte. Kontrastverhältnisse lassen sich mit dem Nioveo Farbkontrast-Checker von prüfen.

Rechtlicher Kontext in Deutschland

Das Alt-Attribut ist eine technische Umsetzungsmöglichkeit für barrierefreie nicht-textliche Inhalte. Ob und in welchem Umfang eine Website rechtlich zur Barrierefreiheit verpflichtet ist, hängt vom jeweiligen Anwendungsbereich ab.

Das Barrierefreiheitsstärkungsgesetz (BFSG) erfasst bestimmte Produkte und Dienstleistungen, darunter unter den gesetzlichen Voraussetzungen auch Dienstleistungen im elektronischen Geschäftsverkehr. Für die in § 1 Absatz 3 BFSG genannten Dienstleistungen gilt das Gesetz, wenn sie für Verbraucher nach dem 28. Juni 2025 erbracht werden. § 3 Absatz 3 BFSG nimmt Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, von den Barrierefreiheitsanforderungen nach § 3 Absatz 1 BFSG aus.

Die allgemeinen Anforderungen an Dienstleistungen in § 12 BFSGV verlangen für erfasste Angebote unter anderem alternative Darstellungen bei nicht-textlichen Inhalten sowie wahrnehmbare, bedienbare, verständliche und robuste Webseiten. Für bestimmte bereits vor dem 28. Juni 2025 eingesetzte Produkte und zuvor geschlossene Dienstleistungsverträge enthält § 38 BFSG Übergangsbestimmungen.

Daraus folgt keine pauschale Aussage, dass jede öffentlich erreichbare Website in Deutschland für jedes <img> zwingend einen bestimmten Alt-Text verwenden muss. Der konkrete Anwendungsbereich, Ausnahmen und Übergangsregelungen sowie die jeweils maßgeblichen technischen Standards müssen getrennt geprüft werden. WCAG-Vorgaben sind technische Barrierefreiheitsstandards; ihre rechtliche Verbindlichkeit ergibt sich nicht allein daraus, dass eine WCAG-Empfehlung existiert.

Weitere HTML-Verwendungen des alt-Attributs

Obwohl der Begriff meist mit <img> verbunden wird, verwendet HTML alt auch in weiteren Elementen.

<input type="image">

Bei einem Bild-Button dient alt als textliche Beschriftung für Nutzer und Systeme, die das Bild nicht verwenden können. Die MDN-Dokumentation zur alt-Eigenschaft von HTMLInputElement beschreibt einen nicht-leeren Wert, der einem gleichwertigen Button-Label entspricht.

<input
  type="image"
  src="suchen.svg"
  alt="Suchen">

<area> in Image Maps

Bei klickbaren Bereichen einer Image Map bezeichnet alt die jeweilige Auswahl oder das Linkziel. Die MDN-Referenz zum <area>-Element verlangt das alt-Attribut, wenn href verwendet wird.

<map name="navigation">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="/produkte/"
    alt="Produkte">
</map>

Die Anforderungen dieser Elemente unterscheiden sich vom alt-Attribut eines normalen Bildes, weil hier eine Bedienfunktion oder Auswahl beschriftet wird.

Häufige Fehler

Jedes Bild mit einer Beschreibung versehen

Nicht jedes Bild benötigt einen inhaltlichen Alt-Text. Dekorative oder vollständig redundante Bilder können mit alt="" ausgezeichnet werden. Ein unnötiger Text erzeugt zusätzliche Ausgabe für Screenreader, ohne Information hinzuzufügen.

Das Alt-Attribut bei dekorativen Bildern weglassen

Ein fehlendes alt signalisiert nicht zuverlässig „dekorativ“. Für bewusst zu ignorierende <img>-Elemente ist alt="" die vorgesehene Technik.

Sichtbare Details ohne Kontext aufzählen

Ein Alt-Text wie Zwei Personen, Tisch, Laptop, Pflanze, Fenster kann formal beschreiben, was sichtbar ist, aber die relevante Aussage verfehlen. Wenn das Bild beispielsweise einen Supportprozess illustriert, können andere Informationen wichtiger sein.

Bildunterschrift und Alt-Text identisch wiederholen

Eine sichtbare Bildunterschrift und ein Alt-Text haben unterschiedliche Aufgaben. Die Bildunterschrift ergänzt oder erläutert das Bild; der Alt-Text ersetzt die relevante Bildinformation. Wenn die Bildunterschrift bereits alles Wesentliche vermittelt, kann ein zusätzlicher identischer Alt-Text redundant sein.

Alt-Text mit Keywords füllen

Keyword-Stuffing verschlechtert die Verständlichkeit und widerspricht den Empfehlungen von Google. Ein Keyword ist nur sinnvoll, wenn es zum tatsächlichen Bildinhalt und zur Funktion des Bildes passt.

Automatisch „Bild von …“ voranstellen

Screenreader können die Rolle eines Bildes bereits ankündigen. Allgemeine Zusätze wie „Bild von“ oder „Grafik von“ sind daher meist entbehrlich. Die Bildart kann genannt werden, wenn sie selbst relevant ist, etwa bei einem historischen Foto, Gemälde, Röntgenbild oder technischen Diagramm.

Alt-Texte prüfen

Eine Qualitätsprüfung betrachtet die Seite im Kontext; die bloße Kontrolle auf ein vorhandenes alt-Attribut reicht nicht aus.

Sinnvolle Prüffragen sind:

1. Welche Information oder Funktion geht verloren, wenn das Bild nicht verfügbar ist?
2. Gibt der Alt-Text genau diese Information wieder?
3. Ist der Text bereits unmittelbar daneben vorhanden?
4. Ist das Bild rein dekorativ und daher mit alt="" besser ausgezeichnet?
5. Beschreibt ein funktionales Bild die Aktion oder das Ziel?
6. Benötigt eine komplexe Grafik zusätzlich eine ausführliche Beschreibung?
7. Enthält der Alt-Text unnötige Keywords, Dateinamen oder Wiederholungen?
8. Bleibt die Seite verständlich, wenn jedes Bild gedanklich durch seinen Alt-Text ersetzt wird?

Automatische Accessibility-Tests können fehlende Attribute oder bestimmte formale Fehler erkennen. Ob ein vorhandener Alt-Text inhaltlich richtig, redundant oder kontextgerecht ist, erfordert meist eine redaktionelle Prüfung.

FAQ

Muss jedes Bild ein Alt-Attribut haben?

Für normale <img>-Elemente sieht der HTML-Standard grundsätzlich ein alt-Attribut vor. Je nach Bildfunktion kann sein Wert beschreibend oder bewusst leer sein. Das vollständige Weglassen ist nur für begrenzte Sonderfälle vorgesehen.

Was bedeutet alt=""?

alt="" kennzeichnet ein Bild mit leerer Textalternative. Diese Auszeichnung wird für rein dekorative oder im Kontext vollständig redundante Bilder verwendet, damit assistive Technologien sie ignorieren können.

Ist Alt-Text dasselbe wie eine Bildunterschrift?

Nein. Alt-Text ersetzt die relevante Information oder Funktion eines Bildes, wenn es nicht wahrgenommen werden kann. Eine Bildunterschrift ist sichtbarer Inhalt und kann ein Bild erläutern, einordnen oder ergänzen.

Ist das title-Attribut ein Ersatz für alt?

Nein. alt stellt Ersatzinhalt für ein Bild bereit. title kann zusätzliche Informationen liefern, ersetzt die erforderliche Textalternative eines inhaltlich relevanten Bildes aber nicht.

Wie lang sollte ein Alt-Text sein?

Es gibt keine allgemeine WCAG-Zeichengrenze. Der Text soll so kurz wie möglich und so ausführlich wie nötig sein, um die relevante Information oder Funktion zu vermitteln. Komplexe Grafiken benötigen zusätzlich eine ausführliche Textalternative außerhalb des Alt-Attributs.

Hilft das Alt-Attribut bei SEO?

Ja, es kann Suchmaschinen helfen, Bildinhalt und Seitenkontext zu verstehen. Google verwendet Alt-Text als eine von mehreren Informationsquellen für Bilder. Ein Alt-Attribut garantiert jedoch kein bestimmtes Ranking.

Darf ein Keyword im Alt-Text stehen?

Ja, wenn das Keyword den tatsächlichen Bildinhalt oder die Bildfunktion natürlich beschreibt. Eine künstliche Wiederholung von Keywords oder eine Keyword-Liste ist weder für Nutzer noch für Suchmaschinen sinnvoll.