Produktbilder gehören zu den wichtigsten Elementen eines Online-Shops. Bei Kleidung möchte man Farbe und Schnitt sehen, bei Möbeln Material und Form, bei Elektronik die Anschlüsse und bei Werkzeug vielleicht sogar kleine Details der Verarbeitung.

Für viele Kunden beginnt die Kaufentscheidung deshalb nicht bei der Produktbeschreibung, sondern beim ersten Bild.

Was passiert aber, wenn jemand dieses Bild nicht sehen kann?

Genau hier kommen Alt-Texte ins Spiel.

Ein guter Alt-Text übersetzt nicht einfach jedes Pixel eines Bildes in Worte. Er vermittelt die Informationen, die für den jeweiligen Zweck des Bildes wichtig sind.

Und genau an diesem Punkt passieren in Online-Shops erstaunlich viele Fehler.

Man findet Alt-Texte wie:

„Produktbild“

„IMG_4582“

„Schuhe kaufen günstig Wanderschuhe Herren online“

oder zehn Produktbilder, die alle exakt denselben Alt-Text besitzen.

Das hilft einem Screenreader-Nutzer wenig.

Barrierefreie Produktbilder brauchen deshalb etwas mehr Planung. Dabei muss man keineswegs für jedes Bild einen halben Roman schreiben. Oft reicht ein gut formulierter Satz.

Warum Produktbilder für die Barrierefreiheit so wichtig sind

Stell dir vor, du kaufst online einen Rucksack.

Auf der Produktseite befinden sich sechs Bilder:

1. Rucksack von vorne
2. Rückansicht
3. geöffnetes Hauptfach
4. Laptopfach
5. seitliche Flaschenhalterung
6. Detailaufnahme des Materials

Als sehender Kunde bekommst du dadurch ziemlich viele Informationen, ohne überhaupt die Beschreibung lesen zu müssen.

Du erkennst:

Der Rucksack hat ein Laptopfach.

Er besitzt Seitentaschen.

Die Rückseite ist gepolstert.

Das Material wirkt strukturiert.

Genau diese Informationen sollten nicht vollständig verloren gehen, nur weil jemand die Bilder nicht wahrnehmen kann.

Ein sinnvoller Alt-Text kann deshalb ein wichtiger Bestandteil der Produktinformation sein.

Was ist ein Alt-Text überhaupt?

Alt-Text ist die Kurzform für Alternativtext.

Er wird technisch bei einem Bild hinterlegt und ist normalerweise nicht direkt auf der Website sichtbar.

Screenreader können diesen Text ausgeben, wenn sie auf ein Bild treffen.

Ein Beispiel:

Das Produktbild zeigt einen schwarzen Rucksack mit zwei Außentaschen und orangefarbenen Reißverschlüssen.

Ein passender Alt-Text könnte lauten:

„Schwarzer Rucksack mit zwei Seitentaschen und orangefarbenen Reißverschlüssen.“

Der Nutzer erhält damit eine Information, die ansonsten ausschließlich visuell vorhanden wäre.

Ein Alt-Text ist keine vollständige Bildbeschreibung

Hier liegt ein häufiges Missverständnis.

Alt-Texte müssen nicht grundsätzlich jedes Detail eines Bildes beschreiben.

Bei einem Produktfoto mit einem Schuh könnte man theoretisch schreiben:

„Auf weißem Hintergrund steht leicht nach rechts gedreht ein schwarzer Wanderschuh. Der Schuh besitzt eine graue Sohle, sieben Ösenpaare, orangefarbene Schnürsenkel, mehrere Nähte, eine schwarze Lasche und einen leicht nach oben gebogenen Vorderbereich.“

Das ist vielleicht korrekt.

Aber braucht ein Kunde wirklich all diese Informationen?

Wahrscheinlich nicht.

Ein besserer Alt-Text könnte sein:

„Schwarzer Wanderschuh mit grober Profilsohle und orangefarbenen Schnürsenkeln.“

Die wichtigsten kaufrelevanten Merkmale sind enthalten. Der Rest kann über weitere Bilder und die Produktbeschreibung vermittelt werden.

Entscheidend ist der Zweck des Bildes

Dasselbe Bild kann je nach Kontext einen anderen Alt-Text benötigen.

Nehmen wir das Foto eines schwarzen Wanderschuhs.

In einem Online-Shop könnte wichtig sein:

„Schwarzer Wanderschuh mit orangefarbenen Schnürsenkeln und grober Profilsohle.“

In einem Blogartikel über unterschiedliche Sohlen könnte dagegen relevant sein:

„Wanderschuh mit tiefem, grobstolligem Sohlenprofil.“

Das Bild ist dasselbe.

Die relevante Information ist eine andere.

Deshalb sollte ein Alt-Text nicht völlig losgelöst vom Inhalt der Seite geschrieben werden.

