Was ist ein ALT-Tag?

Das ALT-Attribut (korrekt: alt) liefert eine textuelle Alternative für nicht-textuelle Inhalte, primär für Bilder (<img>). Dieser Alternativtext wird von Screenreadern als zugänglicher Name genutzt und erscheint als Fallback, wenn eine Grafik nicht geladen werden kann. In HTML ist alt für <img> essenziell und wird außerdem bei <input type="image"> sowie Hotspots in Image-Maps (<area>) eingesetzt.

Das Alt-Tag ist ein zentraler Bestandteil der Weboptimierung, der die Zugänglichkeit von Bildern für Suchmaschinen und Nutzer verbessert.

Warum ALT-Texte unverzichtbar sind

Barrierefreiheit: Die WCAG 2.2 fordert für alle Nicht-Text-Inhalte eine Textalternative mit äquivalenter Zweckbestimmung (Erfolgskriterium 1.1.1). Ohne Alternativtext verlieren Nutzer:innen von Screenreadern Informationen, Funktionen oder Kontext.

Recht & Compliance (DE): Öffentliche Stellen müssen die WCAG im Rahmen der BITV 2.0 umsetzen; Alternativtexte sind damit verpflichtender Bestandteil barrierefreier Webangebote im Behördenumfeld – und de facto Standard in der Privatwirtschaft.

Robustheit & Ausfallsicherheit: Fällt ein Bild weg (Netzwerkfehler, Inhaltsblocker), transportiert alt die Kernaussage. Browser-APIs stellen alt zudem programmatisch bereit (HTMLImageElement.alt).

SEO & Auffindbarkeit: Google nutzt den alt-Text u. a. als Ankertext, wenn Bilder als Links fungieren; präzise Alternativtexte sind Best Practice für die Bildsuche. Keyword-Stopfen ist dagegen nicht erwünscht.

Normativer Rahmen in Kürze

• HTML-Standard: <img> benötigt eine Textalternative; dekorative Bilder werden mit alt="" bewusst „stummgeschaltet“. Für <area> mit href ist alt Pflicht.
• WCAG 2.2 – SC 1.1.1: Nicht-Text-Inhalte brauchen eine gleichwertige Textalternative; Ausnahmen (z. B. rein dekorativ) sind definiert.
• BITV 2.0 (DE): Verweist auf WCAG und macht Alternativtexte im öffentlichen Sektor verbindlich.

Wie Browser, AT & Tools alt verarbeiten

• Nicht-leerer alt: Wird als zugänglicher Name vorgelesen; dient als sichtbarer Fallback bei Ladefehlern.
• Leerer alt (alt=""): Kennzeichnet dekorative/irrelevante Bilder; Assistive Technologien ignorieren sie. Wichtig: dabei kein title setzen (Technik H67).
• Fehlendes alt: Verstößt gegen Anforderungen; Screenreader greifen oft auf Dateinamen/URLs zurück – ein schlechtes Nutzererlebnis und ein häufiger Audit-Fail (axe-Regel image-alt).

Anwendungsmuster & Best Practices (mit Code)

1) Informative Bilder

Ziel: Den Informationskern kurz, präzise, kontextsensibel ausdrücken (Objekt + Handlung + Kontext).

So erhält die Leserin denselben Informationsgewinn wie sehende Nutzer:innen – ohne redundante Floskeln („Bild von …“).

2) Funktionale Bilder (Buttons, Links)

Ziel: Funktion/Ziel statt Optik benennen.

Bei verlinkten Bildern fungiert alt als Linktext; Google nutzt ihn außerdem als Ankertext. Formulieren Sie die ausgelöste Aktion bzw. das Ziel.

3) Dekorative Bilder

Ziel: Ignorieren lassen, um Screenreader-Noise zu vermeiden.

Leerer alt ohne title signalisiert: keine relevante Information.

4) Komplexe Darstellungen (Diagramme, Karten, Infografiken)

Vorgehen: Kurzfazit ins alt; ausführliche Langbeschreibung sichtbar (z. B. direkt darunter, per <figcaption> oder via aria-describedby referenziert).

So erfüllen Sie WCAG und verbessern Nutzbarkeit – figcaption ergänzt, ersetzt aber alt nicht.

5) Bilder von Text

Best Practice: Echten Text statt Bild. Ist ein Bild unvermeidlich, muss alt den sichtbaren Wortlaut enthalten.

6) Galerien & Unterschriften

alt beschreibt das Motiv bzw. die Funktion, figcaption liefert redaktionellen Kontext (Wer/Was/Wo/Wann). Doppelungen vermeiden.

7) Responsive Bilder (<picture>/srcset)

Der alt-Text sitzt auf <img> und bleibt stabil, auch wenn Quellen über <source> wechseln. Der motivische Inhalt ist derselbe.

8) SVG-Grafiken & Icons

Bei Inline-SVG existiert das Attribut alt nicht. Geben Sie dem <svg> role="img" und eine Zugänglichkeitsbenennung (z. B. aria-label oder <title> im SVG). Für reine Deko ggf. aria-hidden="true".

