Alt-Text

Definition: Der Alt-Text (Alternativtext, HTML-Attribut: alt="...") ist eine textliche Beschreibung eines Bildes die im HTML-Code des img-Tags eingefügt wird und Suchmaschinen sowie Screenreadern für Menschen mit Sehbehinderung den visuellen Inhalt des Bildes kommuniziert. HTML-Syntax: <img src="produktfoto.jpg" alt="Rotes Laufschuh-Modell Nike Air Zoom Pegasus 40 auf weißem Hintergrund">. Zwei Kernfunktionen: SEO-Funktion: Suchmaschinen können Bilder nicht visuell analysieren und sind auf Alt-Text angewiesen um Bildinhalt zu verstehen, zu indexieren und in der Bildersuche korrekt auszuliefern; Barrierefreiheits-Funktion: Screenreader (JAWS, NVDA, VoiceOver) lesen Alt-Texte für sehbehinderte und blinde Nutzer vor; Fallback-Funktion: wird angezeigt wenn Bild nicht geladen werden kann (langsame Verbindung, Ladefehler). Rechtliche Relevanz: WCAG 2.1 (Web Content Accessibility Guidelines) erfordert Alt-Texte für informative Bilder als Teil der Barrierefreiheitspflicht; in Deutschland: BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) für Behörden und öffentliche Stellen; EU Web Accessibility Directive (2016/2102) für öffentliche Stellen; zunehmend auch für private Unternehmen relevant.

Erläuterung

Das alt-Attribut wurde 1995 im HTML 2.0-Standard (RFC 1866) eingeführt – zunächst primär als Fallback für Situationen in denen Bilder nicht geladen werden konnten. Die SEO-Dimension gewann mit der Popularisierung von Google Bildersuche (2001 gestartet, 2013 stark überarbeitet) erheblich an Bedeutung: Seit Google Visual Search und Google Lens die Bildanalyse durch Computer Vision verbessert haben (ab ca. 2018), nutzt Google Alt-Text zunehmend als Ergänzung eigener Bildanalyse – nicht mehr als einzige Informationsquelle. Die Barrierefreiheits-Perspektive wurde durch die Web Accessibility Initiative (WAI) des W3C systematisiert: Gregg Vanderheiden und Wendy Chisholm formulierten 1999 die ersten WCAG-1.0-Richtlinien, WCAG 2.1 (2018) ist heute der international anerkannte Standard. Laut WebAIM Screen Reader User Survey (2023): 96% der Screenreader-Nutzer berichten dass fehlende oder schlechte Alt-Texte eine der größten Barrierefreiheits-Frustrationen auf modernen Websites sind. Laut Semrush Studie (2022): 45% aller analysierten Webseiten haben mindestens ein Bild ohne Alt-Text – eine der häufigsten On-Page-SEO-Lücken.

Informative vs. dekorative Bilder

Informative Bilder (Alt-Text erforderlich): Bilder die Informationen transportieren die im umgebenden Text nicht vollständig erfasst sind; Produktfotos auf E-Commerce-Seiten; Infografiken und Diagramme; Personen-Fotos mit Namens-Kontext; Screenshots von Software mit beschriebener Funktion; Regelung: aussagekräftiger Alt-Text pflicht; WCAG-Anforderung: Erfolgs-Kriterium 1.1.1 (nicht-textueller Inhalt) – Level A
Dekorative Bilder (Alt-Text leer): Bilder die rein ästhetischen Zwecken dienen ohne inhaltliche Information; Trennlinien, Hintergrundbilder, Zierlemente; Regelung: alt="" (leeres Alt-Attribut) statt gar kein Alt-Attribut; Warum: leeres Alt-Attribut signalisiert Screenreadern das Bild zu überspringen; fehlendes Alt-Attribut: Screenreader liest Dateinamen vor («DSC_04521.jpg») – schlechte UX
Funktionale Bilder (Button/Link-Icons): Bilder die als Buttons oder Links fungieren (z.B. Lupe als Such-Button); Alt-Text beschreibt Funktion nicht Aussehen: alt="Suche starten" statt alt="Lupen-Symbol"; Social-Media-Share-Buttons: alt="Auf Facebook teilen", alt="Auf Twitter teilen"

