Shopify Alt Text: Alt-Texte für Produktbilder

Sachinformation, keine Rechtsberatung. Für Ihre konkrete Situation fragen Sie bitte eine Anwältin oder einen Anwalt.

Von Sieghart Michielsen · Veröffentlicht 25. Oktober 2026

Ein Alt-Text (Alternativtext) ist die Beschreibung, die ein Screenreader vorliest, wenn jemand ein Bild nicht sehen kann. In einem Onlineshop sind Bilder oft die wichtigste Information: Farbe, Schnitt, Material, Größe im Raum. Fehlt der Alternativtext, hört eine blinde Kundin auf der Produktseite im ungünstigsten Fall nur einen Dateinamen.

Dieser Beitrag zeigt, was einen guten Alt-Text für Produktbilder ausmacht, wo Shopify Alt-Texte speichert, wie Sie viele Bilder auf einmal bearbeiten und wie Themes wie Dawn den Text ausgeben. Den rechtlichen Hintergrund für deutsche Shops finden Sie im Beitrag BFSG für Shopify-Shops.

Kurz zusammengefasst

WCAG 1.1.1 (Stufe A) verlangt für Nicht-Text-Inhalte eine Textalternative, die denselben Zweck erfüllt. Dekorative Bilder bekommen ein leeres alt="".
In unserer Auswertung von 5.463 EU-Shopify-Startseiten hatten 36,0 % Bilder ohne alt-Attribut, bei .de-Domains 34,2 % (automatisierte Prüfung, nur Startseiten).
Shopify speichert Alt-Texte an mehreren Stellen: Produktmedien, Dateien, Kollektions- und Blogbilder, Theme-Bilder und Bilder im Rich-Text-Editor.
Für viele Produktbilder auf einmal eignet sich die Produkt-CSV mit der Spalte „Image alt text“.
KI-Vorschläge sind ein Entwurf. Ein Mensch, der das Produkt kennt, sollte jeden Text prüfen.

Was WCAG 1.1.1 verlangt

Das Erfolgskriterium 1.1.1 Nicht-Text-Inhalt der WCAG 2.1 verlangt, dass alle Nicht-Text-Inhalte eine Textalternative haben, „die demselben Zweck dient“. Die europäische Norm EN 301 549 übernimmt diese Anforderung für Webinhalte. Entscheidend ist das Wort Zweck: Ein Alt-Text beschreibt nicht jedes Pixel, sondern gibt die Information wieder, die das Bild an dieser Stelle trägt.

Der Entscheidungsbaum für Alt-Texte der W3C WAI hilft bei der Einordnung. Vereinfacht gibt es drei Fälle:

Informative Bilder (Produktfotos, Größentabellen als Bild, Pflegesymbole): Der Alt-Text gibt die Information wieder.
Funktionale Bilder (ein Bild, das als Link oder Button dient, etwa ein Kollektionsbild ohne weiteren Linktext): Der Alt-Text nennt das Ziel oder die Funktion, zum Beispiel „Sommerkleider ansehen“.
Dekorative Bilder (Hintergrundtexturen, Trennlinien, Stimmungsbilder ohne Information): leeres alt="", damit Hilfsmittel sie überspringen. Siehe die WAI-Hinweise zu dekorativen Bildern.

Fehlendes Attribut und schlechter Text sind zwei verschiedene Probleme

Automatisierte Tests wie axe prüfen bei der Regel image-alt, ob ein Bild überhaupt eine Textalternative hat. Ein leeres alt="" gilt dabei als bewusste Entscheidung für „dekorativ“ und fällt nicht auf. Ob der Text gut ist, kann kein Tool beurteilen: „IMG_4711.jpg“, „Bild“ oder ein leeres alt bei einem Produktfoto bestehen den automatischen Test, sind aber trotzdem Barrieren. Die 36,0 % aus unserer Studie zählen nur das erste Problem, die fehlenden Attribute. Die Qualität der vorhandenen Texte ist darin nicht erfasst.

Gute Alt-Texte für Produktbilder: Beispiele

Ein guter Alt-Text beantwortet die Frage: Was würde ich am Telefon sagen, wenn jemand das Bild nicht sehen kann? Für einen Mode- und einen Wohnshop sieht das so aus:

