Alt-Tag

Was ist ein Alt-Tag?

Alt-Tag ist die verbreitete, aber technisch unsaubere Kurzform für das alt-Attribut im HTML--Element. Es steht für "alternative text" — also einen Alternativtext, der immer dann eingesetzt wird, wenn das eigentliche Bild nicht dargestellt werden kann oder vom Nutzer nicht gesehen wird.

Im Code sieht das so aus:

<img src="hund-im-park.jpg" alt="Goldener Labrador apportiert einen roten Ball im Stadtpark">

Drei Gruppen profitieren direkt von diesem Text: Menschen mit Sehbehinderung, die einen Screenreader nutzen und sich das Bild vorlesen lassen. Nutzer mit langsamer Verbindung, bei denen das Bild nicht lädt und stattdessen der Alt-Text angezeigt wird. Und Google, das Bilder sonst nur als rohe Pixel sieht und ohne Alt-Text praktisch nicht versteht, was drauf ist.

Der Alt-Tag ist kein optionales Extra. Nach den WCAG (Web Content Accessibility Guidelines, derzeit Version 2.2) sind sinnvolle Alt-Texte Pflicht — konkret in WCAG 1.1.1 "Non-text Content". In Deutschland setzt die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) die WCAG in Gesetz um und verpflichtet Behörden-Websites zur Einhaltung. Für kommerziell betriebene Angebote wie Onlineshops, Buchungsplattformen oder Banking-Apps greift zusätzlich das Barrierefreiheitsstärkungsgesetz (BFSG) — fehlende Alt-Tags sind einer der häufigsten Prüf-Mängel und können abgemahnt werden.

Wie wird der Alt-Tag eingesetzt?

In den meisten CMS kannst du den Alt-Text direkt beim Hochladen oder Einbinden eines Bildes eintragen — in WordPress im Medien-Dialog, in Joomla im Bild-Editor, in Shopify in den Produktbildern. Technisch wird der Text dann in das alt-Attribut des -Tags geschrieben.

Eine gute Beschreibung schreibst du wie für jemanden, der das Bild nicht sieht — also konkret, ohne Floskeln, ohne "Bild von" oder "Foto zeigt". Das ist redundant, weil der Screenreader schon "Bild:" vorliest.

Schlecht: alt="Bild1.jpg" Schlecht: alt="Bild von einem Hund" Schlecht: alt="Hund" Gut: alt="Goldener Labrador apportiert einen roten Ball im Stadtpark"

Bei reinen Deko-Bildern (Trennlinien, Icons, Hintergrundmuster), die keinen Informationswert haben, lässt du das Attribut leer: alt="". Das ist das Signal an den Screenreader, das Bild zu überspringen. Ein leeres Alt-Attribut ist bewusst etwas anderes als gar kein Attribut.

alt vs aria-label — was ist der Unterschied?

Beide Attribute existieren, um assistive Technologien wie Screenreader mit Informationen zu versorgen, aber sie sind nicht austauschbar:

• alt ist ausschließlich für -Elemente vorgesehen. Es beschreibt den Bildinhalt und wird zusätzlich als Fallback angezeigt, wenn das Bild nicht lädt. Kurzer, prägnanter Text — Screenreader kündigen ihn automatisch mit "Grafik:" an.
• aria-label ist ein allgemeineres Attribut aus dem WAI-ARIA-Standard und funktioniert auf praktisch jedem HTML-Element — Buttons, Links, Icons, Interaktionsflächen. Es wird NICHT als Fallback angezeigt, sondern nur von Screenreadern vorgelesen. Typischer Einsatz: ein Icon-Button ohne sichtbare Beschriftung ().

Faustregel: Für Bilder nimmst du alt, immer. Für alles andere (Icon-Buttons, ungetextete Links, Karussell-Pfeile) nimmst du aria-label. Beides gleichzeitig auf demselben Element ist redundant und verwirrt manche Screenreader. Wichtig: Ein alt="" auf einem reinen Deko-Bild ist richtig — ein fehlendes Attribut dagegen wirft im Accessibility-Audit sofort einen WCAG-Fehler.

Warum ist der Alt-Tag für deine Website wichtig?

Barrierefreiheit. Rund 150.000 Menschen in Deutschland sind blind, über eine Million stark sehbehindert. Sie nutzen Screenreader wie JAWS oder NVDA, die sich Websites vorlesen lassen. Ohne Alt-Tags hören sie bei jedem Bild nur "Grafik" oder "Bild1.jpg" — völlig nutzlos. Mit Alt-Tags bekommen sie die komplette Information.

Rechtssicherheit. Seit dem 28.06.2025 müssen viele kommerziell betriebene Websites (Onlineshops, Buchungsplattformen, Banking) nach dem Barrierefreiheitsstärkungsgesetz vollständig barrierefrei sein. Fehlende Alt-Tags sind einer der häufigsten Verstöße. Abmahnrisiko inklusive.

SEO. Google kann Bilder zwar mittlerweile per KI interpretieren, aber der Alt-Tag bleibt das verlässlichste Signal. Wer bei Google Bilder ranken will — etwa ein Fotograf, eine Innenarchitektin, ein Modegeschäft — kommt ohne saubere Alt-Texte nicht weit. Bilder-SEO liefert für visuelle Branchen oft 20-30 Prozent des gesamten organischen Traffics.

Fallback. Wenn ein Bild nicht lädt (kaputter Link, langsame Verbindung, Ad-Blocker), zeigt der Browser stattdessen den Alt-Text an. Besser als eine leere graue Box.

Gute vs schlechte Alt-Texte

Die goldene Regel: Der Alt-Text beschreibt, was ein Sehender in drei Sekunden auf dem Bild erkennt — nicht mehr und nicht weniger. Keine Romane, keine Keyword-Listen, keine Floskeln.

Häufige Fehler beim Alt-Tag

Keyword-Stuffing. "Zahnarzt Wolfsburg Zahnreinigung Zahnimplantat Zahnaufhellung Braunschweig" — Google erkennt das sofort als Spam, und für einen blinden Nutzer ist es unbrauchbar.

Alt-Text komplett vergessen. Standard in vielen alten WordPress-Installationen. Die Folge: Screenreader-Chaos und Accessibility-Fehler im Audit.

"Bild von..." vorweg. Überflüssig, weil der Screenreader schon "Grafik" ansagt. Wirkt doppelt gemoppelt.

Identische Alt-Texte auf allen Bildern. Oft bei Stock-Fotos, die kopiert werden. Jedes Bild braucht einen eigenen, passenden Text.

Alt-Text für Deko-Bilder. Wer bei jedem Schnörkel "dekorative Linie" vorlesen lässt, nervt Screenreader-Nutzer. Reine Deko bekommt alt="".

Text-in-Bildern ignoriert. Wenn ein Bild Text enthält (Zitate, Infografiken, Banner), gehört dieser Text in den Alt-Tag. Sonst ist er für Screenreader und Google unsichtbar.