Alttexte für Produktbilder: Jede Ansicht verständlich beschreiben
Ein guter Alttext erklärt die relevante Information eines Bildes an genau dieser Stelle der Produktseite. Beschreibe deshalb nicht jedes Foto mit demselben Produktnamen. Eine Vorderansicht, ein Rückenmotiv und ein Detail beantworten unterschiedliche Fragen. Halte außerdem getrennt fest, was sichtbar ist, was das Bild tut und welche Eigenschaften nur durch Produktdaten belegt werden können.
Titelbild: KI-generierte Illustration dreier Ansichten eines erfundenen Shirts mit Mond- und Bergmotiv. Sie zeigt ein redaktionelles Beispiel, kein verfügbares Katalogprodukt und keine echte Shop-Oberfläche.
Zuerst die Aufgabe des Bildes bestimmen
Die W3C-WAI-Anleitung zu informativen Bildern stellt den vermittelten Inhalt in den Mittelpunkt. Für eine Produktgalerie ist deshalb die erste Frage: Welche zusätzliche Information liefert diese Aufnahme? Der Alttext entsteht aus dieser Aufgabe und dem tatsächlich sichtbaren Bild.
Unser eigenes Beispiel ist ein fiktives dunkelgrünes Shirt. Vorn sitzt ein kleiner heller Halbmond, hinten eine größere Bergzeichnung. Eine dritte Aufnahme zeigt die Berglinien näher. Dieses Beispiel beschreibt keine Shirtee-Produktvariante; es dient dazu, drei unterschiedliche Bildaufgaben zu vergleichen.
Schreibe zunächst je Aufnahme einen kurzen Zweck auf: Vorderseite erkennen, Rückenmotiv beurteilen, Linienführung im Ausschnitt sehen. Wenn du bei zwei Bildern keinen Unterschied benennen kannst, prüfe, ob beide im jeweiligen Seitenkontext gebraucht werden oder dieselbe Information wiederholen.
Drei Ansichten, drei eigene Beschreibungen
Eine Arbeitsliste verbindet Bilddatei und beabsichtigten Text. Die folgenden Formulierungen sind eigene Beispiele für die beschriebene Galerie:
| Ansicht | Eigener Alttext-Vorschlag | Bewusst nicht behauptet |
|---|---|---|
| Vorderseite | Dunkelgrünes Shirt mit kleinem hellem Halbmond links auf der Brust. | Material, Passform oder Lieferumfang |
| Rückseite | Rückseite des dunkelgrünen Shirts mit großer heller Bergzeichnung. | Genaue Druckmaße oder Druckverfahren |
| Detail | Nahansicht der hellen Berglinien auf dunkelgrünem Stoff. | Haltbarkeit, Griffgefühl oder Zertifizierung |
„Links“ meint hier die linke Brustseite der tragenden Person. Solche Richtungsangaben sollten mit der tatsächlichen Ansicht übereinstimmen. Wenn sie für die Bildaussage unwichtig oder im Foto nicht sicher erkennbar sind, lass sie weg, statt eine genaue Position zu erfinden.
Die Detailaufnahme kann eine Linie zeigen, aber sie beweist keine Waschbeständigkeit. Ebenso lässt sich aus einer Stoffoberfläche nicht zuverlässig eine Materialzusammensetzung ableiten. Diese Angaben gehören aus geprüften Produktdaten in den sichtbaren Produkttext. So bleibt der Alttext konkret, ohne zum versteckten Werbetext zu werden.
Farbe, Ansicht und Sprache zusammenhalten
Lege pro tatsächlicher Bilddatei die zugehörige Variante fest. Wird später eine cremefarbene Fassung eingesetzt, muss die Beschreibung dazu passen. Ein Bildwechsel bei unverändertem Alttext kann eine falsche Information erzeugen, obwohl der Text für das alte Foto richtig war.
Für eine zweisprachige Seite hilft ein gemeinsamer Datensatz mit Bildkennung, Variante, Bildaufgabe, deutschem und englischem Alttext. Die englische Fassung unseres Rückenbilds könnte lauten: „Back of the dark green shirt with a large light-coloured mountain drawing.“ Sie beschreibt dieselbe Ansicht und fügt keine neue Eigenschaft hinzu.
Übersetze die Bildaussage, nicht blind einen Dateinamen. Eine Kennung wie galerie_v4_ruecken hilft intern bei der Zuordnung, erklärt Kundinnen und Kunden aber wenig. Behalte diese Kennung in deiner Arbeitsliste und schreibe die Beschreibung in verständlicher Sprache.
Wann ein leerer Alttext sinnvoll sein kann
Nicht jedes Bild ergänzt eine Information. Für rein dekorative Elemente erklärt die W3C-WAI-Anleitung den leeren Alternativtext. Entscheidend ist der konkrete Kontext: Vermittelt das Bild etwas, das sonst fehlt, oder dient es ausschließlich der Gestaltung?
Ein leerer Alttext ist daher eine bewusste Entscheidung. Ein vergessenes Feld ist keine dokumentierte Einstufung als Dekoration. Notiere den Grund in deiner Bildliste. Bei einem wichtigen Rückenmotiv, das sonst nirgends beschrieben wird, wäre „dekorativ“ für unser Beispiel keine überzeugende Begründung.
Auch Bilder mit einer Funktion benötigen eine eigene Betrachtung. Wird ein Bild allein als Link oder Schaltfläche eingesetzt, richtet sich die Textalternative nach dem Zweck der Aktion; das erläutert die W3C-WAI-Anleitung zu funktionalen Bildern. Prüfe deshalb die fertige Galerie einschließlich ihrer Bedienelemente, nicht nur lose Bilddateien.
Gespeichert ist noch nicht öffentlich geprüft
Nach der Übernahme in den Shop kontrollierst du die echte Produktseite. Öffne die jeweilige Sprachfassung und wähle die betreffende Variante. Prüfe, welches Bild tatsächlich erscheint und welcher Alternativtext im gerenderten Bild beziehungsweise in der zugänglichen Darstellung ankommt. Eine gepflegte Tabelle oder ein ausgefülltes CMS-Feld beweist diese Ausgabe noch nicht.
Halte den Befund pro Bild fest: richtige Datei, passende Sprache, passende Variante, übernommener Text. Wenn die Ausgabe fehlt oder abweicht, dokumentiere die betroffene Seite und Bildkennung für die technische Klärung. Ersetze die Inhaltsprüfung nicht durch ein pauschales „Upload erfolgreich“.
Die Google-Hinweise zu Bildern empfehlen nützliche, kontextbezogene Beschreibungen und warnen vor überladenen Suchwortlisten. Eine bestimmte Platzierung in Suchergebnissen folgt daraus nicht. Ziel ist, dass die Bildinformation auch sprachlich verständlich bleibt.
Die allgemeine Anleitung zu hilfreichen Produktseiten ordnet Bilder in die Kaufentscheidung ein. Mit einer eigenen Bildliste gehst du einen Schritt weiter: Jede Ansicht bekommt eine klare Aufgabe, eine passende Beschreibung und eine Prüfung an der tatsächlichen Ausgabe.