Produktbilder mit Alternativtexten: Vorlage für Shops
Veröffentlicht am 24. Oktober 2026
Ein guter Alt-Text für ein Produktbild sagt in einem kurzen Satz, was dieses eine Bild zeigt und der Text daneben nicht schon sagt: die Ansicht, die Farbe, das Detail. Rein dekorative Bilder bekommen ein leeres Alt-Attribut, Bilder mit Text oder Tabellen brauchen diesen Text als echten Text, und Bilder in Links beschreiben das Ziel statt des Aussehens.
Unten finden Sie eine Vorlage je Bildtyp mit Beispielen, eine Tabelle mit den häufigsten Fehlern und die Wege, auf denen Sie Alt-Texte in Shopify, WooCommerce und Shopware 6 einzeln und in Massen pflegen. Wie Bilder in die gesamte Umsetzung im Shopsystem passen, beschreibt der Überblick Barrierefreier Onlineshop: Shopify, WooCommerce, Shopware und Co..
Was WCAG 1.1.1 verlangt
Das Erfolgskriterium 1.1.1 Nicht-Text-Inhalt der WCAG 2.2 (W3C-Empfehlung vom 12. Dezember 2024, Stufe A) lautet: „All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.“ Zu den Ausnahmen gehört Dekoration: Ist ein Bild „pure decoration“, dann soll es so eingebaut sein, „that it can be ignored by assistive technology“.
Wichtig ist das Wort purpose, also Zweck. Der Alt-Text beschreibt nicht jedes Pixel, sondern das, wofür das Bild auf dieser Seite da ist. Das W3C schreibt im Images Tutorial: „The text alternative needs to be determined by the author, depending on the usage, context, and content of an image.“ Dasselbe Foto kann also in der Produktgalerie einen ausführlichen Alt-Text brauchen und im Newsletter-Banner gar keinen.
Für die Entscheidung hat das W3C einen Entscheidungsbaum (Decision Tree) veröffentlicht. Er fragt der Reihe nach: Enthält das Bild Text? Steckt das Bild in einem Link oder Knopf? Trägt es zur Bedeutung der Seite bei? Ist es rein dekorativ? Die folgende Tabelle wendet diese Fragen auf die Bilder an, die in einem Shop typischerweise vorkommen.
Entscheidungstabelle: welcher Bildtyp, welcher Alt-Text
| Bild im Shop | Typ nach W3C | Alt-Text | Grundlage |
|---|---|---|---|
| Hauptbild auf der Produktseite | informativ | kurze Beschreibung des Wesentlichen | Informative Images |
| Weitere Ansichten in der Galerie | Gruppe zusammengehöriger Bilder | je Bild ein eigener Text, der sagt, was diese Ansicht zeigt | Groups of Images |
| Bild einer Farbvariante | informativ | die Farbe, so benannt wie in der Variantenauswahl | Informative Images |
| Detailbild, Nahaufnahme | informativ | das Detail und was man daran erkennt | Informative Images |
| Größentabelle, Maßskizze, Pflegehinweise als Bild | Text im Bild oder komplexes Bild | Inhalt als echter Text oder Tabelle auf der Seite, das Bild bekommt einen kurzen Hinweis darauf | Images of Text, Complex Images |
| Lifestyle-Bild mit Information (Größe am Körper, Einsatz) | informativ | was das Bild über das Produkt zeigt | Informative Images |
| Lifestyle-Bild nur als Stimmung, Hintergrund, Zierlinie | dekorativ | leer: alt="" | Decorative Images |
| Bild als Link (Produktkachel, Logo zur Startseite), Symbol als Knopf (Lupe, Warenkorb) | funktional | das Ziel oder die Aktion, nicht das Aussehen | Functional Images |
| Bild mit Aufschrift (Siegel, Aktionssticker, Banner mit Text) | Text im Bild | dieselben Wörter wie im Bild | Images of Text |
Vorlage je Bildtyp, mit Beispielen
Die Formeln sind unser Vorschlag, wie man die Regeln des W3C für Produktbilder handhabbar macht; sie sind keine Vorgabe der WCAG. Alle Produkte, Farben und Maße in den Beispielen sind erfundene Beispiele. Eckige Klammern sind Platzhalter.
Hauptbild
Formel: [Produktart] in [Farbe oder Material], [das wichtigste sichtbare Merkmal].
Beispiel: „Rucksack aus gewachstem Canvas in Olivgrün mit zwei Seitentaschen“
Den vollständigen Produktnamen mit Artikelnummer und Marke müssen Sie nicht wiederholen, wenn er als Überschrift direkt daneben steht. Das W3C empfiehlt in seinen Tipps: „The alt text should be the most concise description possible of the image’s purpose.“
Weitere Ansichten desselben Produkts
Formel: [Produktart], [Ansicht]: [was man nur auf dieser Ansicht sieht].
Beispiele: „Rucksack, Rückseite: gepolsterte Träger und Reißverschluss zum Laptopfach“; „Rucksack, geöffnet: Innenfach mit drei Einstecktaschen“
Für Bilder, die zusammengehören, aber jeweils etwas anderes zeigen, schreibt das W3C: „each image needs its text alternative that describes it individually, as well as its relationship within the group“ (Groups of Images). Fünfmal derselbe Alt-Text in einer Galerie erfüllt das nicht.
Farbvarianten
Formel: [Produktart] in [Farbname aus der Variantenauswahl].
Beispiel: „Rucksack in Sandbeige“, wenn der Farbschalter „Sandbeige“ heißt.
Nach unserer Lesart ist die Farbe hier die wesentliche Information, denn ohne sie kann ein blinder Kunde die Variantenbilder nicht unterscheiden. Verwenden Sie denselben Farbnamen wie in Auswahl und Warenkorb, sonst passen Bild und Bestellung nicht zusammen.
Detailbilder
Formel: [Detail] [des Produkts]: [was man daran erkennt].
Beispiel: „Nahaufnahme der Bodennaht: doppelt genäht, Ecken mit Leder verstärkt“
Gerade Detailbilder zeigen oft das Verkaufsargument. Ein Alt-Text wie „Detail“ verschenkt genau das.
Größentabelle, Maßskizze oder Text als Bild
Formel: Inhalt als echter Text oder Tabelle auf der Seite; das Bild bekommt einen kurzen Text, der sagt, was es ist und wo die Angaben stehen.
Beispiel: „Größentabelle für Damenjacken, alle Werte stehen in der Tabelle unter dem Bild“
Eine Größentabelle mit Dutzenden Werten passt in keinen Alt-Text. Das W3C beschreibt für solche Fälle eine zweiteilige Lösung: „The first part is the short description to identify the image and, where appropriate, indicate the location of the long description.“ (Complex Images). Für Daten heißt es im Understanding-Dokument zu 1.1.1: „Where possible and practical, the actual data is provided in a table.“ Zusätzlich verlangt 1.4.5 Bilder von Text (Stufe AA), dass Text als Text dargestellt wird, wenn die Technik das kann: „If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text“, mit Ausnahmen etwa für Logos. Eine Größentabelle lässt sich im Shop als Tabelle bauen; die Bildtabelle sollte also ersetzt oder ergänzt werden.
Für kurze Aufschriften im Bild, etwa ein Siegel oder einen Aktionssticker, gilt: „the text alternative must contain the same text presented in the image“ (Images of Text). Beispiel: „Sommeraktion: 20 Prozent auf alle Rucksäcke“.
Lifestyle-Bilder
Formel mit Information: [Person oder Situation] [mit dem Produkt]: [was man über das Produkt erfährt].
Beispiel: „Person mit 1,80 Meter Körpergröße trägt den Rucksack, er reicht von den Schultern bis zur Hüfte“
Ohne Information: alt="". Zeigt das Bild nur eine Stimmung, die für die Kaufentscheidung nichts beiträgt, ist es dekorativ. Das W3C nennt dafür ein Bild, das „only to add ambiance or visual interest to the page“ dient (Decorative Images).
Dekorative Bilder
Formel: alt="" ohne Leerzeichen zwischen den Anführungszeichen.
Das W3C schreibt: „a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers“ (Decorative Images). Und zum Leerzeichen: „If a space character is present, the image may not be effectively hidden from assistive technologies.“ (Tipps). Leer heißt nur bei dekorativen Bildern richtig. Bei einem Bild in einem Link oder Knopf ist ein fehlender oder leerer Alt-Text laut W3C ein ernstes Problem, weil Screenreader dann typischerweise Dateinamen oder Adresse vorlesen (Functional Images).
Bild als Link oder Knopf
Formel: [Ziel oder Aktion].
Beispiele: „Startseite“ für das Logo oben links, „Suche“ für die Lupe, „Rucksack Canvas Olivgrün“ für eine Produktkachel, die nur aus dem Bild besteht.
Das W3C: „The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.“ (Functional Images). Steht der Produktname schon als Text im selben Link wie das Bild, darf das Bild nach dem W3C leer bleiben, weil es dann keine andere Information trägt als der Linktext. Wie Ihr Theme Kachelbilder ausgibt, legt meist das Theme fest; prüfen Sie es mit einem Screenreader oder einem Prüfwerkzeug, bevor Sie für Kachelbilder eigene Texte schreiben.
Fehlertabelle
| Fehler | Beispiel (erfunden) | Warum es nicht trägt | Besser |
|---|---|---|---|
| Dateiname als Alt-Text oder gar kein Alt-Attribut | „IMG_4711.jpg“ | Für Bilder in Links schreibt das W3C, Screenreader „will typically announce the image file name, the image URL, or the URL for the link destination“ (W3C); das hilft niemandem | Text nach der Vorlage oben |
| „Bild von …“, „Foto von …“ | „Bild von einem Rucksack“ | W3C: „Usually, there’s no need to include words like “image”, “icon”, or “picture” in the alt text.“ Screenreader sagen ohnehin an, dass es ein Bild ist (Tipps) | „Rucksack in Olivgrün, Vorderansicht“ |
| Keyword-Stuffing | „Rucksack Damen Rucksack Herren Rucksack wasserdicht Rucksack günstig“ | Google schreibt: „Überlade alt-Attribute nicht mit Keywords“, das sei nicht nutzerfreundlich und könne dazu führen, „dass deine Website als Spam eingestuft wird“ (Google Search Central) | ein natürlicher Satz, der das Bild beschreibt |
| Gleicher Alt-Text für alle Galeriebilder | fünfmal „Rucksack Canvas“ | Jedes Bild einer Gruppe braucht nach W3C einen eigenen Text (Groups of Images); der Kunde erfährt nicht, was die Ansichten zeigen | Formel „Weitere Ansichten“ |
| Leerzeichen statt leerem Alt | alt=" " | Das Bild wird womöglich nicht ausgeblendet (Tipps) | alt="" |
| Größentabelle nur als Bild | Alt-Text „Größentabelle“ | Die Werte fehlen; 1.1.1 und 1.4.5 sind betroffen | Tabelle als Text, kurzer Hinweis im Alt-Text |
| Ganze Produktbeschreibung im Alt-Text | drei Sätze Werbetext mit Material, Preis und Lieferzeit | Nicht „concise“; Shopify empfiehlt 125 Zeichen oder weniger | ein Satz zum Bild, der Rest gehört in die Beschreibung |
Wo Sie Alt-Texte im Shopsystem pflegen
Die Klickwege stehen so in der Dokumentation der Hersteller, gelesen am 24.10.2026. Je nach Version und Theme können Bezeichnungen abweichen.
Shopify
Laut Shopify-Hilfe „Alt-Text zu Medien hinzufügen“:
- Im Shopify-Adminbereich zu Produkte gehen.
- Auf den Namen des Produkts klicken.
- Auf der Produktdetailseite auf ein Produktmedienelement klicken, um die Seite Medienvorschau zu öffnen.
- Auf Alt-Text hinzufügen klicken, den Text eingeben und Alt-Text speichern wählen.
- Mit dem X die Vorschau verlassen.
Shopify schreibt dazu: „Halte deinen Alt-Text kurz und beschreibend. Die maximale Länge beträgt 512 Zeichen, es werden jedoch 125 oder weniger empfohlen.“ Wiederholen Sie die Schritte für jedes Bild der Galerie, auch für die Variantenbilder. Was Shopify sonst zur Barrierefreiheit bietet, steht in Shopify barrierefrei machen nach BFSG.
Massenpflege: Die Shopify-Hilfe zum Produkt-CSV führt die Spalte Image alt text auf. Sie können also Produkte exportieren, die Alt-Texte in der Tabelle ergänzen und die Datei wieder importieren. Testen Sie das zuerst mit wenigen Produkten und einer Sicherung des Exports.
WooCommerce und WordPress
WooCommerce verwaltet Produktbilder über die WordPress-Mediathek. Laut WooCommerce-Dokumentation öffnen Sie ein Produkt über Products > All Products; dort wählen Sie in den Kästen Product image und Product gallery Bilder aus der Mediathek. Den Alt-Text tragen Sie am Bild selbst ein. Laut WordPress-Dokumentation zur Mediathek öffnet ein Klick auf ein Bild in der Rasteransicht von Media > Library den Dialog Attachment Details mit dem Feld Alt Text.
Praktisch für viele Bilder: Laut WordPress-Doku speichert der Dialog Änderungen automatisch, und Sie wechseln mit den Pfeiltasten links und rechts zum nächsten Bild. So arbeiten Sie eine Mediathek Bild für Bild ab, ohne den Dialog zu schließen. Weitere Schritte für WooCommerce stehen in WooCommerce barrierefrei machen.
Massenpflege per CSV: Im Product CSV Import Schema von WooCommerce nimmt die Spalte Images Bild-URLs auf. Eine Spalte für Alt-Texte haben wir dort nicht gefunden. Nach unserer Lesart brauchen Sie für Massenpflege per Datei deshalb eine Erweiterung; prüfen Sie deren Dokumentation, bevor Sie sich darauf verlassen.
Shopware 6
Laut Shopware-Dokumentation „Medien“ finden Sie die Medienverwaltung unter Inhalte > Medien. Wählen Sie ein Bild aus; auf der rechten Seite stehen dann Informationen und Aktionen. Im Bereich Metadaten können Sie laut Doku „direkt den Namen, den Alt-Text und den Meta-Titel des Mediums ändern“. Der Alt-Text hängt am Medium. Nach unserer Lesart trägt ein Bild, das Sie bei mehreren Produkten verwenden, deshalb überall denselben Text. Mehr zu Shopware steht in Shopware 6 barrierefrei.
Massenpflege per CSV: Laut Shopware-Dokumentation Import/Export starten Sie den Import unter Einstellungen > Automatisierung > Import/Export im Reiter Import und wählen das Profil Standardprofil Medien. Die Beispieldatei enthält unter anderem die Spalten url, title und alt; die Doku beschreibt alt als „Alternative SEO Titel“. Laut der englischen Fassung derselben Seite sind Medienfelder sprachabhängig, mit Spalten wie translations.de-DE.alt. Für einen mehrsprachigen Shop pflegen Sie den Alt-Text also je Sprache.
KI-generierte Alt-Texte: nützlich als Entwurf, nicht als Ergebnis
Shopify schreibt in der Hilfe, der Medien-Editor schlage „möglicherweise Alt-Text für Bilder vor, für die noch kein Alt-Text eingegeben wurde“. Dazu kommen Apps und Plugins, die Alt-Texte für ganze Kataloge erzeugen. Das spart Zeit beim ersten Entwurf. Aber ein Bilderkennungsmodell sieht nur das Bild, nicht den Zweck auf Ihrer Seite, und genau den verlangt das W3C. Typische Schwächen, auf die Sie beim Prüfen achten sollten:
- Die Farbe heißt anders als in der Variantenauswahl, etwa „Grün“ statt „Olivgrün“.
- Alle Galeriebilder bekommen fast denselben Text.
- Der Text beschreibt Hintergrund und Model statt des Produkts.
- Dekorative Bilder bekommen trotzdem einen Text.
- Aufschriften im Bild, etwa Maße oder Siegel, werden falsch oder gar nicht wiedergegeben.
Unsere Empfehlung: KI-Vorschläge übernehmen Sie erst, wenn Sie jeden Text gegen die Vorlage oben gelesen haben. Anbieterangaben wie „entspricht der WCAG“ in App-Beschreibungen ersetzen diese Prüfung nicht.
Checkliste für eine Produktseite
- Jedes Bild der Galerie hat einen eigenen Alt-Text, der sagt, was diese Ansicht zeigt.
- Variantenbilder nennen die Farbe so, wie sie in der Auswahl heißt.
- Kein Alt-Text beginnt mit „Bild von“ oder ist ein Dateiname.
- Kein Alt-Text ist eine Liste von Suchbegriffen.
- Größentabelle, Maße und Pflegehinweise stehen als Text auf der Seite.
- Aufschriften im Bild stehen wörtlich im Alt-Text.
- Reine Stimmungsbilder und Zierelemente haben alt="" ohne Leerzeichen.
- Symbole als Knopf oder Link nennen die Aktion oder das Ziel.
- Mehrsprachiger Shop: Alt-Texte gibt es in jeder Sprache.
Fehlende Alt-Attribute findet ein automatischer Test zuverlässig. Ob ein vorhandener Alt-Text das Bild richtig beschreibt, kann er nicht beurteilen; welche Kriterien Werkzeuge überhaupt prüfen können, erklärt WCAG-Check online: welche Kriterien ein Tool prüft. Hören Sie deshalb eine Produktseite einmal mit einem Screenreader, etwa VoiceOver auf dem Mac oder iPhone oder NVDA unter Windows, und fragen Sie sich bei jedem Bild: Wüsste ich jetzt, was ich kaufe?
Ihr nächster Schritt
Der kostenlose Scan prüft Ihre Startseite, eine Produktseite und den Warenkorb automatisch gegen die WCAG-Regeln, ohne Anmeldung, und zeigt, was zuerst behoben werden sollte. Automatische Werkzeuge finden nur einen Teil aller Barrieren: Ob Ihre Alt-Texte die Produktbilder treffend beschreiben, prüfen Sie zusätzlich von Hand mit der Checkliste oben.
Stand: 24.10.2026. Quellen gelesen am 24.10.2026.