Alt-Texte für Produktbilder richtig schreiben: Regeln und 12 Beispiele
Ein Alternativtext (Alt-Text) beschreibt ein Bild für Menschen, die es nicht sehen können – etwa blinde Nutzerinnen mit Screenreader. WCAG 2.1 verlangt für alle Nicht-Text-Inhalte eine Textalternative, die denselben Zweck erfüllt (Kriterium 1.1.1). Im Shop heißt das: Die Bilder verkaufen, also muss auch der Alt-Text das Produkt verständlich machen.
Keine Rechtsberatung: Dieser Artikel gibt den Stand unserer Recherche (November 2026) wieder und ersetzt keine Rechtsberatung. Für eine verbindliche Einschätzung Ihres Einzelfalls wenden Sie sich bitte an eine Rechtsanwältin oder einen Rechtsanwalt.
Die 6 Regeln
- Beschreiben, was für die Kaufentscheidung zählt: Farbe, Material, Form, Perspektive, Detail. Nicht: Bildqualität oder Fotograf.
- Nicht mit „Bild von“ beginnen: Screenreader sagen bereits „Grafik“ an.
- Kurz, aber vollständig: meist ein Satz, etwa 80–150 Zeichen. Lange Details gehören in die Produktbeschreibung.
- Jedes Bild der Galerie unterscheiden: Fünfmal derselbe Produktname hilft niemandem. Nennen Sie die Ansicht (Rückseite, Detail, getragen).
- Kein Keyword-Stuffing: „Sneaker günstig kaufen Sneaker Herren“ ist weder hilfreich noch gut für SEO.
- Dekorative Bilder leer lassen: Hintergrundmuster oder Zierlinien erhalten
alt="", damit sie übersprungen werden.
12 Beispiele: schlecht und besser
| Produkt | Schlecht | Besser |
|---|---|---|
| Sneaker | IMG_4711.jpg | Weißer Leder-Sneaker mit grüner Ferse, seitliche Ansicht |
| Sneaker (Galerie 2) | Sneaker | Sohle des Sneakers mit grobem Profil, Ansicht von unten |
| Kleid | Kleid rot | Model trägt knielanges rotes Wickelkleid mit V-Ausschnitt und kurzen Ärmeln |
| Pullover Detail | Detail | Nahaufnahme des Zopfmusters am Ärmel aus grober Wolle |
| Kopfhörer | Kopfhörer kaufen günstig | Schwarze Over-Ear-Kopfhörer, zusammengeklappt mit USB-C-Kabel und Tasche |
| Smartphone-Hülle | Hülle | Transparente Hülle auf einem Smartphone, Kameraaussparung von hinten gesehen |
| Kaffeebecher | Becher | Matt-blauer Keramikbecher, 350 ml, neben einer Hand zur Größeneinordnung |
| Kerze | Produktfoto | Duftkerze im Bernsteinglas mit Holzdeckel auf einem Holztisch |
| Größentabelle (Bild) | Größentabelle | Größentabelle – besser als echte HTML-Tabelle unter dem Bild ausgeben |
| Farbvarianten-Swatch | (leer) | Farbe: Salbeigrün |
| Banner mit Text | Banner | Sommer-Sale: 20 % auf alle Sandalen bis 31. Juli |
| Siegel/Badge | Logo | Trusted Shops Gütesiegel |
Für Bilder mit Text gilt: Der Alt-Text muss den Text im Bild wiedergeben. Komplexe Inhalte wie Größentabellen oder Infografiken sollten zusätzlich als echter Text auf der Seite stehen.
Verlinkte Bilder
Ist ein Bild der einzige Inhalt eines Links (z. B. Produktkachel in der Kollektion), beschreibt der Alt-Text das Linkziel. Steht der Produktname bereits als Text im selben Link, kann das Bild ein leeres Alt erhalten, damit der Name nicht doppelt vorgelesen wird.
Umsetzung in Shopify
Produkt öffnen › Medium anklicken › „Alt-Text hinzufügen“. Für Bilder in Theme-Abschnitten nutzen Sie die Bildeinstellungen im Editor bzw. die Dateien-Verwaltung. Weitere Theme-Fixes: Shopify Dawn barrierefrei machen.
Umsetzung in WooCommerce
Medien › Mediathek › Bild öffnen › Feld „Alternativer Text“. Achtung: In WordPress gilt der Alt-Text pro Mediendatei. Prüfen Sie, ob Ihr Theme ihn in Galerie und Kachel tatsächlich ausgibt. Mehr in den 10 WCAG-Fixes für WooCommerce.
KI-generierte Alt-Texte?
Automatisch erzeugte Alt-Texte sind ein brauchbarer Entwurf für große Kataloge, beschreiben aber oft das Falsche („Eine Person steht vor einer Wand“). Prüfen Sie mindestens Ihre Bestseller und die erste Galerieposition jedes Produkts manuell.
Fehlende Alt-Texte finden
Tools wie WAVE oder Lighthouse zeigen Bilder ohne alt-Attribut. Ob ein vorhandener Alt-Text sinnvoll ist, erkennt nur ein Mensch.
Quellen
Häufige Fragen
Wie lang sollte ein Alt-Text für ein Produktbild sein?
Meist ein Satz mit etwa 80 bis 150 Zeichen, der die kaufrelevanten Merkmale beschreibt. Ausführliche Details gehören in die Produktbeschreibung.
Brauchen alle Bilder einen Alt-Text?
Alle informativen Bilder ja. Rein dekorative Bilder erhalten ein leeres alt-Attribut, damit Screenreader sie überspringen.
Helfen Alt-Texte auch bei SEO?
Ja, beschreibende Alt-Texte helfen Suchmaschinen, Bilder zu verstehen. Keyword-Listen schaden dagegen der Verständlichkeit.