Eine gute Frage lautet:

Welche Information würde einem Nutzer fehlen, wenn dieses Bild nicht vorhanden wäre?

Die Antwort darauf ist meistens eine gute Grundlage für den Alt-Text.

Produktbilder sinnvoll beschreiben

Bei einem Online-Shop sollte sich der Alt-Text an den Merkmalen orientieren, die für die Kaufentscheidung wichtig sind.

1. Das Produkt eindeutig benennen

Beginne mit dem Produkt selbst.

Zum Beispiel:

„Schwarzer Wanderschuh …“

„Blauer Damenpullover …“

„Eichenholz-Esstisch …“

„Silberner Wasserkocher …“

Das klingt selbstverständlich, verhindert aber Alt-Texte, die zu allgemein werden.

Schlecht:

„Produkt von vorne.“

Besser:

„Schwarzer Lederrucksack von vorne.“

2. Wichtige sichtbare Merkmale ergänzen

Danach können Merkmale folgen, die das Produkt unterscheiden.

Zum Beispiel:

„Dunkelblauer Kapuzenpullover mit weißem Reißverschluss und zwei Fronttaschen.“

Oder:

„Runder Esstisch aus hellem Eichenholz mit schwarzem Metallgestell.“

Das sind Informationen, die ein Kunde auf dem Foto erkennen würde.

Genau darum geht es.

3. Farbe nennen, wenn sie relevant ist

Bei Produkten mit unterschiedlichen Farbvarianten ist Farbe oft wichtig.

Dann sollte sie auch im Alt-Text vorkommen.

Zum Beispiel:

„Sneaker in Dunkelgrün mit weißer Sohle.“

Besonders hilfreich wird das, wenn die Produktgalerie beim Wechsel einer Farbe automatisch neue Bilder zeigt.

Bei einem Produkt, das ausschließlich in einer Farbe erhältlich ist und dessen Farbe bereits mehrfach direkt daneben genannt wird, kann eine Wiederholung dagegen teilweise weniger wichtig sein.

Der Kontext entscheidet.

4. Perspektive nennen, wenn sie neue Informationen vermittelt

Bei mehreren Produktbildern kann es sinnvoll sein, die Perspektive anzugeben.

Zum Beispiel:

„Schwarzer Wanderschuh von der Seite.“

„Schwarzer Wanderschuh von hinten mit gepolstertem Fersenbereich.“

„Unterseite des Wanderschuhs mit grober Profilsohle.“

So versteht der Nutzer, warum mehrere Bilder vorhanden sind.

Ein Alt-Text wie:

„Wanderschuh“

bei jedem einzelnen Bild würde diese zusätzliche Information vollständig verlieren.

Produktgalerien richtig behandeln

Ein häufiger Fehler in Shops ist die automatische Übernahme desselben Alt-Texts für jedes Bild einer Galerie.

Das sieht dann ungefähr so aus:

Bild 1: „Wanderschuh Trail Pro“

Bild 2: „Wanderschuh Trail Pro“

Bild 3: „Wanderschuh Trail Pro“

Bild 4: „Wanderschuh Trail Pro“

Bild 5: „Wanderschuh Trail Pro“

Für den Nutzer klingt das so, als wäre fünfmal dasselbe Bild vorhanden.

Dabei zeigen die Fotos vielleicht völlig unterschiedliche Details.

5. Jedes informative Galeriebild individuell beschreiben

Wenn ein Bild neue Informationen liefert, sollte der Alt-Text diese Information wiedergeben.

Zum Beispiel:

Bild 1

„Schwarzer Wanderschuh Trail Pro von der Seite.“

Bild 2

„Vorderansicht des Trail Pro mit orangefarbener Schnürung.“

Bild 3

„Rückseite des Trail Pro mit gepolstertem Fersenbereich.“

Bild 4

„Unterseite des Trail Pro mit tiefem Profil.“

Bild 5

„Nahaufnahme des wasserabweisenden Obermaterials.“

Damit wird aus einer Bildergalerie tatsächlich eine Informationsquelle.

6. Wiederholungen vermeiden

Nicht jedes Bild muss unbedingt neue Informationen enthalten.

Shops verwenden manchmal mehrere nahezu identische Aufnahmen:

Schuh leicht nach links gedreht.

Schuh etwas weiter gedreht.

Schuh noch ein wenig weiter gedreht.

Wenn diese Bilder keine relevanten zusätzlichen Informationen liefern, muss der Screenreader-Nutzer nicht fünfmal fast denselben Text hören.

Hier sollte man prüfen, welchen tatsächlichen Mehrwert das jeweilige Bild besitzt.

7. Detailbilder besonders ernst nehmen

Detailbilder sind meist genau deshalb vorhanden, weil sie eine wichtige Eigenschaft zeigen.

