Barrierefreiheit: Produktbilder Alt-Texte richtig

Das Wichtigste in Kürze: Produktbilder ohne brauchbare Alt-Texte schließen Screenreader-Nutzer vom Kaufprozess aus und erzeugen ein konkretes BFSG-Risiko. Ein guter Alternativtext beschreibt nicht das Bild um seiner selbst willen, sondern die kaufrelevante Information: Produkttyp, Variante und unterscheidende Merkmale. Typische Fehler sind leere Alt-Attribute bei informativen Bildern, identische Texte für alle Galeriebilder und Dateinamen als Ersatz. Wer systematisch arbeitet, definiert pro Sortiment eine feste Logik und prüft Alt-Texte regelmäßig bei Imports, Relaunches und PIM-Updates.

Ein Produktbild ohne brauchbaren Alternativtext ist kein kleines Detail, sondern oft ein konkreter Nutzungsbruch. Wer im Shop auf Bilder setzt, aber keine verständlichen Beschreibungen hinterlegt, schließt Menschen mit Screenreader schnell vom Kaufprozess aus. Genau deshalb ist das Thema „Barrierefreiheit Produktbilder Alt Texte richtig schreiben“ nicht nur eine redaktionelle Frage, sondern ein Bestandteil sauberer BFSG- und WCAG-Umsetzung.

Warum Alt-Texte bei Produktbildern rechtlich und praktisch relevant sind

Im Online-Shop tragen Produktbilder oft die eigentliche Verkaufsinformation. Farbe, Form, Ausführung, Set-Umfang oder ein wichtiges Detail sind nicht selten nur visuell erkennbar. Fehlt der Alternativtext oder steht dort nur „Produktbild“, „img_1234“ oder „Artikel“, bleibt diese Information für viele Nutzer unsichtbar.

Aus Sicht der Barrierefreiheit ist das problematisch, weil Bilder mit Informationswert auch als Information bereitgestellt werden müssen. Das ergibt sich nicht aus einer netten Empfehlung, sondern aus den Anforderungen an wahrnehmbare Inhalte nach WCAG 2.1 AA. Mit Blick auf das BFSG wird daraus für viele Shop-Betreiber ein konkretes Umsetzungsrisiko. Wer Barrierefreiheit dokumentieren und Abmahnrisiken senken will, sollte Alt-Texte deshalb nicht als Nebensache behandeln.

Genauso wichtig ist der wirtschaftliche Effekt. Schlechte Alt-Texte erzeugen Rückfragen, Unsicherheit und Kaufabbrüche. Gute Alt-Texte machen Produktseiten verständlicher, besonders wenn Varianten, Bundles oder technische Merkmale im Bild transportiert werden. Das hilft nicht nur Menschen mit Screenreader, sondern verbessert häufig auch die redaktionelle Qualität im Shop insgesamt.

Barrierefreiheit Produktbilder Alt Texte richtig schreiben - worauf es wirklich ankommt

Der häufigste Fehler ist zu glauben, ein Alt-Text müsse einfach alles beschreiben, was im Bild zu sehen ist. Das stimmt so nicht. Ein guter Alt-Text beschreibt nicht das Bild um seiner selbst willen, sondern die Information, die für die Nutzung der Seite relevant ist.

Bei einem freigestellten Produktfoto reicht oft eine knappe, präzise Beschreibung. Bei einer Grafik mit Maßangaben, einem Set-Inhalt oder einer Anwendungsszene kann mehr Kontext nötig sein. Die richtige Länge hängt also nicht vom Bildtyp allein ab, sondern von der Frage: Was muss ein Nutzer wissen, wenn er das Bild nicht sehen kann?

Ein Beispiel macht den Unterschied schnell klar. Wenn auf der Produktseite bereits als Überschrift „Damen Sneaker aus Leder, weiß“ steht und das Bild exakt dieses Produkt ohne Zusatzinformation zeigt, kann ein knapper Alternativtext genügen, etwa „Weißer Damen-Sneaker aus Leder“. Ein Alt-Text wie „Bild eines weißen Schuhs vor weißem Hintergrund“ wäre dagegen formal nicht falsch, aber für die Kaufentscheidung deutlich schwächer.

Anders sieht es bei Variantenbildern aus. Wenn ein Bild eine bestimmte Farbe oder Ausführung zeigt, die nicht schon eindeutig im unmittelbaren Kontext genannt wird, sollte der Alt-Text genau das benennen. Sonst weiß ein Screenreader-Nutzer nicht, ob gerade Schwarz, Beige oder Marineblau ausgewählt ist.

