Barrierefreier Alternativtext für Produktbilder: die Anleitung für Online-Shops
Kurz gefasst — ein guter Alternativtext für ein Produktbild
Der Alternativtext (das alt-Attribut) ist die Beschreibung, die ein Screenreader anstelle eines Bildes vorliest. Er ist der häufigste Barrierefreiheits-Mangel im E-Commerce — und einer der einfachsten zu beheben. Das Barrierefreiheitsstärkungsgesetz (BFSG) (EN 301 549 / WCAG 2.1 AA), seit dem 28. Juni 2025 für den E-Commerce verbindlich, verlangt ihn (Kriterium 1.1.1). Die Kernregeln:
- Jedes informative Bild hat einen Alternativtext: ein Produktfoto ohne
altist für einen blinden Kunden unsichtbar; - Beschreibe den nützlichen Inhalt des Bildes, nicht „Bild von": Produktname, Farbe, Material, Ansicht;
- Ein rein dekoratives Bild bekommt einen leeren
alt(alt=""), damit es ignoriert wird; - Der Text in einem Bild (Werbebanner, Größentabelle) muss im
altoder als echter Text wiedergegeben werden; - In einer Galerie oder bei Varianten beschreibe, was sich ändert (Ansicht, Farbe), ohne Wort für Wort zu wiederholen;
- Ein verlinktes Bild beschreibt sein Ziel, nicht nur das Bild.
Nebeneffekt: Ein guter alt verbessert auch dein Ranking in der Google-Bildersuche.
Eine Produktseite besteht vor allem aus Bildern: das Hauptfoto, die Ansichten aus allen Winkeln, die Farb-Swatches, die Größentabelle, die „Versandkostenfrei"-Piktogramme. Für einen Kunden mit Screenreader ist jedes dieser Bilder entweder eine wertvolle Information oder bloßes Rauschen — je nach Qualität seines Alternativtexts. Und es ist mit Abstand der häufigste Mangel: fehlende alt-Attribute stehen ganz oben auf der Liste der Probleme, die auf den meistbesuchten Startseiten des Webs erkannt werden. Die gute Nachricht: Sie zu korrigieren ist eine Frage des Inhalts, nicht des Codes.
Was der Alternativtext ist und warum er zählt
Der Alternativtext ist der Inhalt des alt-Attributs eines <img>-Tags. Er dient drei Gruppen: Menschen, die mit einem Screenreader navigieren (die Software liest den alt laut vor), Menschen, deren Bild nicht lädt (langsame Verbindung — der alt erscheint an seiner Stelle), und den Suchmaschinen, die ihn zur Indexierung des Bildes nutzen. In Sachen Barrierefreiheit ist das Kriterium WCAG 1.1.1 „Nicht-Text-Inhalt", Stufe A — das grundlegendste, das die Norm EN 301 549 (technische Referenz des European Accessibility Act und des BFSG) seit dem 28. Juni 2025 für E-Commerce-Dienstleistungen fordert.
Anders als eine Website-Neugestaltung ist das Ergänzen oder Korrigieren von Alternativtexten eine Inhalts-Arbeit. In Shopify, WooCommerce oder PrestaShop wird das Feld „Alternativtext" direkt in der Medienbibliothek ausgefüllt, ohne den Code anzurühren. Hier sind die sechs Regeln, die das BFSG über WCAG 2.1 AA verlangt.
Die 6 Regeln eines guten Alternativtexts
Jedes Bild, das eine Information trägt, hat einen beschreibenden alt
Das Hauptfoto des Produkts, die Detailansichten, ein Bild, das eine Funktion zeigt: Jedes braucht einen alt, der die kaufrelevante Information vermittelt. Beschreibe, was ein Kunde wissen muss — nicht jedes Pixel.
alt="Rucksack aus braunem Leder, Vorderansicht, zwei Seitentaschen"alt="Bild", alt="Produkt" oder alt="IMG_4821.jpg"→ Siehe auch die BFSG-Checkliste für alle Punkte, die zählen.
Das Nützliche beschreiben — ohne „Bild von" und ohne Keyword-Stuffing
Der Screenreader kündigt bereits „Grafik" an, bevor er den alt vorliest: „Foto von…" oder „Bild, das … zeigt" ist überflüssig. Ziel ist ein kurzer, konkreter Satz. Und stapele keine SEO-Schlüsselwörter: eine Aneinanderreihung von Begriffen ohne Satz schadet der Barrierefreiheit ebenso wie dem Ranking.
alt="Blaues geblümtes Sommerkleid, knielang"alt="Kleid Kleid Sommer Damen günstig blaues Kleid geblümtes Kleid Kleid kaufen"Was nichts beiträgt, bekommt einen leeren alt
Eine Hintergrundtextur, ein rein ästhetisches Icon neben einem bereits geschriebenen Label, ein grafischer Trenner: Diese Bilder sind dekorativ. Ihr alt-Attribut muss vorhanden, aber leer sein (alt=""), damit der Screenreader sie ignoriert. Ein dekoratives Bild ohne jedes alt-Attribut hingegen führt oft dazu, dass sein Dateiname laut vorgelesen wird — das Schlechteste aus beiden Welten.
alt="" (oder CSS background-image)alt-Attribut; der Screenreader liest „IMG_2231.png".Den in einem Bild angezeigten Text wiedergeben
Werbebanner („−20 % bis Sonntag"), Größentabelle als Bild, „Neu"-Störer, Produktzusammensetzung als Infografik: Enthält ein Bild sinntragenden Text, muss dieser Text zugänglich sein. Idealerweise stellst du ihn als echten HTML-Text dar (besser für Barrierefreiheit, SEO und Zoom); ersatzweise gibst du ihn vollständig im alt wieder. Eine Größentabelle als Bild ohne Textentsprechung ist für einen Teil deiner Kunden unbrauchbar.
alt="Sommerschlussverkauf: −20 % auf die gesamte Kollektion bis 30. Juni"alt="Banner"; eine Größentabelle als reines Bild ohne Textentsprechung.Beschreiben, was sich ändert — ohne alles zu wiederholen
Eine Produktseite zeigt oft 4 bis 8 Bilder desselben Artikels. Jedem denselben alt zu geben, überflutet die Nutzenden mit Wiederholung. Beschreibe stattdessen die Ansicht oder das Detail, das jede Aufnahme ausmacht. Bei einer echten Miniatur, die eine größere Version öffnet, kann die Miniatur die Ansicht beschreiben; die Zoomansicht muss dann nicht die ganze Beschreibung wiederholen.
alt="…, Rückansicht" / alt="…, Nahaufnahme des Reißverschlusses" / alt="…, an einem Model getragen"alt: alt="Sneaker".Die Variante und das Linkziel benennen
Farb-Swatches, die die Variante wechseln, müssen den Namen der Variante ankündigen, nicht ihre Form: alt="Marineblau", niemals alt="blaues Quadrat". Und wenn ein Bild selbst ein Link ist (Kategorie-Kachel, klickbares Visual), muss der alt beschreiben, wohin er führt — denn das ist der einzige Text, den der Screenreader mit dem Link verknüpft.
alt="Marineblau" · Kachel-Link: alt="Zur Kollektion Laufschuhe"alt="blauer Kreis"; Kachel-Link: alt="Kategorie".→ Für klickbare Bilder siehe auch die Anleitung zur Tastaturbedienung: ein Bild-Link muss auch per Tastatur erreichbar sein.
Gute und schlechte Alternativtexte: Beispiele
| Bild | Zu vermeiden | Empfohlen |
|---|---|---|
| Produktfoto | alt="Bild" | alt="Weiße Canvas-Sneaker, beige Profilsohle" |
| Roher Dateiname | alt="DSC_0934.jpg" | alt="Analoguhr, schwarzes Lederarmband" |
| Dekoratives Bild | gar kein alt-Attribut | alt="" (leer) |
| Werbebanner (Text) | alt="Banner" | alt="−20 % auf Mäntel bis 30. Juni" |
| Farb-Swatch | alt="roter Kreis" | alt="Ziegelrot" |
| Verlinkte Kachel | alt="Kategorie" | alt="Zu den Handtaschen" |
alt stehen lassen (Massen-Importe erzeugen nutzlose alt="IMG_1234.jpg"); (2) den alt in einen Schlüsselwort-Speicher fürs SEO verwandeln. Beides verschlechtert das Erlebnis am Screenreader — und Google bestraft das Stuffing. Ein beschreibender, ehrlicher Satz dient zugleich der Barrierefreiheit und dem Ranking.
Wie du deine Bilder ohne alt aufspürst
Drei kostenlose Methoden:
- Ein automatischer Scan erkennt zuverlässig Bilder ohne
alt-Attribut und leerealtauf informativen Bildern — genau die Art von Mangel, die die Werkzeuge gut finden (axe-core, WAVE, Lighthouse). - Ein Screenreader (NVDA kostenlos unter Windows, VoiceOver auf dem Mac) lässt dich hören, was angesagt wird: Geh eine Produktseite durch und höre, ob jedes nützliche Bild beschrieben wird — und ob die dekorativen Bilder schweigen.
- Der menschliche Blick bleibt unverzichtbar: Ein Werkzeug sieht, dass ein
altexistiert, nicht, ob er relevant ist.alt="Bild"besteht den automatischen Test, beschreibt aber nichts.
→ Danach fließt der geübte Blick auf die Bilder direkt in den BFSG-Express-Test ein.
Spüre deine Bilder ohne alt kostenlos auf
DeclareAccess scannt eine Seite deines Shops mit der axe-core-Engine nach WCAG 2.1 AA, listet die Bilder ohne Alternativtext und die weiteren Verstöße auf und erzeugt anschließend das veröffentlichungsfertige Barrierefreiheitsdokument — deutsch („Informationen zur Barrierefreiheit", § 14 BFSG), englisch, französisch (RGAA), italienisch oder spanisch. Kostenlos, ohne Kreditkarte.
WCAG-Bericht per E-Mail innerhalb von 1 Werktag.
Erhalten. Deine Audit-Anfrage ist gespeichert — du erhältst deinen WCAG-Bericht per E-Mail innerhalb von 1 Werktag.
Häufige Fragen
Wie lang soll ein Alternativtext sein?
Ein kurzer, beschreibender Satz genügt in der großen Mehrheit der Fälle — meist ein paar Wörter bis eine Zeile. Ziel ist es, die kaufrelevante Information zu vermitteln, nicht alles zu beschreiben. Ist ein Bild komplex (Infografik, Schema), gib eine kurze Beschreibung im alt und die ausführliche Erklärung als Text in der Nähe.
Brauchen dekorative Bilder einen Alternativtext?
Ja, aber ein leeres alt-Attribut: alt="". Das weist den Screenreader an, das Bild zu ignorieren. Gar kein alt-Attribut zu setzen ist etwas anderes — manche Screenreader lesen dann den Dateinamen vor. Für ein rein ästhetisches Bild ist ein CSS-Hintergrund (background-image) noch besser, denn er wird nie angesagt.
Hilft der Alternativtext wirklich dem Ranking?
Ja. Google nutzt das alt-Attribut, um deine Bilder zu verstehen und zu indexieren — das hilft deiner Sichtbarkeit in der Google-Bildersuche und der Relevanz der Seite. Die gute Nachricht: Ein beschreibender, ehrlicher alt dient zugleich der Barrierefreiheit und dem SEO. Umgekehrt schadet Keyword-Stuffing beiden.
Kümmert sich mein Shopify- / WooCommerce-Theme allein um den alt?
Nein. Die Plattform stellt das Feld zum Eintragen des Alternativtexts bereit (in der Medienbibliothek oder der Produktseite), aber es liegt an dir, es mit einer nützlichen Beschreibung zu füllen. Viele Themes übernehmen standardmäßig den Produkttitel oder den Dateinamen, was für die Nebenansichten selten befriedigend ist.
Kann eine KI meine Alternativtexte an meiner Stelle schreiben?
Eine KI kann für einfache Fotos einen nützlichen ersten Entwurf liefern, aber ihr fehlt der kommerzielle Kontext (Referenz, genaues Material, Variante), und bei mehrdeutigen Bildern irrt sie. Die automatischen alt-Generatoren der Overlays erzeugen oft generische oder falsche Beschreibungen. Am zuverlässigsten ist eine menschliche Durchsicht — besonders bei Bildern, die Text enthalten oder als Link dienen.