Was ist Alt-Text?

Alt-Text ist die Textalternative zu einem Bild und steht im alt-Attribut des HTML-Bildelements. Assistive Technologie liest ihn anstelle der Grafik vor, Browser zeigen ihn, wenn ein Bild nicht geladen werden kann, und Suchmaschinen werten ihn als ein Signal zur Deutung visueller Inhalte. In einer Storefront betrifft das Attribut Produktfotos, Kategoriebanner, als Bild ausgelieferte Größentabellen, Symbole für Zahlung und Versand sowie Kampagnenmotive. Häufig ist vom Alt-Tag die Rede, tatsächlich handelt es sich um ein Attribut eines Elements und nicht um ein eigenes Tag. Gepflegt wird die Alternative dort, wo auch das Bild selbst verwaltet wird.

Definition

Die Web Content Accessibility Guidelines verlangen eine Textalternative für Nicht-Text-Inhalte im Erfolgskriterium 1.1.1 auf Konformitätsstufe A. Die Regel lautet nicht, jedes Bild zu beschreiben, sondern denselben Zweck zu vermitteln: Ein informatives Produktfoto braucht eine konkrete Beschreibung, ein dekoratives Bild erhält ein leeres alt-Attribut, damit assistive Technologie es überspringt, und ein verlinktes Bild beschreibt das Ziel statt der Abbildung. In der Europäischen Union erweitert der European Accessibility Act die Anforderungen an Barrierefreiheit auf verbrauchernahe E-Commerce-Dienste. Keyword-Stuffing im Alt-Text nützt keiner der beiden Zielgruppen und gilt als manipulativ.

Warum es zählt

In einer Composable-Storefront stammen Bilder aus einem PIM, einem DAM oder einem CMS, weshalb die Textalternative im selben System am Asset gepflegt wird und zusammen mit der Bild-URL über die API ausgeliefert wird, je Markt lokalisiert wie jedes andere Inhaltsfeld. Frontend-Komponenten sollten den Wert als verpflichtende Property behandeln, statt ihn aus einem Dateinamen abzuleiten, und ohne gepflegten Text ein leeres Attribut rendern statt eines Platzhalters. Responsive Bild-Pipelines mit mehreren Ableitungen behalten eine Alternative je Asset, und Lazy Loading darf das Attribut selbst nicht verzögern.

Anwendungsfälle

Auf Produktdetailseiten beschreibt jedes Galeriebild, was es unterscheidet, etwa eine Rückansicht, eine Materialnahaufnahme oder einen Größenvergleich. Auf Listenseiten wiederholt die Alternative meist Produktname und abgebildete Variante, was die Kachel lesbar hält, ohne zusätzliches Rauschen zu erzeugen. Banner, die ein Angebot nur in der Grafik tragen, brauchen dieselbe Aussage als Text, sonst geht die Botschaft ohne Bilder verloren. Redaktionelle Inhalte, Lookbooks und nutzergenerierte Galerien folgen derselben Regel, während dekorative Trenner und Hintergrundtexturen mit leerem Attribut stumm bleiben. Wiederholt sich derselbe Text über viele Bilder hinweg, geht der Nutzen für beide Zielgruppen verloren.

Verwandt

Mehr dazu: Image Optimization · SEO.