Was in einen guten Alt-Text gehört - und was nicht

Alt-Texte für Produktbilder sollten konkret, knapp und nutzerbezogen sein. Relevant sind in der Regel Produkttyp, Variante und ein unterscheidendes Merkmal. Bei Mode kann das Farbe und Schnitt sein, bei Möbeln Material und Größe, bei Technik ein sichtbares Ausstattungsdetail.

Weniger hilfreich sind Füllwörter und Selbstverständlichkeiten. Formulierungen wie „Bild von“, „Foto von“ oder „Abbildung zeigt“ können meist entfallen, weil Screenreader bereits ankündigen, dass es sich um ein Bild handelt. Auch reine Werbesprache gehört nicht in den Alternativtext. „Exklusiver Premium-Look für höchste Ansprüche“ hilft niemandem, der wissen muss, was konkret dargestellt ist.

Schwierig wird es, wenn Teams Alt-Texte mit Produktnamen verwechseln. Ein interner Artikeltitel kann zu technisch oder zu lang sein. „Modell XJ-450 Comfort Line Edition“ ist nur dann sinnvoll, wenn diese Modellbezeichnung für die Orientierung tatsächlich relevant ist. Meist ist eine verständlichere Beschreibung besser.

Typische Fehler auf Produktseiten

Viele Shops machen nicht einen großen, sondern zehn kleine Fehler. In der Summe wird daraus ein echtes Barrierefreiheitsproblem.

Ein klassischer Fall sind doppelte Informationen in Galerien. Wenn fünf Produktbilder hintereinander alle denselben Alt-Text tragen, etwa nur den Produktnamen, ist das kaum hilfreich. Zeigen die Bilder unterschiedliche Perspektiven ohne Zusatznutzen, kann das noch vertretbar sein. Zeigen sie aber Vorderseite, Rückseite, Detailaufnahme oder Lieferumfang, sollte der Alternativtext den Unterschied erkennbar machen.

Ein weiterer Fehler sind leere Alt-Texte bei inhaltlich wichtigen Bildern. Leere Alternativtexte sind nur dann richtig, wenn ein Bild rein dekorativ ist und keine relevante Information transportiert. Das trifft bei echten Produktbildern im Shop fast nie zu.

Problematisch sind auch Dateinamen als Ersatz. Wenn der Screenreader „DSC4451-final-neu“ ausgibt, ist niemandem geholfen. Dasselbe gilt für automatisch generierte Texte, die nur grob raten, was zu sehen ist. Gerade bei Sortimenten mit ähnlichen Artikeln entstehen so schnell falsche oder zu allgemeine Beschreibungen.

So schreiben Sie Alt-Texte für Produktbilder systematisch richtig

Wer viele Produkte pflegt, braucht keine Einzelfallkunst, sondern einen klaren Prozess. Genau hier scheitern viele Teams: Nicht am Wissen, sondern an fehlenden Regeln.

1. Erst den Bildzweck klären

Fragen Sie pro Bild nicht „Was ist darauf?“, sondern „Wofür ist dieses Bild auf der Seite da?“. Zeigt es nur das Produkt allgemein, eine Variante, ein Detail, den Lieferumfang oder die Anwendung? Erst dann lässt sich entscheiden, wie konkret der Alt-Text sein muss.

2. Den unmittelbaren Kontext mitdenken

Alt-Texte stehen nie isoliert. Produktname, Varianten-Auswahl, Bildunterschrift und umgebender Text liefern bereits Informationen. Ein guter Alt-Text ergänzt diesen Kontext, statt ihn bloß wortgleich zu wiederholen. Vollständige Doppelungen sind nicht immer falsch, aber oft unnötig.

3. Relevante Merkmale priorisieren

Nicht jede sichtbare Eigenschaft gehört in den Text. Entscheidend ist, was für Orientierung, Auswahl oder Kaufentscheidung relevant ist. Bei einer Tasse ist die Farbe oft wichtiger als der Hintergrund. Bei einem Kabel kann die Steckverbindung wichtiger sein als das Material der Verpackung.

4. Kurz bleiben, aber nicht zu knapp

Ein Alternativtext muss nicht literarisch sein. Meist reichen wenige klare Wörter oder ein kurzer Satz. Zu kurz ist er dann, wenn ein Nutzer die zentrale Information nicht versteht. Zu lang ist er dann, wenn Nebensächlichkeiten die Hauptaussage verdecken.

5. Für Varianten klare Regeln definieren