Zum Beispiel:

• Naht
• Material
• Reißverschluss
• Anschluss
• Verschluss
• Sohle
• Polsterung
• Oberfläche

Ein Alt-Text wie:

„Detailansicht“

verschenkt den kompletten Zweck des Bildes.

Besser:

„Detailaufnahme der wasserabweisenden Stoffstruktur.“

Oder:

„Nahaufnahme des seitlichen USB-C-Anschlusses.“

Alt-Texte bei Kleidungsstücken

Mode-Shops haben besonders viele Produktbilder.

Typische Informationen sind:

• Farbe
• Schnitt
• Muster
• Ärmel
• Kragen
• Verschluss
• Taschen
• Länge
• sichtbare Details

Beispiel:

Schlecht:

„Kleid Produktfoto“

Besser:

„Knielanges dunkelblaues Sommerkleid mit kurzen Ärmeln und V-Ausschnitt.“

Bei einem Detailbild:

„Nahaufnahme des floralen Musters in Blau und Weiß.“

Bei einer Rückansicht:

„Rückansicht des Kleides mit verdecktem Reißverschluss.“

Muss man das Model beschreiben?

Nicht automatisch.

Wenn die Person nur dazu dient, das Kleidungsstück getragen zu zeigen, ist meistens das Produkt wichtiger.

Zum Beispiel:

„Beiger Oversize-Pullover in hüftlanger Passform.“

Es ist normalerweise nicht notwendig, Haarfarbe, Alter, Gesichtsausdruck und Hintergrund des Models zu beschreiben, wenn diese Informationen für das Produkt keine Bedeutung haben.

Relevant kann dagegen sein:

„Knöchellanger Mantel in lockerer Passform.“

Das Bild vermittelt hier, wie lang das Kleidungsstück getragen wirkt.

Alt-Texte bei Möbeln

Bei Möbeln interessieren Kunden häufig:

• Material
• Farbe
• Form
• Beine oder Gestell
• Anzahl der Türen oder Schubladen
• sichtbare Aufteilung

Beispiel:

„Sideboard aus hellem Eichenholz mit drei Türen und schwarzen Metallbeinen.“

Bei einem Innenbild:

„Geöffnetes Sideboard mit zwei Einlegeböden und drei Fächern.“

Bei einer Detailaufnahme:

„Nahaufnahme der sichtbaren Eichenholzmaserung.“

Gerade Innenansichten werden häufig schlecht beschrieben, obwohl sie wichtige Informationen über Stauraum und Aufbau liefern.

Alt-Texte bei Elektronik

Bei Elektronik können Produktbilder ebenfalls kaufrelevante Informationen vermitteln.

Zum Beispiel:

• Anschlüsse
• Position der Bedienelemente
• Display
• Größe
• Lieferumfang
• Rückseite

Beispiele:

„Schwarzer WLAN-Router mit vier externen Antennen.“

„Rückseite des Routers mit vier LAN-Anschlüssen und USB-Port.“

„Lieferumfang mit Router, Netzteil und Netzwerkkabel.“

Das letzte Beispiel ist besonders wichtig.

Ein Bild mit Lieferumfang vermittelt eine Information, die nicht nur optisch bleiben sollte.

Noch besser ist es, den Lieferumfang zusätzlich als normalen Text auf der Produktseite aufzulisten.

Alt-Texte ersetzen keine Produktbeschreibung

Dieser Punkt ist wichtig.

Der Alt-Text sollte nicht versuchen, sämtliche Produktinformationen aufzunehmen.

Informationen wie:

• Maße
• Gewicht
• Materialzusammensetzung
• technische Daten
• Garantie
• Lieferumfang
• Pflegehinweise

gehören normalerweise zusätzlich in die Produktbeschreibung oder technische Daten.

Der Alt-Text ergänzt diese Informationen um das, was das Bild vermittelt.

Das hat noch einen Vorteil:

Wichtige Produktdaten sind dann auch für Menschen zugänglich, die Bilder aus anderen Gründen nicht laden können.

Was ist mit dekorativen Bildern?

Nicht jedes Bild einer Shopseite trägt Informationen.

Vielleicht befinden sich hinter einer Überschrift kleine grafische Formen.

Oder ein dekoratives Muster schmückt den Hintergrund.

Solche Bilder müssen einem Screenreader-Nutzer nicht vorgelesen werden.

Im Gegenteil: Zu viele unnötige Bildbeschreibungen können die Nutzung verschlechtern.

Stell dir eine Seite vor, auf der ein Screenreader ständig meldet:

„Dekorativer blauer Kreis.“

„Dekorative Linie.“

„Hintergrundgrafik.“

„Dekoratives Dreieck.“

Das hilft niemandem.

8. Rein dekorative Bilder ausblenden