Prinzip: Native Semantik vor ARIA – für <img> daher alt; bei SVG/role="img" braucht es ein Label.

9) CSS-Hintergrundbilder

Hintergrundbilder haben kein alt. Nutzen Sie CSS für dekorative Zwecke; für inhaltliche Informationen stattdessen semantisches HTML (Text oder <img> mit alt).

10) Image-Maps (<map>/<area>)

Jedes klickbare <area> benötigt ein eigenes alt, das Ziel/Zweck der Hotspot-Region beschreibt. Bei href ist alt Pflicht.

11) Bild-Eingaben (<input type="image">)

Das alt dient als Schaltflächenlabel – idealerweise wortgleich mit einem äquivalenten Text-Button („Senden“, „Angebot anfordern“).

ALT, title und figcaption: Abgrenzung

• alt ≠ title: title ist kein Ersatz; Unterstützung durch Screenreader ist inkonsistent und in Kombination mit alt="" sogar kontraproduktiv (H67 fordert ohne title).
• figcaption: Sichtbare Bildunterschrift. Ergänzt alt, ersetzt ihn nicht; beide Texte sollten nicht redundant sein.

SEO-Perspektive: Wirkung & Richtlinien

• Relevanz: alt hilft Crawlern, Bildinhalt und Seitenkontext zu verstehen; es ist ein Signal für die Bildsuche.
• Bilder als Links: Google verwendet den alt-Text als Ankertext. Formulieren Sie daher Handlung/Ziel präzise („Preisliste herunterladen (PDF)“).
• Schreibstil: Natürlich, zweckorientiert, ohne Keyword-Ketten. Die Best-Practice-Seite weist auf sinnvolle Bild-Signale (Semantik, Captions, Ladezeit, kompatible Formate) hin – alt ist ein Baustein.

Häufige Sonderfälle

Logo: Meist Firmenname als alt. Ist das Logo verlinkt, den Linkzweck benennen (z. B. „Startseite Muster GmbH“).

CAPTCHA & rein dekorative Divider: CAPTCHAs brauchen alternative Prüfwege; Deko erhält alt="".

Duplizierter Text neben dem Bild: Ist die Information vollständig im Fließtext enthalten, kann alt="" angemessen sein (Bild rein ergänzend). Achtung: nicht bei Links/Buttons; dort muss alt die Funktion tragen.

Typische Fehler – und wie Sie sie vermeiden

1. alt fehlt: Führt zu Validierungs-/Nutzbarkeitsproblemen; Screenreader lesen Dateinamen/URLs. Lösung: immer alt setzen – ggf. alt="" für Deko.
2. title statt alt: Kein Ersatz; bei dekorativen Bildern alt="" ohne title.
3. Funktion nicht beschrieben: Bei Link/Schaltflächenbildern Aktion/Ziel als alt formulieren.
4. Redundanz mit figcaption/Nachbartest: Doppeln Sie Inhalte nicht; alt für den Kern, figcaption für Kontext.
5. SVG/CSS falsch behandelt: Inline-SVG mit role="img" plus Label (aria-label/<title>); informative Inhalte nicht als reinen CSS-Background ausliefern.
6. Keyword-Stopfen: Unnatürliche, gestapelte Keywords schaden der Qualität. Schreiben Sie menschenlesbar und auf den Zweck bezogen.

Praxis-Workflow: So kommen Sie systematisch zu guten ALT-Texten

1. Klassifizieren: Ist das Bild dekorativ, informativ, funktional oder komplex? Der WAI-Entscheidungsbaum hilft bei der Entscheidung.
2. Informativ: Objekt + Handlung + Kontext in einem prägnanten Satz.
3. Funktional: Aktion/Ziel als Verb/Infinitiv („Drucken“, „Registrieren“, „Kontakt aufnehmen“).
4. Komplex: Kurzfazit in alt; Details im sichtbaren Text (<figcaption>, Absatz daneben oder referenziert per aria-describedby).
5. Qualitätscheck: Entfernen Sie Füllwörter und Redundanzen; prüfen Sie natürliche Lesbarkeit und Kontextpassung. (Auch Google betont Leser- und Kontextbezug.)

Qualitätssicherung & Testing

Manuell: Seite ohne Bilder prüfen (DevTools/Reader-Ansicht) oder mit Screenreader testen. Validieren Sie jeden Bildtyp entlang des WAI-Entscheidungsbaums.

Automatisiert:

• Lighthouse (Chrome DevTools) meldet u. a. fehlende [alt]-Attribute; die Accessibility-Audits fließen in einen Score ein.
• axe-core identifiziert fehlende/unpassende Alternativtexte sowie Redundanzen (z. B. image-redundant-alt).

Do & Don’t (mit Mini-Erklärungen)

Do – präzise, zweckorientiert, kontextsensibel

→ Erfüllt WCAG, hält alt knapp und zweckgebunden.

Don’t – vage, redundant, keyword-gestopft