Produktbilder sind das Herzstück jedes Shopify-Stores, aber für blinde und sehbehinderte Kundinnen und Kunden existieren sie nur dann, wenn ein aussagekräftiger Alternativtext sie beschreibt. Ein Alternativtext (oft Alt-Text genannt) ist der Text, den ein Screenreader vorliest, wenn er auf ein Bild trifft. Fehlt er, hört die Kundin entweder gar nichts oder im schlimmsten Fall einen kryptischen Dateinamen. Über die harmonisierte Norm EN 301 549 v3.2.1 ist ein korrekter Alternativtext nach dem Barrierefreiheitsstärkungsgesetz (BFSG) verbindlich, das seit dem 28. Juni 2025 für alle Anbieter oberhalb der Kleinstunternehmen-Schwelle gilt. Dieser Beitrag zeigt, wann ein Bild einen Alt-Text braucht, wann ein leeres Alt-Attribut korrekt ist, wo Shopify das Feld pflegt und wie Sie an konkreten Beispielen gute von schlechten Alt-Texten unterscheiden.
Alternativtexte erfüllen mehrere Aufgaben gleichzeitig. Screenreader-Nutzer erfahren über sie, was auf einem Bild zu sehen ist. Bei einer langsamen Verbindung oder einem Ladefehler zeigt der Browser den Alt-Text anstelle des Bildes an. Suchmaschinen nutzen ihn, um den Bildinhalt einzuordnen. Im E-Commerce ist die Wirkung unmittelbar: Wer ein Produktfoto nicht sehen kann und keine Beschreibung hört, kann Farbe, Schnitt, Material oder Verwendung nicht beurteilen und damit die Kaufentscheidung nicht treffen. Ein gut geschriebener Alt-Text ist deshalb kein lästiges Pflichtfeld, sondern Teil der Produktbeschreibung.
Das BFSG setzt die EU-Richtlinie 2019/882 (European Accessibility Act, EAA) in deutsches Recht um. Online-Shops fallen nach § 1 Abs. 3 Nr. 5 BFSG als "Dienstleistungen im elektronischen Geschäftsverkehr" in den Anwendungsbereich. Über Anlage I der EU-Richtlinie 2019/882 verweist das BFSG auf die harmonisierte Norm EN 301 549 v3.2.1, die in ihrem Kapitel 9 die WCAG-2.1-AA-Erfolgskriterien für Webinhalte übernimmt. Das hier maßgebliche Kriterium ist WCAG 1.1.1 (Non-text Content, Stufe A).
WCAG 1.1.1 ist Stufe A und damit das niedrigste, am striktesten geforderte Konformitätsniveau. Das Kriterium verlangt, dass jeder Nicht-Text-Inhalt eine Textalternative besitzt, die denselben Zweck erfüllt. Für rein dekorative Inhalte sieht das Kriterium ausdrücklich vor, dass sie so umgesetzt werden, dass assistive Technik sie ignorieren kann. Genau dafür existiert das leere Alt-Attribut alt="".
Bei Verstößen sieht § 37 BFSG Bußgelder vor. Nach § 37 Abs. 2 BFSG beträgt der Rahmen für das nicht konforme Anbieten oder Erbringen einer Dienstleistung bis zu 100.000 EUR. AccessifyAI hilft, solche Verstöße zu finden und zu beheben, garantiert aber keine Rechts- oder BFSG-Konformität. Die rechtliche Verantwortung trägt nach § 8 BFSG der Diensteanbieter, also der Händler.
Vom Anwendungsbereich ausgenommen sind nach § 3 Abs. 3 BFSG nur Kleinstunternehmen, also Unternehmen mit weniger als zehn Beschäftigten UND einem Jahresumsatz oder einer Jahresbilanzsumme unter zwei Millionen EUR. Beide Bedingungen müssen kumulativ erfüllt sein.
Die wichtigste Entscheidung treffen Sie vor dem Schreiben: Trägt das Bild Information, oder ist es reine Dekoration? Daraus ergeben sich drei Fälle.
| Fall |
Beispiel |
Richtige Lösung |
| Informatives Bild |
Produktfoto, Detailaufnahme, Größentabelle als Grafik |
Aussagekräftiger Alt-Text |
| Dekoratives Bild |
Verzierung, Trennlinie, Hintergrund-Muster, reines Stimmungsbild ohne Zusatzinfo |
Leeres Attribut alt="" |
| Funktionales Bild |
Bild, das als Link oder Button wirkt (etwa ein klickbares Logo) |
Alt-Text beschreibt das Ziel, nicht das Bild |
Der häufigste Irrtum ist, jedem Bild einen Alt-Text geben zu wollen. Ein dekoratives Bild mit einem überflüssigen Alt-Text stört Screenreader-Nutzer, weil die Sprachausgabe irrelevante Inhalte vorliest. Ebenso falsch ist es, ein informatives Produktbild ohne Alt-Text zu lassen. Beide Fehler verstoßen gegen WCAG 1.1.1. Entscheidend ist: Ein dekoratives Bild bekommt ein bewusst leeres alt="", kein fehlendes Attribut. Fehlt das Attribut ganz, lesen manche Screenreader ersatzweise den Dateinamen vor.
Shopify bietet das Alt-Feld an mehreren Stellen an, und genau diese Verteilung führt zu Lücken.
Produktmedien im Admin. Öffnen Sie ein Produkt, fahren Sie über ein Bild und klicken Sie auf "Alt-Text hinzufügen" (im Englischen "Add alt text"). Dieser Text wird von den meisten Themes automatisch in das alt-Attribut der Produktbilder übernommen.
Banner und Slideshows in den Section-Einstellungen. Bilder, die Sie über den Theme-Editor in Sections einfügen (Hero-Banner, Bildbanner, Slideshows), haben oft ein eigenes Alt-Feld in den Block-Einstellungen. Dieses Feld ist getrennt von den Produktmedien und wird leicht übersehen.
CSV-Import. Beim Import von Produkten über CSV ist die Spalte für den Bild-Alt-Text (Image Alt Text) optional. Wer sie leer lässt, importiert Hunderte Bilder ohne Alternativtext auf einen Schlag. Das ist in der Praxis die größte Einzelquelle für fehlende Alt-Texte in gewachsenen Stores.
Im Theme-Code greift Shopify den hinterlegten Wert über das Liquid-Attribut media.alt beziehungsweise image.alt ab. Ein typisches Produktbild-Snippet sieht so aus:
{{ image | image_url: width: 800 | image_tag:
alt: image.alt,
loading: 'lazy',
widths: '400, 800, 1200'
}}
Liefert image.alt einen leeren Wert, erzeugt der Filter image_tag ein leeres alt="". Das ist technisch valide, hilft Screenreader-Nutzern bei einem informativen Produktbild aber nicht weiter. Der eigentliche Hebel liegt also nicht im Theme-Code, sondern in der gepflegten Datenqualität: Der Alt-Text muss im Admin oder per Import vorhanden sein.
Für ein bewusst dekoratives Bild, das Sie direkt im Theme einbinden, setzen Sie das leere Attribut explizit:
<img src="{{ 'trennlinie.svg' | asset_url }}" alt="">
Ein guter Alt-Text beschreibt das, was eine sehende Person auf dem Bild als kaufrelevant wahrnimmt: Produktart, wesentliche Merkmale, gegebenenfalls Verwendung oder Kontext. Er ist knapp, meist ein Satz, und verzichtet auf Füllwörter wie "Bild von" oder "Foto, das zeigt", weil der Screenreader das Element bereits als Grafik ankündigt.
Mode. Schlecht: IMG_4821.jpg. Ebenfalls schlecht, weil nichtssagend: Kleid. Gut: Knielanges Sommerkleid in Marineblau mit weißem Punktemuster und kurzen Ärmeln.
Möbel. Schlecht: Stuhl Produktbild. Gut: Eichenholz-Esszimmerstuhl mit gepolsterter, grauer Sitzfläche und schwarzen Metallbeinen.
Lebensmittel. Schlecht: Olivenöl Flasche Foto hochwertig kaufen günstig. Das ist Keyword-Stuffing und stört die Sprachausgabe. Gut: Dunkle 500-ml-Glasflasche natives Olivenöl extra mit Schraubverschluss.
Drei Regeln lassen sich daraus ableiten. Erstens: Kontext statt Dateiname. Ein Dateiname wie IMG_4821.jpg ist nie ein gültiger Alt-Text. Zweitens: keine Wiederholung von Keywords. Ein Alt-Text ist kein Ort für Suchbegriffe, das schadet der Barrierefreiheit und bringt für die Suchmaschinenplatzierung nichts. Drittens: nicht mit der Bildunterschrift verwechseln. Wenn der Produkttitel direkt neben dem Bild als sichtbarer Text steht, muss der Alt-Text nicht wortgleich denselben Inhalt doppeln, sondern soll das beschreiben, was nur im Bild sichtbar ist.
Produktbild mit Text im Bild. Enthält ein Bild selbst Text (etwa "20% Rabatt" auf einem Banner), muss dieser Text in den Alt-Text übernommen werden, sonst geht die Information für Screenreader-Nutzer verloren. Alt-Text etwa: Sommeraktion: 20 Prozent Rabatt auf alle Sandalen.
Lookbook und Stimmungsbilder. Ein reines Stimmungsbild auf einer Kollektionsseite, das keine kaufrelevante Information trägt, kann dekorativ sein und ein leeres alt="" erhalten. Zeigt das Bild dagegen ein konkretes, kaufbares Produkt, ist es informativ und braucht eine Beschreibung.
Logo. Das Shop-Logo im Header ist meist verlinkt und führt zur Startseite. Es ist also funktional. Der Alt-Text beschreibt dann den Ziel- beziehungsweise Shopnamen, nicht das grafische Aussehen. In Shopify-Themes wird das Logo häufig so eingebunden:
<a href="{{ routes.root_url }}">
{{ settings.logo | image_url: width: 300 | image_tag:
alt: shop.name
}}
</a>
Hier liefert shop.name einen sinnvollen Alt-Text. Wäre das Attribut leer, hörte ein Screenreader-Nutzer nur "Link" ohne Ziel.
Icon-Buttons. Ein Bild oder Symbol, das als Button wirkt (etwa ein Lupensymbol für die Suche oder ein Herz für die Wunschliste), braucht einen zugänglichen Namen, der die Funktion beschreibt. Bei einem reinen Icon ohne sichtbaren Text geschieht das nicht über alt, sondern über die Beschriftung des Buttons, üblicherweise per aria-label:
<button type="submit" aria-label="Suche starten">
{% render 'icon-search' %}
</button>
So hört ein Screenreader-Nutzer "Suche starten, Schaltfläche" statt eines unbeschrifteten Buttons. Ein unbeschrifteter Icon-Button verstößt nicht gegen WCAG 1.1.1 im engeren Sinn, sondern gegen WCAG 4.1.2 (Name, Role, Value, Stufe A), gehört aber praktisch zum selben Themenkomplex.
Alternativtexte lassen sich teilweise automatisiert prüfen. Werkzeuge erkennen zuverlässig, ob ein alt-Attribut fehlt oder leer ist. Ob ein vorhandener Alt-Text inhaltlich sinnvoll ist, kann nur ein Mensch beurteilen, denn alt="Produktbild" besteht jede technische Prüfung, hilft aber niemandem.
| Werkzeug |
Zweck |
Kosten |
| axe DevTools |
Erkennt fehlende und leere Alt-Attribute |
kostenlose Variante |
| WAVE (WebAIM) |
Markiert Bilder ohne Alt-Text direkt auf der Seite |
kostenlos |
| Manuelle Sichtprüfung |
Beurteilt, ob der Alt-Text inhaltlich passt |
kostenlos |
| NVDA Screenreader |
Liest die Seite vor wie ein blinder Nutzer |
kostenlos |
| AccessifyAI |
Shopify-spezifische Überprüfung mit Liquid-Korrekturvorschlägen |
Free-Tier, ab 9,99 USD/Monat |
Ein schneller manueller Test ohne Zusatzwerkzeug: Schalten Sie in den Entwicklerwerkzeugen Ihres Browsers das Laden von Bildern ab oder nutzen Sie die WAVE-Browser-Erweiterung. Überall, wo nun statt eines Bildes ein leerer Platz oder ein Dateiname erscheint, fehlt ein sinnvoller Alt-Text. Gehen Sie anschließend mit NVDA durch eine Produktseite und hören Sie zu: Beschreibt die Sprachausgabe das Produkt so, dass Sie es ohne den Bildschirm verstehen würden?
Welche Bilder in Ihrem konkreten Store ohne oder mit unbrauchbarem Alt-Text ausgespielt werden, zeigt nur eine echte Überprüfung auf Ihrer aktuellen Theme-Version und im installierten Zustand mit allen aktiven Apps. Ich habe AccessifyAI entwickelt, weil allgemeine Werkzeuge zwar ein fehlendes Alt-Attribut melden, aber nicht sagen, in welcher Liquid-Datei oder welchem Section-Snippet die Korrektur erfolgt. AccessifyAI ordnet den Befund dem Shopify-Code-Modell zu und gibt statt eines Overlays einen Korrekturvorschlag als Liquid-Diff aus, den Sie vor der Übernahme begutachten können. Wenn Sie zunächst nur sehen wollen, wie es um Ihren Store steht, können Sie ohne Installation den kostenlosen On-Page-Scanner auf accessify.ensomedia.pl nutzen. Die App selbst finden Sie im Shopify App Store.
- Prüfen Sie eine Stichprobe Ihrer Produktseiten mit WAVE oder axe DevTools auf fehlende und leere Alt-Attribute.
- Arbeiten Sie die Produkte mit den meisten Aufrufen zuerst ab und tragen Sie aussagekräftige Alt-Texte direkt im Admin nach.
- Prüfen Sie alle Banner und Slideshows im Theme-Editor separat, denn deren Alt-Feld ist von den Produktmedien getrennt.
- Kontrollieren Sie Ihre CSV-Importvorlage und füllen Sie künftig die Spalte für den Bild-Alt-Text.
- Setzen Sie für bewusst dekorative Bilder im Theme ein explizites
alt="".
- Planen Sie eine erneute Überprüfung nach jedem größeren Produktimport und nach jedem Theme-Update.
Weitere fachliche Vertiefung finden Sie in unserem Beitrag zu WCAG 2.2 für Shopify-Händler und in der BFSG-Pflichtcheckliste mit 14 Punkten.
Nein. Informative Bilder wie Produktfotos brauchen einen aussagekräftigen Alt-Text. Rein dekorative Bilder bekommen ein bewusst leeres Attribut alt="", damit assistive Technik sie ignoriert. WCAG 1.1.1 (Stufe A) verlangt für dekorative Inhalte ausdrücklich, dass sie ignoriert werden können. Wichtig ist, dass das Attribut vorhanden ist, auch wenn es leer bleibt.
Fehlt das alt-Attribut vollständig, lesen manche Screenreader ersatzweise den Dateinamen vor, etwa "IMG underscore 4821 punkt jpg". Das ist für die Nutzerin wertlos und verstößt gegen WCAG 1.1.1. Setzen Sie deshalb immer ein Attribut: einen sinnvollen Text bei informativen Bildern, ein leeres alt="" bei dekorativen.
Alt-Texte helfen Suchmaschinen, Bildinhalte einzuordnen, das ist ein willkommener Nebeneffekt. Sie sind aber kein Ort für Keyword-Stuffing. Ein mit Suchbegriffen überladener Alt-Text schadet der Barrierefreiheit, weil er die Sprachausgabe stört, und bringt für die Platzierung keinen zusätzlichen Vorteil. Schreiben Sie für den Menschen, nicht für die Maschine.
Die meisten Themes lesen den im Admin hinterlegten Alt-Text über das Liquid-Attribut image.alt oder media.alt aus und setzen ihn in das alt-Attribut. Ist das Feld im Admin leer, bleibt auch das ausgespielte Attribut leer. Banner in Sections und per CSV importierte Bilder haben jeweils eigene Alt-Felder, die separat gepflegt werden müssen.
Nein. Kein Werkzeug kann Rechtskonformität garantieren. Automatisierte Prüfungen erkennen fehlende und leere Alt-Attribute, beurteilen aber nicht, ob ein vorhandener Alt-Text inhaltlich passt. Werkzeuge, auch AccessifyAI, helfen beim Finden und Beheben von Verstößen. Die rechtliche Verantwortung trägt nach § 8 BFSG der Händler.
Ein verlinktes Logo ist funktional, nicht dekorativ. Der Alt-Text beschreibt das Ziel, üblicherweise den Shopnamen, etwa über alt: shop.name im Liquid-Code. So hört ein Screenreader-Nutzer den Shopnamen und nicht nur "Link". Eine grafische Beschreibung des Logo-Designs ist hier nicht nötig.
Alternativtexte für Produktbilder sind über WCAG 1.1.1 (Stufe A) und damit über EN 301 549 v3.2.1 und das BFSG verbindlich. Die zentrale Entscheidung ist, ob ein Bild informativ, dekorativ oder funktional ist: Informative Produktbilder brauchen einen knappen, kontextreichen Alt-Text, dekorative Bilder ein bewusst leeres alt="", funktionale Bilder eine Beschreibung ihres Ziels. Shopify pflegt das Alt-Feld an drei Stellen, in den Produktmedien, in den Section-Einstellungen und beim CSV-Import, wobei der optionale Import die größte Lücke verursacht. Gute Alt-Texte vermeiden Dateinamen und Keyword-Stuffing und beschreiben das, was eine sehende Kundin als kaufrelevant wahrnimmt. Welche Bilder in Ihrem konkreten Store betroffen sind, ergibt erst eine echte Überprüfung des installierten Stores auf der aktuell ausgespielten Theme-Version.