Wenn ein Bild wirklich nur Dekoration ist und keinerlei Information vermittelt, sollte es für Hilfstechnologien ignorierbar sein.

Technisch kann dafür bei normalen HTML-Bildern ein leeres Alt-Attribut verwendet werden:

alt=""

Wichtig ist der Unterschied zwischen:

leerem Alt-Text

und:

fehlendem Alt-Attribut

Ein fehlendes Attribut kann dazu führen, dass Screenreader stattdessen beispielsweise den Dateinamen vorlesen.

Dann hört der Nutzer plötzlich:

„DSC 5839 final compressed webp.“

Das ist offensichtlich keine sinnvolle Alternative.

Funktionsbilder brauchen einen anderen Alt-Text

Nicht jedes Bild dient dazu, etwas zu zeigen.

Manchmal ist ein Bild selbst ein Button oder Link.

Beispiele:

• Lupe für Produktsuche
• Herz für Wunschliste
• Papierkorb zum Entfernen
• Pfeil für nächstes Produktbild
• Warenkorb-Symbol
• Drucksymbol

Hier sollte der Alt-Text nicht beschreiben, wie das Symbol aussieht.

Schlecht:

„Herzsymbol“

Besser:

„Zur Wunschliste hinzufügen“

Schlecht:

„Papierkorb“

Besser:

„Produkt aus dem Warenkorb entfernen“

Schlecht:

„Lupe“

Besser:

„Suchen“

Der Nutzer möchte wissen, was passiert – nicht, welches Symbol der Designer dafür gewählt hat.

Vorsicht bei Alt-Text und zusätzlicher Button-Beschriftung

Wenn ein Icon bereits in einem korrekt beschrifteten Button steckt, sollte es nicht noch einmal redundant vorgelesen werden.

Angenommen, ein Button enthält:

Warenkorb-Icon + „In den Warenkorb“

Dann muss der Screenreader nicht zusätzlich hören:

„Grafik Warenkorb, In den Warenkorb.“

Das Icon kann in diesem Zusammenhang dekorativ sein, weil der sichtbare Text die Funktion bereits vollständig beschreibt.

Weniger ist manchmal tatsächlich mehr.

Text innerhalb von Produktbildern

Ein weiteres Problem sind Bilder, in denen wichtige Texte eingebaut sind.

Zum Beispiel:

„20 % Rabatt“

„Wasserfest bis 50 Meter“

„5 Jahre Garantie“

„Nur heute“

Wenn diese Information ausschließlich im Bild steht, können verschiedene Nutzer sie möglicherweise nicht wahrnehmen.

Die bessere Lösung ist meistens:

Wichtige Informationen als echten Text auf der Produktseite bereitstellen.

Das hat mehrere Vorteile.

Der Text lässt sich:

• vergrößern,
• kopieren,
• vorlesen,
• übersetzen,
• besser an verschiedene Bildschirmgrößen anpassen.

9. Wichtige Texte nicht nur ins Bild schreiben

Wenn ein Bild beispielsweise zeigt:

„Akku hält bis zu 20 Stunden“

sollte dieselbe wesentliche Information auch in der Produktbeschreibung oder den Eigenschaften stehen.

Dann muss der Alt-Text nicht zum Ersatz für die komplette Werbegrafik werden.

Infografiken und komplexe Produktbilder

Manche Produktbilder enthalten sehr viele Informationen.

Zum Beispiel eine Infografik mit:

• zehn Produkteigenschaften,
• Maßangaben,
• Pfeilen,
• Beschriftungen,
• Symbolen.

Ein normaler kurzer Alt-Text reicht dafür häufig nicht aus.

Beispiel:

„Infografik mit Maßen des Schranks.“

Das sagt wenig.

Der Alt-Text kann kurz erklären, was dargestellt wird:

„Infografik mit den Abmessungen des Kleiderschranks.“

Die eigentlichen Daten sollten zusätzlich als normaler Text bereitstehen:

Breite: 180 cm
Höhe: 220 cm
Tiefe: 60 cm

So bekommt jeder Nutzer dieselbe Information.

10. Komplexe Informationen außerhalb des Alt-Texts bereitstellen

Ein Alt-Text ist keine gute Stelle für einen Absatz mit 500 Wörtern.

Bei komplexen Bildern sollte die ausführliche Information auf der Seite selbst verfügbar sein.

Das ist meistens leichter verständlich und besser nutzbar.

Produktmaße nicht ausschließlich als Grafik

Möbel-Shops zeigen Abmessungen gerne mit Pfeilen direkt im Produktbild.

Zum Beispiel:

Breite 120 cm
Höhe 80 cm
Tiefe 40 cm

Das ist visuell praktisch.

Diese Daten gehören trotzdem zusätzlich als Text auf die Produktseite.

Zum Beispiel:

Maße