Beispiele für Alt-Texte in einem Mode- und einem Wohnshop
Bild	Schwacher Alt-Text	Besserer Alt-Text
Hauptbild eines Leinenkleids	Leinenkleid Mila	Frau im knielangen Leinenkleid in Salbeigrün mit V-Ausschnitt und Bindegürtel, Vorderansicht
Detailbild desselben Kleids	Leinenkleid Mila 2	Nahaufnahme der Kokosnussknöpfe und der groben Leinenstruktur
Farbvariante	Leinenkleid Mila	Dasselbe Kleid in Terrakotta, Rückansicht mit tiefem Rückenausschnitt
Sofa im Wohnzimmer	Sofa, Couch, Sofa kaufen, Wohnzimmer Sofa	Dreisitzer-Sofa aus hellgrauem Bouclé mit Eichenfüßen in einem hellen Wohnzimmer, zum Größenvergleich ein Couchtisch davor
Banner mit Text „-30 % auf Leuchten“	Banner	Minus 30 Prozent auf alle Leuchten bis Sonntag
Hintergrundfoto Holzstruktur	Holz	leeres alt (dekorativ)

Fünf Regeln, die sich bewähren

Den Produkttitel nicht wörtlich wiederholen. Der Titel steht meist direkt neben dem Bild und wird ohnehin vorgelesen. Der Alt-Text ergänzt, was der Titel nicht sagt: Ansicht, Farbe, Detail, Größe am Modell.
Jedes Bild anders beschreiben. Fünf Bilder mit identischem Alt-Text klingen für Screenreader-Nutzer wie fünfmal dasselbe Foto. Nennen Sie, was das jeweilige Bild zeigt: Rückansicht, Detail, Tragebild.
Varianten und Farben benennen. Gehört ein Bild zu einer Farbvariante, nennen Sie die Farbe im Alt-Text. So hören Kundinnen beim Durchblättern, welche Variante gerade zu sehen ist.
Text im Bild vollständig wiedergeben. Rabatte, Größentabellen oder Pflegehinweise, die nur als Bild vorliegen, gehören in den Alt-Text oder besser als echter Text auf die Seite. Lange Tabellen sind als Bild ungeeignet.
Keine Floskeln und keine Keyword-Listen. „Bild von“ oder „Foto von“ ist überflüssig, Screenreader sagen ohnehin „Bild“. Suchbegriffe ohne Beschreibung helfen niemandem.

Logos und Icons

Das Shop-Logo im Header ist in aller Regel ein Link zur Startseite. Sein Alt-Text sollte den Shopnamen enthalten, etwa „Leinenwerk, zur Startseite“ oder nur „Leinenwerk“, wenn das Theme den Link bereits als Startseite kennzeichnet. Icons neben einem sichtbaren Text („Warenkorb“, „Konto“) sind dekorativ. Icons ohne Text, etwa eine Lupe als Such-Button, brauchen einen zugänglichen Namen am Button selbst. Das ist meist eine Frage des Theme-Codes, nicht des Alt-Texts in der Medienbibliothek; mehr dazu im Beitrag Shopify-Theme barrierefrei einstellen.

Wo Shopify Alt-Texte speichert

Alt-Texte liegen in Shopify nicht an einer zentralen Stelle. Die Menünamen unten stammen aus der englischen Shopify-Hilfe; in der deutschen Oberfläche sind sie übersetzt.

Produktbilder und -medien

Laut Shopify-Hilfe zu Alt-Texten für Medien: unter Products das Produkt öffnen, ein Medium anklicken, im Vorschaufenster Add alt text wählen, Text eingeben und mit Save alt text speichern. Erlaubt sind bis zu 512 Zeichen, Shopify empfiehlt 125 oder weniger.

Die Seite „Files“

Unter Content > Files finden Sie alle hochgeladenen Dateien. Ein Klick auf das Vorschaubild öffnet die Bearbeitung mit der Aktion Add alt text. Wichtig: Laut Shopify-Hilfe zu Dateien gelten Änderungen auf der Files-Seite überall, wo die Datei im Shop verwendet wird. Das ist praktisch für Banner, die auf mehreren Seiten erscheinen, aber riskant, wenn dasselbe Bild an einer Stelle informativ und an einer anderen dekorativ ist.

Kollektions- und Blogbilder

Für das Bild einer Kollektion oder eines Blogbeitrags öffnen Sie die Kollektion bzw. den Beitrag, klicken unter dem Bild auf Update und dann Edit image und tragen den Alternativtext ein (Shopify-Hilfe zu Bild-Alt-Texten und SEO). Ob das Theme den Text auf der Kollektionsseite und in Kollektionskacheln ausgibt, hängt vom Theme ab.

Bilder in Theme-Sektionen

