Alt-Texte im E-Commerce: Beschreibung oder Verkaufshilfe?
In vielen Redaktionssystemen ist das Alt-Text-Feld das am schnellsten übersprungene Feld. Ein Bild wird hochgeladen, das Feld bleibt leer oder wird mit dem Dateinamen gefüllt: „IMG_2034.jpg“, fertig.
Für viele Teams wirkt das wie eine technische Kleinigkeit. Für einen Teil der Kundschaft ist der Alt-Text aber der einzige Zugang zum Produktbild.
Ein Alt-Text, auch Alternativtext genannt, ist eine kurze Textbeschreibung, die im Code eines Bildes hinterlegt wird. Menschen, die eine Website visuell nutzen, sehen diesen Text meistens nicht. Menschen, die einen Screenreader nutzen, hören ihn anstelle des Bildes. Fehlt der Alt-Text oder ist er nichtssagend, bleibt das Bild für diese Nutzer:innen leer.
Im E-Commerce ist das besonders wichtig. Denn Produktbilder sind nicht nur Dekoration. Sie zeigen Farbe, Form, Material, Größe, Muster, Details und Stimmung. Genau diese Informationen können über einen Kauf entscheiden.
Was WCAG dazu sagt
Die Web Content Accessibility Guidelines, kurz WCAG, sind ein internationaler Standard für digitale Barrierefreiheit. In Kriterium 1.1.1 „Nicht-Text-Inhalte“ geht es darum, dass Inhalte, die nicht aus Text bestehen, eine passende Textalternative brauchen. Das betrifft zum Beispiel Bilder, Icons oder Grafiken, wenn sie eine Bedeutung haben.
Der Kern ist einfach: Wenn ein Bild eine wichtige Information vermittelt, braucht es eine Textalternative, die denselben Zweck erfüllt. Rein dekorative Bilder sind davon ausgenommen und sollten von assistiven Technologien ignoriert werden können. Ein Produktbild ist in einem Online-Shop aber in der Regel nicht dekorativ. Es ist ein wichtiger Teil der Kaufentscheidung.
Quelle: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
Damit ist Alt-Text zuerst eine Accessibility-Anforderung. Im Kontext von BFSG, WCAG und EN 301 549 wird diese Anforderung für digitale Angebote und Online-Shops besonders relevant. Aber genau hier lohnt sich ein zweiter Blick: Ein guter Alt-Text erfüllt nicht nur eine Pflicht. Er verbessert auch die Produktinformation.
Der Perspektivwechsel: Alt-Text als Produktinformation
Auf einer Produktseite ist das Bild oft eine der wichtigsten Informationsquellen. Nutzer:innen wollen sehen, wie ein Produkt aussieht, wie groß es wirkt, welche Farbe es hat und wie Details verarbeitet sind.
Baymard zeigt in seiner E-Commerce-UX-Forschung, wie wichtig Produktbilder für die Kaufentscheidung sind. In einem mobilen Kontext war bei 56 Prozent der Nutzer:innen die erste Handlung auf der Produktseite, die Produktbilder genauer anzusehen. In einer weiteren Untersuchung beschreibt Baymard, dass viele Shops zusätzliche erklärende Texte oder Grafiken für erklärungsbedürftige Produktbilder nicht ausreichend nutzen. Gerade bei Detailaufnahmen, Material, Verarbeitung oder Funktion können solche Erklärungen helfen.
Quellen: https://baymard.com/blog/scale-mobile-product-images-in-landscape,
https://baymard.com/blog/product-images-descriptive-text
Für sehende Kund:innen kann ein fehlender Erklärungstext ärgerlich sein. Für Screenreader-Nutzende ist ein fehlender oder schlechter Alt-Text deutlich gravierender: Die visuelle Information ist dann nicht zugänglich.
Farbe, Schnitt, Material, Muster, Kontext und besondere Details müssen im Text vorkommen, wenn sie für die Kaufentscheidung wichtig sind. Sonst trifft diese Person die Entscheidung mit weniger Informationen als andere Kund:innen. Oder sie bricht den Kauf ab, weil sie sich das Produkt nicht ausreichend vorstellen kann.
Ein Alt-Text ist deshalb keine Formsache neben der Produktbeschreibung. Er ist ein Teil der Produktinformation.
Schwacher Alt-Text vs. starker Alt-Text
Ein Modehändler lädt das Foto eines Kleides hoch. Ein schwacher Alt-Text wäre:
„Kleid“
Oder noch schlechter:
„IMG_2034.jpg“
Beide Varianten helfen kaum. Sie sagen nichts über Farbe, Schnitt, Länge, Material oder Stil aus.
Ein hilfreicher Alt-Text könnte lauten:
„Dunkelgrünes Midikleid aus Leinen mit V-Ausschnitt und schmalem Bindegürtel, getragen von einem stehenden Model.“
Dieser Alt-Text nennt die wichtigsten Merkmale: Farbe, Länge, Material, Ausschnitt, Gürtel und Kontext. Wer diesen Satz hört, kann sich das Kleid deutlich besser vorstellen.
Bei Farbvarianten ist Präzision besonders wichtig. „Rotes Kleid“ und „bordeauxrotes Kleid“ können für die Kaufentscheidung einen großen Unterschied machen. Für sehende Kund:innen ist dieser Unterschied im Bild sichtbar. Für Screenreader-Nutzende existiert er nur, wenn der Alt-Text ihn benennt.
Praktische Entscheidungshilfe
Nicht jedes Bild braucht automatisch einen beschreibenden Alt-Text. Entscheidend ist, welche Funktion es im jeweiligen Kontext erfüllt. Der Alt-Entscheidungsbaum der W3C hilft dabei, zwischen informativen, funktionalen, redundanten und rein dekorativen Bildern zu unterscheiden. So lässt sich Schritt für Schritt prüfen, ob ein Bild beschrieben werden sollte, einen funktionalen Alternativtext braucht oder mit einem leeren Alt-Attribut ausgezeichnet werden kann.
Quelle: https://www.w3.org/WAI/tutorials/images/decision-tree/de
Die Nielsen Norman Group empfiehlt, Alt-Texte nicht nur als reine Bildbeschreibung zu verstehen. Entscheidend ist der Zweck des Bildes im jeweiligen Kontext. Außerdem sollten Alt-Texte keine Informationen wiederholen, die direkt daneben bereits im Text stehen.
Quelle: https://www.nngroup.com/articles/write-alt-text/
Ein Beispiel:
Wenn neben dem Bild bereits steht „Dunkelgrünes Midikleid aus Leinen“, muss der Alt-Text nicht exakt denselben Satz wiederholen. Dann kann er ergänzen, was auf dem Bild zusätzlich sichtbar ist, zum Beispiel:
„Das Kleid fällt locker bis unter das Knie und wird mit einem schmalen Gürtel in der Taille gebunden.“
Bei einer Detailaufnahme des Materials wäre ein guter Alt-Text eher:
„Nahaufnahme des grob gewebten Leinenstoffs mit leicht unregelmäßiger Struktur.“
So beschreibt der Alt-Text nicht einfach das ganze Produkt erneut, sondern liefert die Information, die das jeweilige Bild zeigen soll.
Als Orientierung gilt: Alt-Texte sollten kurz und präzise sein. Eine feste Zeichenregel gibt es in der WCAG nicht. Häufig werden etwa 125 bis 150 Zeichen als grobe Orientierung genutzt. Wichtiger als die genaue Länge ist aber, dass der Alt-Text verständlich, relevant und nicht unnötig lang ist.
Alt-Texte für unterschiedliche Produktbilder
Im E-Commerce gibt es verschiedene Bildtypen. Sie brauchen unterschiedliche Alt-Texte.
Ein Hauptbild sollte die wichtigsten Produktmerkmale nennen:
„Schwarzer Lederrucksack mit rundem Deckel, zwei Frontschnallen und verstellbaren Schulterriemen.“
Eine Detailaufnahme sollte das sichtbare Detail beschreiben:
„Nahaufnahme der silbernen Metallschnalle und der strukturierten Lederoberfläche.“
Ein Bild am Model sollte Informationen zu Passform und Wirkung geben:
„Beige Oversize-Jacke, hüftlang geschnitten, getragen von einem Model mit lockerer Passform.“
Ein Stimmungsbild kann manchmal dekorativ sein. Wenn es keine zusätzliche Produktinformation liefert, braucht es keinen ausführlichen Alt-Text. Wenn es aber zeigt, wie ein Produkt genutzt wird, sollte genau das beschrieben werden:
„Keramikbecher auf einem Holztisch neben einer Kaffeekanne, als Beispiel für die Größe im Alltag.“
So wird klar: Gute Alt-Texte sind nicht immer gleich. Sie hängen davon ab, welche Aufgabe das Bild auf der Seite erfüllt.
Der SEO-Nebeneffekt
Ein gut geschriebener Alt-Text kann auch für SEO hilfreich sein. Google empfiehlt, Alt-Texte nützlich, informationsreich und passend zum Kontext der Seite zu schreiben. Keywords dürfen natürlich vorkommen, wenn sie das Bild wirklich beschreiben. Keyword-Stuffing sollte vermieden werden, weil es die Nutzererfahrung verschlechtert und als Spam wahrgenommen werden kann.
Quelle: https://developers.google.com/search/docs/appearance/google-images
Für Online-Shops bedeutet das: Ein Alt-Text wie „Damenkleid dunkelgrün Leinen Midikleid“ ist besser als ein Dateiname. Noch besser ist aber ein natürlicher Satz, der das Produkt sinnvoll beschreibt:
„Dunkelgrünes Midikleid aus Leinen mit V-Ausschnitt und Bindegürtel.“
So profitieren Accessibility und Sichtbarkeit gleichzeitig. Der Alt-Text hilft Screenreader-Nutzenden und gibt Suchmaschinen mehr Kontext zum Bild.
Häufige Fehler bei Alt-Texten
Viele schlechte Alt-Texte entstehen nicht aus Absicht, sondern aus Zeitdruck. Trotzdem führen sie zu echten Barrieren.
Typische Fehler sind:
Das Alt-Text-Feld bleibt leer, obwohl das Bild wichtig ist.
Der Dateiname wird als Alt-Text verwendet.
Der Alt-Text ist zu allgemein, zum Beispiel „Produktbild“.
Alle Bilder eines Produkts haben denselben Alt-Text.
Wichtige Merkmale wie Farbe, Material oder Muster fehlen.
Der Text ist mit Keywords überladen.
Dekorative Bilder werden unnötig beschrieben.
Ein guter Alt-Text beantwortet immer die Frage: Welche Information würde fehlen, wenn dieses Bild nicht sichtbar wäre?
Fazit
Ein Alt-Text ist auf den ersten Blick ein kleines technisches Feld. Auf den zweiten Blick ist er eine der wichtigsten Textarten im Online-Shop.
Er entscheidet, ob ein Produktbild für Screenreader-Nutzende überhaupt zugänglich ist. Er kann Farbe, Material, Schnitt, Größe, Muster und Details vermitteln. Und er kann Suchmaschinen helfen, Produktbilder besser zu verstehen.
Wer Alt-Texte nicht als Pflichtfeld, sondern als kurze und präzise Produktinformation schreibt, macht den Shop nicht nur barrierefreier. Er macht ihn verständlicher, hilfreicher und überzeugender.