Breite: 120 cm
Höhe: 80 cm
Tiefe: 40 cm

Dann kann der Alt-Text des Bildes kurz bleiben:

„Maßzeichnung des Sideboards; vollständige Maße stehen in den Produktdetails.“

Was gehört nicht in einen Alt-Text?

Es gibt einige Dinge, die man fast immer vermeiden kann.

11. „Bild von“ ist meistens unnötig

Ein Screenreader erkennt normalerweise bereits, dass es sich um ein Bild handelt.

Statt:

„Bild von einem schwarzen Wanderschuh.“

reicht:

„Schwarzer Wanderschuh mit orangefarbener Schnürung.“

Auch:

„Foto von“

ist meistens nicht nötig.

Es kann Ausnahmen geben, wenn die Tatsache, dass etwas eine Fotografie, Zeichnung oder Illustration ist, selbst relevant ist.

Bei normalen Produktbildern ist das selten der Fall.

12. Dateinamen gehören nicht hinein

Schlecht:

„wanderschuh-schwarz-01-final.webp“

Ein Dateiname kann für SEO oder Dateiverwaltung sinnvoll sein.

Er ersetzt keinen Alt-Text.

13. Keine Keyword-Listen

Alt-Texte sollten nicht so aussehen:

„Wanderschuhe Herren kaufen Wanderschuh günstig Outdoor Schuhe Trekking Schuh online kaufen.“

Das liest sich nicht wie eine Bildbeschreibung und hilft Nutzern nicht.

Beschreibe das Bild.

Nicht deine Keyword-Liste.

14. Keine unnötigen Wiederholungen

Wenn direkt oberhalb des Bildes steht:

„Trail Pro Wanderschuh in Schwarz“

muss der Alt-Text nicht jedes Wort einfach wiederholen, wenn das Bild keine zusätzliche Information liefert.

Bei einem aussagekräftigen Produktfoto kann der Alt-Text stattdessen die visuellen Merkmale ergänzen.

Wie lang sollte ein Alt-Text sein?

Es gibt keine magische Anzahl an Zeichen, die jeden Alt-Text automatisch gut macht.

Die bessere Regel lautet:

So kurz wie möglich, so ausführlich wie nötig.

Bei einem einfachen Produktbild reicht häufig ein Satz.

Zum Beispiel:

„Schwarzer Herren-Wanderschuh mit orangefarbenen Schnürsenkeln und grober Profilsohle.“

Das ist deutlich hilfreicher als ein langer Absatz.

Bei komplexen Informationen sollte die ausführliche Beschreibung außerhalb des Alt-Texts stehen.

Alt-Texte für Variantenbilder

Besonders interessant wird es bei Produktvarianten.

Angenommen, ein Pullover ist erhältlich in:

• Schwarz
• Blau
• Grün
• Beige

Wenn der Nutzer die Farbe auswählt, ändert sich das Hauptbild.

Der Alt-Text sollte dann ebenfalls zur dargestellten Variante passen.

Bei Schwarz:

„Kapuzenpullover in Schwarz mit Fronttasche.“

Bei Grün:

„Kapuzenpullover in Dunkelgrün mit Fronttasche.“

Wenn immer derselbe Alt-Text bleibt, bekommt ein Screenreader-Nutzer möglicherweise nicht mit, dass sich das Produktbild geändert hat.

15. Alt-Texte an Produktvarianten anpassen

Dieser Punkt sollte besonders bei WooCommerce-Plugins geprüft werden.

Nicht jedes Variantenplugin aktualisiert automatisch alle relevanten Bildinformationen sauber.

Teste deshalb die fertige Produktseite und nicht nur die Einstellungen im Backend.

Was ist mit Bildern in Produktübersichten?

Auf Kategorie- und Suchseiten erscheinen oft 20 oder mehr Produktbilder gleichzeitig.

Auch hier braucht es eine sinnvolle Lösung.

Wenn ein Produktbild innerhalb eines Links steht und direkt darunter bereits der Produktname verlinkt ist, sollte die Ausgabe nicht unnötig doppelt oder dreifach werden.

Ein Screenreader sollte nicht hören:

„Link Wanderschuh Trail Pro, Grafik Wanderschuh Trail Pro, Wanderschuh Trail Pro.“

Je nach technischem Aufbau kann das Bild dann beispielsweise so behandelt werden, dass der vorhandene Linktext bereits ausreichend ist.

Das Ziel lautet:

Information erhalten, Wiederholungen vermeiden.

Produktbilder müssen auch technisch gut bedienbar sein

Alt-Texte sind nur ein Teil des Themas.

Eine barrierefreie Bildergalerie muss auch bedienbar sein.

16. Vorschaubilder mit Tastatur erreichbar machen

Wenn der Nutzer zwischen mehreren Bildern wechseln kann, sollte das nicht ausschließlich per Maus möglich sein.