Banner, Slideshows und „Bild mit Text“-Sektionen bekommen ihren Alt-Text im Theme-Editor: Sektion auswählen, am Bild auf Edit klicken, Text eingeben, speichern (Shopify-Hilfe zu Theme-Bildern). Laut derselben Seite kann der Medien-Editor Alt-Texte vorschlagen, wenn noch keiner eingetragen ist; ein angenommener Vorschlag wird an der Datei gespeichert.

Bilder im Rich-Text-Editor

In Produktbeschreibungen, Seiten und Blogbeiträgen eingefügte Bilder bearbeiten Sie per Doppelklick auf das Bild im Editor; im Dialog Edit image können Sie den Alt-Text ergänzen (Shopify-Hilfe zum Rich-Text-Editor). Diese Bilder werden bei Prüfungen gern übersehen, weil sie in keiner Medienliste auftauchen.

Viele Bilder auf einmal: Massenbearbeitung

Produkt-CSV mit der Spalte „Image alt text“

Der verlässlichste Weg für viele Produktbilder ist der CSV-Export. Die Shopify-Dokumentation zur Produkt-CSV führt die Spalte „Image alt text“ neben „Product image URL“ und „Image position“. So gehen Sie vor:

Produkte exportieren und die Originaldatei als Sicherung aufbewahren.
In der Tabellenkalkulation die Spalte „Image alt text“ Zeile für Zeile füllen. Jede Bildzeile steht für ein Bild; die Bildposition zeigt, welches.
Nicht benötigte Spalten nicht verändern. Für Aktualisierungen verlangt Shopify mindestens „URL handle“ und „Title“.
Zuerst mit zwei oder drei Produkten testen, dann den vollständigen Import mit „Overwrite products with matching handles“ durchführen.

Achtung: Beim Überschreiben ersetzt der Import die Werte der importierten Spalten. Ein Fehler in der Datei kann so viele Produkte gleichzeitig verändern. Deshalb der Testlauf und die Sicherung.

Files-Seite, Apps und KI-Vorschläge

Für Banner und andere Theme-Bilder ist die Files-Seite der schnellste Weg, weil Sie dort alle Dateien in einer Liste sehen. Im Shopify App Store gibt es außerdem Apps, die Alt-Texte gesammelt bearbeiten oder per KI erzeugen. Prüfen Sie vor der Installation, ob die App bestehende Texte überschreibt und ob sie dekorative Bilder als solche belassen kann.

Für KI-generierte Alt-Texte gilt: Sie sind ein Entwurf. Ein Modell sieht „ein grünes Kleid“, weiß aber nicht, dass die Farbe im Shop „Salbei“ heißt, dass das Material Leinen ist oder dass das Bild die Variante zeigt, die gerade ausverkauft ist. Planen Sie eine menschliche Durchsicht ein, am besten durch die Person, die auch die Produktbeschreibungen schreibt.

Wie Themes den Alt-Text ausgeben

Der beste Alt-Text nützt nichts, wenn das Theme ihn nicht ins HTML schreibt. Im Shopify-Theme Dawn geben die Produktkacheln den Alt-Text des Medienobjekts aus (snippets/card-product.liquid), ebenso die Produktmedien und die Kollektionskacheln. Ist das Feld leer, steht im HTML ein leeres alt="": Das Bild wird dann als dekorativ behandelt und vom Screenreader übersprungen. Der automatische Test meldet das nicht, die Information fehlt trotzdem.

Der Liquid-Filter image_tag setzt das alt-Attribut laut Shopify-Dokumentation standardmäßig auf den Alt-Text des Mediums, bei Produkt-, Kollektions- und Artikelbildern alternativ auf den Titel der Ressource. Sie können den Wert mit dem Parameter alt überschreiben. Fehlende alt-Attribute entstehen deshalb seltener in Standard-Sektionen als in selbst gebauten Sektionen, in eingebetteten App-Blöcken oder in HTML, das per Copy-and-paste in Seiten gelandet ist.

Wenn Sie in einer eigenen Sektion ein <img>-Tag von Hand schreiben, übernehmen Sie das Muster aus Dawn und geben Sie den Alt-Text des Bildes aus der Sektionseinstellung aus:

<img
  src="{{ section.settings.image | image_url: width: 1200 }}"
  alt="{{ section.settings.image.alt | escape }}"
  width="{{ section.settings.image.width }}"
  height="{{ section.settings.image.height }}"
  loading="lazy"
>

Der Filter escape sorgt dafür, dass Anführungszeichen im Alt-Text das HTML nicht zerbrechen. Ob ein konkretes Theme oder eine App das alt-Attribut korrekt setzt, sehen Sie am schnellsten mit einem automatischen Test. Prüfen Sie Ihren Shop kostenlos auf fehlende Alternativtexte und andere automatisch erkennbare Barrieren.