Gerade bei Shops mit vielen ähnlichen Produkten lohnt sich eine feste Logik. Etwa: Produkttyp + Farbe + besondere Eigenschaft. Oder bei Möbeln: Produkttyp + Material + Größe + Ansicht. So bleibt die Qualität konsistent, auch wenn mehrere Personen Inhalte pflegen.

Beispiele: schlechte und bessere Alt-Texte

Nehmen wir ein Produktbild für einen Rucksack. „Rucksack“ ist zu allgemein. „Schwarzer Rolltop-Rucksack mit Laptopfach“ ist deutlich besser, weil Form, Farbe und relevantes Merkmal erkennbar werden.

Bei einem Set aus drei Vorratsdosen wäre „Produktbild“ unbrauchbar. „Set aus drei Glas-Vorratsdosen mit Bambusdeckel“ vermittelt dagegen den eigentlichen Informationswert des Bildes.

Bei einer Detailansicht eines Sofas genügt der Produktname nicht. Wenn das Bild die Struktur des Bezugs zeigen soll, wäre „Detailaufnahme des grauen Stoffbezugs“ sinnvoller. Sonst geht genau die Information verloren, für die das Bild eingebunden wurde.

Und bei einer Farbvariante eines T-Shirts hilft „T-Shirt Vorderansicht“ nur begrenzt. Besser wäre „T-Shirt in Olivgrün, Vorderansicht“. Wenn die Farbe an anderer Stelle bereits eindeutig angesagt wird, kann die Vorderansicht allein in Einzelfällen reichen. Es hängt also vom Seitendesign ab.

Wann ein Bild dekorativ ist - und wann nicht

Nicht jedes Bild braucht einen beschreibenden Alt-Text. Dekorative Elemente, die keine Information tragen, sollten leer ausgezeichnet werden, damit Screenreader sie überspringen. Auf Produktseiten betrifft das zum Beispiel rein grafische Hintergründe, Schmuckelemente oder Icons ohne eigene Aussage.

Bei Produktbildern ist Vorsicht geboten. Was intern als „nur stimmungsvolle Darstellung“ wirkt, kann für Nutzer dennoch relevant sein, etwa wenn eine Anwendungsszene die Größe, Tragweise oder Nutzung erklärt. Dann ist das Bild nicht dekorativ, sondern informativ.

Die Abgrenzung ist nicht immer schwarz-weiß. Gerade deshalb lohnt sich ein kurzer Qualitätscheck auf Template-Ebene und stichprobenartig auf wichtigen Produktseiten.

Qualität sichern statt Alt-Texte nur einmal einzupflegen

Alt-Texte sind kein Einmalprojekt. Neue Produkte, Relaunches, PIM-Importe und Agenturwechsel verschlechtern die Qualität oft schleichend. Deshalb sollte die Prüfung Teil des laufenden Shop-Betriebs sein.

Sinnvoll ist ein einfacher Prüfprozess: erst Templates kontrollieren, dann Kategorie für Kategorie priorisieren, beginnend mit umsatzstarken oder rechtlich sensiblen Seiten. Wer mehrere Shops oder Mandanten betreut, braucht zusätzlich nachvollziehbare Dokumentation. Genau hier helfen klare Reports, Priorisierung nach Risiko und regelmäßiges Monitoring. Ein Tool wie CheckBarriere kann solche Schwachstellen im Shop schnell sichtbar machen und direkt in umsetzbare Aufgaben übersetzen.

Barrierefreiheit Produktbilder Alt Texte richtig schreiben ist Teamarbeit

Die Verantwortung liegt selten nur bei einer Person. Produktmanagement kennt die Merkmale, Content-Teams pflegen Texte, Entwickler setzen Templates um und Agenturen arbeiten oft an Imports oder Relaunches. Wenn niemand Regeln festlegt, entstehen Lücken.

Am besten funktioniert ein gemeinsamer Standard mit wenigen klaren Vorgaben: Wann ist ein Bild dekorativ, welche Merkmale haben Priorität und wie werden Varianten beschrieben? Das reduziert Rückfragen, spart Pflegeaufwand und verbessert die Nachweisbarkeit gegenüber internen Stakeholdern.

Wer bei Alt-Texten sauber arbeitet, verbessert nicht nur die Zugänglichkeit. Er schafft auch mehr Klarheit auf Produktseiten und senkt ein Risiko, das mit dem BFSG nicht mehr auf die lange Bank gehört. Der sinnvollste nächste Schritt ist deshalb nicht Perfektion auf einmal, sondern eine priorisierte Prüfung der Seiten, die heute schon Umsatz und Risiko tragen.