Teste mit Tab und Enter.

Kannst du:

• das nächste Bild auswählen?
• ein Vorschaubild öffnen?
• wieder zurück?
• erkennen, welches Vorschaubild gerade aktiv ist?

17. Aktives Produktbild kennzeichnen

Wenn fünf Vorschaubilder vorhanden sind, sollte klar sein, welches davon aktuell groß angezeigt wird.

Der Zustand darf nicht nur über einen sehr dünnen farbigen Rahmen erkennbar sein.

Hilfstechnologien sollten ebenfalls verstehen können, welche Auswahl aktiv ist.

18. Pfeile verständlich beschriften

Links und rechts neben Produktbildern befinden sich häufig Pfeile.

Ein Screenreader sollte daraus nicht nur:

„Button Pfeil“

machen.

Sinnvoller:

„Vorheriges Produktbild“

und:

„Nächstes Produktbild“

19. Zoomfunktion testen

Viele Shops öffnen beim Anklicken eines Produktbildes eine vergrößerte Lightbox.

Teste:

• Kann sie mit Tastatur geöffnet werden?
• Wird der Fokus in die Lightbox geführt?
• Funktionieren Vor und Zurück?
• Kann sie mit Escape geschlossen werden?
• Gibt es einen verständlich benannten Schließen-Button?
• Springt der Fokus anschließend zurück?

Eine Bildergalerie darf nicht zur Tastaturfalle werden.

Was ist mit 360-Grad-Ansichten?

Einige Shops bieten drehbare Produktdarstellungen.

Das kann für sehende Nutzer sehr hilfreich sein.

Wesentliche Produktinformationen dürfen aber nicht ausschließlich durch die Interaktion mit dieser Ansicht verfügbar sein.

Wenn die 360-Grad-Ansicht beispielsweise wichtige Anschlüsse auf der Rückseite eines Geräts zeigt, sollten diese auch in der Beschreibung oder über zusätzliche zugängliche Informationen erwähnt werden.

Produktbilder und Farbkontrast

Das eigentliche Produktfoto muss natürlich nicht künstlich verändert werden, nur um einen bestimmten Farbkontrast zu erzeugen.

Anders sieht es bei Bedienelementen rund um das Bild aus.

Zum Beispiel:

• Galerie-Pfeile
• Zoom-Symbol
• Favoriten-Button
• Bildzähler
• Auswahlrahmen
• Schließen-Button

Diese Elemente müssen gut erkennbar bleiben.

Ein weißer Pfeil auf einem sehr hellen Produktfoto kann praktisch unsichtbar werden.

Deshalb lohnt sich ein stabiler Hintergrund oder eine kontrastreiche Umrandung.

Alt-Texte in WordPress und WooCommerce

WordPress bietet beim Hochladen von Bildern ein Feld für Alternativtext.

Das ist praktisch.

Allerdings sollte man nicht einfach davon ausgehen, dass derselbe Alt-Text überall perfekt passt.

Ein Bild kann an mehreren Stellen verwendet werden:

• Produktseite
• Kategorie
• Blogartikel
• Startseite
• Werbebanner

Der Zweck kann sich unterscheiden.

Deshalb sollte man insbesondere bei wichtigen Produktbildern prüfen, welcher Alt-Text tatsächlich im fertigen Frontend ausgegeben wird.

20. Medienbibliothek nicht blind als Wahrheit betrachten

Nur weil in WordPress ein Alt-Text eingetragen wurde, bedeutet das nicht automatisch, dass das Theme oder Plugin ihn überall genauso verwendet.

Manche Galerien erzeugen eigene Bilder.

Andere Plugins überschreiben Attribute.

Wieder andere nutzen Hintergrundbilder.

Deshalb gilt:

Frontend testen.

Nicht nur Backend ausfüllen.

Automatisch generierte Alt-Texte

Mittlerweile gibt es verschiedene Tools und KI-Funktionen, die Bilder automatisch beschreiben können.

Das kann bei sehr großen Produktkatalogen eine Hilfe sein.

Man sollte diese Texte aber nicht ungeprüft übernehmen.

Ein automatisches System erkennt vielleicht:

„Schwarzer Schuh auf weißem Hintergrund.“

Für den Shop sind aber die entscheidenden Merkmale:

„Schwarzer Sicherheitsstiefel mit Stahlkappe und knöchelhohem Schaft.“

Die Bildanalyse kennt nicht automatisch den Kontext der Produktseite.

Automatisierung kann deshalb beim Erstellen helfen.

Die Verantwortung für sinnvolle Produktinformationen sollte trotzdem nicht vollständig abgegeben werden.

Die häufigsten Fehler bei Produktbildern

In Online-Shops sieht man immer wieder dieselben Probleme.

Fehler 1: Alt-Text fehlt vollständig