So gehen Sie vor

Bestand aufnehmen: Startseite, eine Kollektion und drei Produktseiten automatisch prüfen und Bilder ohne alt-Attribut notieren.
Theme und Apps zuerst: Fehlt das Attribut in einer Sektion, beheben Sie es einmal im Code statt auf jeder Seite.
Inhalte pflegen: Produktbilder per CSV, Theme-Bilder im Theme-Editor oder auf der Files-Seite, Bilder in Texten im Rich-Text-Editor.
Stichprobe von Hand: Hören Sie eine Produktseite mit VoiceOver oder NVDA an. Klingt jedes Bild sinnvoll?
Neue Produkte einplanen: Machen Sie den Alt-Text zum Pflichtfeld in Ihrem Prozess für neue Produkte, wie Titel und Preis.

Weitere Punkte rund um Theme, Formulare und Checkout finden Sie in der BFSG-Checkliste für Shopify-Shops.

Wie Testamur hilft

Der kostenlose Check von Testamur findet Bilder ohne alt-Attribut und weitere automatisch erkennbare Barrieren und ordnet sie WCAG und EN 301 549 zu. Ob ein vorhandener Alt-Text das Bild gut beschreibt, kann er nicht beurteilen; das bleibt Handarbeit. Die Shopify-App, die sich noch in Entwicklung befindet, soll festhalten, was Sie geprüft, korrigiert und veröffentlicht haben, mit Datum, und die Informationen zur Barrierefreiheit entwerfen. Testamur ist kein Overlay und verändert Ihren Shop nicht.

Quellen

Prüfen Sie Ihren Shop kostenlos

Sehen Sie, welche Barrieren ein automatischer Check in Ihrem eigenen Shopify-Shop findet: die Startseite und, soweit Ihre robots.txt es erlaubt, Kollektions-, Produkt- und Rechtsseiten, zugeordnet zu WCAG und EN 301 549. Kostenlos, Ergebnis per E-Mail. Automatische Tests finden einen Teil der Barrieren, nicht alle.

Shop kostenlos prüfen

Häufige Fragen

Wie lang sollte ein Alt-Text in Shopify sein?

So kurz wie möglich, so lang wie nötig. Shopify erlaubt bis zu 512 Zeichen und empfiehlt 125 Zeichen oder weniger. Für Produktbilder reicht meist ein Satz, der beschreibt, was auf dem Bild zu sehen ist und was der Produkttitel noch nicht sagt.

Kann ich Alt-Texte in Shopify für viele Bilder auf einmal bearbeiten?

Ja, über den Produkt-CSV-Export und -Import: Die CSV-Datei hat die Spalte „Image alt text“. Exportieren Sie die Produkte, füllen Sie die Spalte aus und importieren Sie die Datei mit der Option zum Überschreiben von Produkten mit gleichem Handle. Testen Sie das vorher mit wenigen Produkten und behalten Sie eine Sicherungskopie des Exports.

Braucht jedes Bild einen Alt-Text?

Jedes Bild braucht ein alt-Attribut, aber nicht jedes einen beschreibenden Text. Rein dekorative Bilder bekommen ein leeres alt-Attribut, damit Screenreader sie überspringen. Bilder, die Informationen tragen oder einen Link bilden, brauchen einen Text, der diese Information oder das Linkziel wiedergibt.

Darf ich Alt-Texte von einer KI schreiben lassen?

Als Entwurf ja, ungeprüft nein. KI-Vorschläge beschreiben oft das Offensichtliche, verwechseln Material oder Farbe oder wiederholen den Produkttitel. Lassen Sie jeden Vorschlag von einer Person prüfen, die das Produkt kennt.

Hilft der Alt-Text auch bei der Google-Bildersuche?

Shopify nennt Alt-Texte ausdrücklich auch als SEO-Faktor. Schreiben Sie sie trotzdem für Menschen, die das Bild nicht sehen. Ein Alt-Text voller Suchbegriffe ist für Screenreader-Nutzer eine Zumutung und beschreibt das Bild nicht.

Über den Autor

Sieghart Michielsen. Sieghart Michielsen entwickelt Testamur, eine Shopify-App, die EU-Shops auf Barrieren prüft und einen datierten Verlauf von Prüfungen, Korrekturen und Informationen zur Barrierefreiheit führt. Er schreibt diese Ratgeber anhand der Gesetzestexte, der Angaben der Behörden und öffentlicher Daten. Er ist kein Anwalt.