Alt-Text-Best-Practices für SEO und Accessibility

Beschreibende Präzision: Konkret beschreiben was im Bild zu sehen ist; «Rotes Mountainbike auf Schotterweg im Herbstwald» statt «Fahrrad» oder «Bild»; Kontext einbeziehen: wer, was, wo, wann wenn relevant; Länge: empfohlenes Maximum 125 Zeichen (Screenreader-Optimum); kein «Bild von...» oder «Foto von...» vorranstellen – Screenreader kündigt bereits an dass es ein Bild ist
Keyword-Integration (SEO): Primäres Keyword natürlich einbauen wenn es zum Bildinhalt passt; «Rotes Nike Laufschuh Modell Pegasus» bei einem Produktfoto dieses Schuhs; NICHT: Keyword-Stuffing («Laufschuh Sneaker Sportschuh Nike Running Schuh» – unnatürlich, SEO-Risiko); Faustregel: Alt-Text soll das Bild beschreiben, nicht das Keyword einfügen erzwingen
Spezialfälle: Infografiken: Alt-Text sollte Kernaussage der Infografik zusammenfassen (oder Langtext im umgebenden HTML bereitstellen); QR-Codes: alt="QR-Code zu [Ziel-URL/Zweck]"; Charts/Diagramme: Kernaussage als Alt-Text, detaillierte Daten in der Bildunterschrift oder einer data-Tabelle; Produktvarianten: verschiedene Alt-Texte je Variante (Farbe, Größe, Winkel)

Alt-Text-Audit und Implementierung

Alt-Text-Audit-Tools: Screaming Frog SEO Spider: crawlt alle Bilder und listet fehlende/leere Alt-Texte; Ahrefs Site Audit: Image-Alt-Text-Report; Google Search Console: Crawl-Fehler-Report enthält auch Bild-Issues; Browser-Extensions: Web Developer Toolbar zeigt Alt-Texte im Page-Overlay; WAVE (WebAIM): Barrierefreiheits-Audit Tool mit Alt-Text-Visualisierung
CMS-spezifische Implementierung: WordPress: Medien-Bibliothek → Alternativtext-Feld bei jedem Bild; Alt-Text in Gutenberg-Block direkt bearbeitbar; Shopify: Produktbilder → Alt-Text-Feld in Produktbearbeitung; WooCommerce: Medien-Upload → Alternativtext-Feld; Tipp: Alt-Text bei Bild-Upload direkt erfassen statt als nachträgliche Aufgabe
AI-Alt-Text-Generierung: Tools wie Cloudinary, imagekit.io, Microsoft Azure AI Vision können automatisch Alt-Texte aus Bildinhalt generieren; Qualitätsgrenze: AI-generierte Alt-Texte sind gut für Standard-Produktbilder, aber für kontextabhängige oder komplexe Bilder oft zu generisch; Best Practice: AI als First-Draft, menschliche Review für wichtige oder komplexe Bilder

Praxistipp: Schreiben Sie Alt-Texte als würden Sie jemandem das Bild am Telefon beschreiben – primär deskriptiv und nur dann mit Keywords angereichert wenn es natürlich zum Bildinhalt passt. Setzen Sie dekorative Bilder immer auf alt="" (leeres Attribut) statt kein Alt-Attribut: fehlende Alt-Attribute zwingen Screenreader dazu den Dateinamen vorzulesen. Führen Sie quartalsweise ein Screaming-Frog-Audit durch um neue Bilder ohne Alt-Text zu identifizieren – dies ist eine der häufigsten und am einfachsten behebbaren On-Page-SEO-Lücken.