Der Screenreader bekommt gar keine sinnvolle Information oder liest den Dateinamen.

Fehler 2: Alt-Text lautet nur „Produktbild“

Damit weiß der Nutzer praktisch nichts über das Produkt.

Fehler 3: Alle Galeriebilder besitzen denselben Alt-Text

Unterschiedliche Ansichten werden dadurch nicht verständlich.

Fehler 4: Alt-Text besteht aus Keywords

Der Text wurde für Suchmaschinen statt für Menschen geschrieben.

Fehler 5: Dekorative Bilder werden ausführlich beschrieben

Dadurch entsteht unnötiger akustischer Ballast.

Fehler 6: Funktionsbilder beschreiben nur das Symbol

„Herz“ statt „Zur Wunschliste hinzufügen“.

Fehler 7: Wichtige Informationen stehen ausschließlich im Bild

Maße, Lieferumfang oder Eigenschaften fehlen als echter Text.

Fehler 8: Varianten wechseln das Bild, aber nicht die Beschreibung

Der visuelle Zustand und die Textalternative passen nicht mehr zusammen.

Fehler 9: Bildergalerie funktioniert nur mit Maus

Alt-Texte helfen wenig, wenn die Galerie selbst nicht erreichbar ist.

Fehler 10: Automatische Alt-Texte werden ungeprüft übernommen

Die Beschreibung stimmt vielleicht technisch, vermittelt aber nicht die kaufrelevante Information.

Beispiele für gute und schlechte Produkt-Alt-Texte

Schuhe

Schlecht:
„Schuh“

Besser:
„Schwarzer Wanderschuh mit orangefarbenen Schnürsenkeln und grober Profilsohle.“

Pullover

Schlecht:
„Produktbild Pullover“

Besser:
„Dunkelblauer Kapuzenpullover mit Reißverschluss und zwei Fronttaschen.“

Rucksack

Schlecht:
„Rucksack kaufen“

Besser:
„Schwarzer Tagesrucksack mit zwei Seitentaschen und gepolstertem Rücken.“

Tisch

Schlecht:
„Esstisch“

Besser:
„Rechteckiger Esstisch aus heller Eiche mit schwarzem Metallgestell.“

Smartphone

Schlecht:
„Handy Rückseite“

Besser:
„Rückseite des schwarzen Smartphones mit drei Kameralinsen.“

Lieferumfang

Schlecht:
„Zubehör“

Besser:
„Lieferumfang mit Kopfhörern, Ladekabel und Transporttasche.“

Detailbild

Schlecht:
„Detail“

Besser:
„Nahaufnahme der wasserabweisenden Stoffoberfläche.“

Eine einfache Formel für gute Alt-Texte

Bei Produktbildern kann diese kleine Formel helfen:

Produkt + wichtiges sichtbares Merkmal + besondere Information

Zum Beispiel:

Produkt: Rucksack

Merkmal: Schwarz, zwei Seitentaschen

Besondere Information: gepolsterter Rücken

Ergebnis:

„Schwarzer Rucksack mit zwei Seitentaschen und gepolstertem Rücken.“

Bei einem weiteren Bild:

Produkt: Rucksack

Perspektive: Innenansicht

Information: Laptopfach

Ergebnis:

„Geöffneter Rucksack mit gepolstertem Laptopfach im Hauptfach.“

Das funktioniert für erstaunlich viele Produkte.

Praktische Checkliste für Produktbilder

Gehe eine typische Produktseite durch und prüfe:

• Haben wichtige Produktbilder einen Alt-Text?
• Beschreibt der Alt-Text relevante Produktmerkmale?
• Sind die Texte kurz und verständlich?
• Werden unnötige Begriffe wie „Bild von“ vermieden?
• Enthalten die Alt-Texte keine Keyword-Listen?
• Haben unterschiedliche Galeriebilder unterschiedliche Beschreibungen?
• Werden Detailbilder konkret beschrieben?
• Sind Variantenfarben im Alt-Text korrekt?
• Werden dekorative Bilder von Screenreadern übersprungen?
• Beschreiben Funktionsbilder ihre Aktion?
• Stehen wichtige Texte nicht ausschließlich in Bildern?
• Sind Maße und technische Daten zusätzlich als Text vorhanden?
• Gibt es bei komplexen Grafiken eine ausführliche Textalternative?
• Funktioniert die Bildergalerie mit Tastatur?
• Sind Galerie-Pfeile verständlich beschriftet?
• Kann die Zoomansicht wieder geschlossen werden?
• Funktioniert die Galerie auf dem Smartphone?
• Sind automatisch erzeugte Alt-Texte geprüft worden?

Wie gehe ich bei hunderten Produkten vor?

Bei großen Shops kann das Thema überwältigend wirken.

Vielleicht befinden sich bereits 5.000 Produktbilder im System.

Das bedeutet nicht, dass man jetzt zufällig bei Bild Nummer 1 anfangen und sich bis Nummer 5.000 durcharbeiten muss.

Eine bessere Strategie ist die Priorisierung.

Priorität 1: Bestseller und wichtige Produktseiten

Beginne bei Produkten, die:

• besonders häufig besucht werden,
• viel Umsatz bringen,
• aktiv beworben werden,
• wichtige Kampagnen besitzen.

Damit verbessert man zuerst die Seiten mit der größten Reichweite.

Priorität 2: Hauptbilder

Danach können zunächst die wichtigsten Hauptbilder der Produkte geprüft werden.

Ein guter Hauptbild-Alt-Text ist besser als überhaupt keine sinnvolle Beschreibung.

Priorität 3: Informationsreiche Galeriebilder

Als Nächstes:

• Detailbilder
• Innenansichten
• Rückseiten
• Anschlussbilder
• Lieferumfang
• Maßzeichnungen

Gerade diese Bilder vermitteln oft zusätzliche Informationen.

Priorität 4: Dekorative und redundante Bilder bereinigen

Zum Schluss kann geprüft werden, welche Bilder überhaupt keine Beschreibung benötigen und wo unnötige Wiederholungen entfernt werden können.

Einen einfachen Redaktionsprozess einführen

Langfristig ist es besser, neue Fehler gar nicht erst entstehen zu lassen.

Beim Anlegen eines neuen Produkts kann eine kleine Routine helfen.

Neues Produkt prüfen

Produktbilder hochladen.

Dann bei jedem Bild fragen:

Was erfährt ein sehender Kunde durch dieses Bild?

Wenn die Antwort eine wichtige Information enthält, wird daraus ein Alt-Text.

Danach prüfen:

Steht eine wichtige Information ausschließlich im Bild?

Wenn ja, sollte sie zusätzlich als normaler Produkttext vorhanden sein.

Zum Schluss:

Hat das Bild nur dekorativen Charakter?

Dann braucht es keine unnötige Beschreibung.

Dieser Ablauf dauert nach etwas Übung nur wenige Sekunden pro Bild.

Produktbilder einmal mit Screenreader testen

Der vielleicht interessanteste Test besteht darin, die eigene Produktseite einmal mit einem Screenreader anzuhören.

Nicht anschauen.

Anhören.

Dann merkt man sehr schnell, wie unterschiedlich ein Shop wahrgenommen werden kann.

Statt einer schönen Produktgalerie könnte man beispielsweise hören:

„Grafik 4582.“

„Grafik 4583.“

„Grafik 4584.“

„Grafik 4585.“

Das ist wenig hilfreich.

Mit guten Alt-Texten entsteht dagegen:

„Schwarzer Wanderschuh von der Seite.“

„Rückseite mit gepolstertem Fersenbereich.“

„Unterseite mit grober Profilsohle.“

„Nahaufnahme des wasserabweisenden Obermaterials.“

Damit lässt sich bereits ein ziemlich gutes Bild vom Produkt entwickeln.

Fazit: Ein guter Alt-Text beschreibt nicht das Bild, sondern die relevante Information

Bei barrierefreien Produktbildern geht es nicht darum, jedes Foto möglichst ausführlich in Worte zu verwandeln.

Es geht darum, keine wichtigen Informationen ausschließlich im Bild einzuschließen.

Der einfachste Ansatz lautet deshalb:

Warum befindet sich dieses Bild auf der Produktseite?

Zeigt es eine Farbe?

Dann sollte die Farbe zugänglich sein.

Zeigt es das Innenfach eines Rucksacks?

Dann sollte dieses Innenfach beschrieben werden.

Zeigt es die Anschlüsse eines Geräts?

Dann sind die Anschlüsse wichtig.

Ist es nur eine dekorative Hintergrundgrafik?

Dann muss sie einem Screenreader-Nutzer wahrscheinlich gar nicht vorgelesen werden.

Wer nach diesem Prinzip arbeitet, schreibt meistens automatisch bessere Alt-Texte.

Und davon profitieren nicht nur Menschen, die Bilder nicht sehen können. Eine Produktseite, auf der wesentliche Informationen zusätzlich als verständlicher Text verfügbar sind, ist insgesamt klarer und robuster.

Barrierefreiheit beginnt deshalb bei Produktbildern nicht mit einer komplizierten technischen Prüfung.

Oft beginnt sie mit einer sehr einfachen Frage:

Was möchte ich dem Kunden mit diesem Bild eigentlich zeigen?

Die Antwort darauf ist häufig schon fast der perfekte Alt-Text.

Hinweis: Dieser Beitrag bietet eine allgemeine Orientierung und ersetzt keine individuelle Rechtsberatung oder vollständige Barrierefreiheitsprüfung.