Produktdetailseiten barrierefrei optimieren: Mehr Conversion unter BFSG

Die Produktdetailseite ist einer der teuersten Punkte für Barrieren: Hier entscheiden Kunden, ob sie kaufen, abspringen oder im Support landen. Wenn Bildgalerien, Varianten-Auswahl, Preisinfos oder der Warenkorb-Button nicht sauber funktionieren, sinkt die Conversion direkt.

Wo Shops auf Produktseiten häufig Geld verlieren

• Bilder ohne Alt-Text: Screenreader-Nutzer erfahren nicht, was verkauft wird.
• Varianten nur visuell erkennbar: Größe, Farbe oder Material sind nicht eindeutig auswählbar.
• Call-to-Action im Overlay-Chaos: Cookie-Banner, Chat-Widgets oder Sticky-Bars verdecken den Fokus.
• Bewertungen und Akkordeons: Inhalte klappen per Maus auf, aber nicht sauber per Tastatur.
• Preis- und Versandhinweise: Kleine graue Texte sind auf Mobilgeräten kaum lesbar.

Die 5 wichtigsten Prüfbereiche

1. Produktbilder und Galerien

Jedes relevante Bild braucht einen sinnvollen Alt-Text. Nicht „Bild 1“, sondern z. B. „Edelstahl-Thermoskanne 1 Liter mit schwarzem Deckel“. Zoom-Ansichten und Slider müssen per Tastatur erreichbar sein.

2. Varianten-Auswahl

Farbe, Größe oder Ausführung dürfen nicht nur über Farbfelder kommuniziert werden. Nutzer brauchen sichtbare Beschriftungen und einen klaren Status, welche Variante aktiv ist.

3. Primärer CTA

Der Button „In den Warenkorb“ muss deutlich beschriftet, gut fokussierbar und auch bei 200 Prozent Zoom sichtbar bleiben. Versteckte oder erst beim Hover sichtbare CTA-Konzepte kosten Umsatz.

4. Produktinformationen

Lieferzeit, Versandkosten, Verfügbarkeit und Rückgabehinweise müssen lesbar und verständlich sein. Wer diese Infos in Mini-Schrift oder schwer auffindbaren Tabs versteckt, erhöht Unsicherheit und Supportanfragen.

5. Bewertungen und Zusatzinhalte

Sternebewertungen, FAQ-Akkordeons und Cross-Selling-Module brauchen semantische Strukturen. Ein Screenreader muss erkennen, was Überschrift, Schaltfläche und Status ist.

WCAG-Hotspots auf Produktseiten

• 1.1.1 Non-text Content: Produktbilder ohne Alt-Texte.
• 1.3.1 Info and Relationships: Varianten und Preisblöcke nicht sauber strukturiert.
• 2.4.7 Focus Visible: Fokus auf Buttons oder Tabs unsichtbar.
• 3.3.2 Labels or Instructions: Unklare Hinweise vor der Variantenwahl.

Ein schneller Produktseiten-Test

1. Produktseite ohne Maus bedienen: Galerie, Varianten, CTA, Bewertungen.
2. Seite auf 200 Prozent Zoom prüfen.
3. Nur mit Tastatur bis in den Warenkorb gehen.
4. Fehler provozieren, etwa Klick auf CTA ohne Variantenwahl.
5. Automatischen Erstscan mit dem BFSG-Scanner starten.

Was ein guter Quick Win ist

Wenn Sie heute nur drei Dinge angehen, dann diese: Alt-Texte für Hauptbilder, klare Beschriftungen für Varianten und einen sichtbaren Fokus-Stil für CTA und Akkordeons. Das sind kleine Eingriffe mit direkter Auswirkung auf Conversion und Nutzbarkeit.

Produktvideos und interaktive 360-Grad-Ansichten

Produktvideos und drehbare 360-Grad-Ansichten gehören inzwischen zum Standard auf vielen Produktseiten, bringen aber eigene Barrieren mit, die im Test häufig übersehen werden, weil sie technisch komplexer sind als ein einfaches Bild.

Ein Produktvideo mit gesprochenem Text braucht Untertitel, damit gehörlose oder schwerhörige Nutzer die Information ebenfalls erhalten. Enthält das Video wichtige Informationen, die nur gesprochen und nicht zusätzlich im umgebenden Text stehen – etwa Pflegehinweise oder Größenangaben –, sollten diese Informationen zusätzlich in Textform auf der Seite verfügbar sein, nicht nur im Video versteckt.

Die Steuerung des Videos selbst muss per Tastatur bedienbar sein: Abspielen, Pause, Lautstärke und Vollbild sollten sich ohne Maus erreichen lassen. Autoplay-Videos mit Ton sind besonders problematisch, weil sie Screenreader-Ausgaben übertönen können und Nutzer oft nicht sofort finden, wie sie den Ton abstellen. Ein Video ohne automatischen Start, das der Nutzer bewusst aktiviert, umgeht dieses Problem von vornherein.

360-Grad-Ansichten lassen sich meist nur per Maus oder Touch drehen. Für Tastaturnutzer sollte mindestens eine alternative Bedienung über Pfeiltasten möglich sein, oder es sollte eine Reihe fester Standbilder aus verschiedenen Blickwinkeln als Alternative bereitstehen. Wichtig ist außerdem, dass der Ladezustand einer 360-Ansicht für Screenreader-Nutzer erkennbar ist – etwa durch eine kurze Textankündigung, dass eine interaktive Ansicht verfügbar ist, statt sie stillschweigend über einem unsichtbaren Bereich zu platzieren, der ohne Erklärung einfach übersprungen wird.

Cross-Selling- und Empfehlungsmodule zugänglich aufbauen

Empfehlungsmodule wie „Kunden kauften auch“ oder „Passend dazu“ bestehen meist aus horizontal scrollbaren Produktkarten. Diese Karussells zählen zu den am häufigsten fehlerhaften Bausteinen auf Produktseiten, weil sie oft als eigenständige, in sich geschlossene Komponente eingekauft und ohne genaue Prüfung eingebunden werden.

Jede Karte im Karussell braucht dieselbe Struktur wie eine reguläre Produktkachel: erkennbarer Produktname, sichtbarer Preis und ein eindeutiger Link, der beim Fokussieren erkennen lässt, zu welchem Produkt er führt. Verlinkt nur das Bild, während Name und Preis als reiner Text ohne eigenen Link daneben stehen, verlieren Tastaturnutzer den direkten Zugriff auf einen großen Teil der eigentlich verfügbaren Information.

Die Scroll-Steuerung selbst – meist Pfeil-Buttons links und rechts vom Karussell – muss per Tastatur erreichbar und eindeutig beschriftet sein, statt eines bloßen Pfeilsymbols ohne Text. Bewegt sich das Karussell automatisch weiter, sollte es sich pausieren lassen, weil ein sich selbst bewegendes Element für Screenreader-Nutzer und Menschen mit kognitiven Einschränkungen gleichermaßen die Orientierung erschwert.

Bei der Reihenfolge im Quellcode lohnt sich ein zweiter Blick: Ist das Empfehlungsmodul visuell zwar unterhalb der Produktinfo platziert, im Code aber davor eingebunden, springen Screenreader-Nutzer erst durch alle Empfehlungen, bevor sie überhaupt die Produktbeschreibung erreichen. Eine Code-Reihenfolge, die der visuellen Reihenfolge entspricht, verhindert diese unnötige Umwegführung durch die Seite.

Größentabellen und Konfiguratoren barrierefrei gestalten

Größentabellen und Produktkonfiguratoren gehören zu den Bausteinen mit dem direktesten Einfluss auf die Kaufentscheidung – wer die passende Größe nicht sicher einschätzen kann, bestellt entweder gar nicht oder mehrere Größen zur Auswahl, was beiden Seiten schadet.

Eine Größentabelle sollte als echte HTML-Tabelle mit Kopfzeilen aufgebaut sein, nicht als Bild oder als reine Aneinanderreihung von Textzeilen ohne Struktur. Nur so kann ein Screenreader Zeile und Spalte korrekt zuordnen und einen Wert der richtigen Kategorie zuordnen, statt nur eine Zahl ohne Kontext vorzulesen.

Konfiguratoren, bei denen Nutzer Farbe, Material oder Zubehör zusammenstellen, bestehen häufig aus mehreren Auswahlschritten, die sich gegenseitig beeinflussen – etwa wenn eine bestimmte Farbe nur mit bestimmten Größen kombinierbar ist. Wird eine Option durch eine andere Auswahl deaktiviert, muss dieser Zustand auch technisch als deaktiviert erkennbar sein, nicht nur optisch ausgegraut. Sonst versuchen Tastaturnutzer weiterhin, eine Option auszuwählen, die tatsächlich gar nicht mehr verfügbar ist.

Der laufend aktualisierte Gesamtpreis in einem Konfigurator sollte bei jeder Änderung für Screenreader-Nutzer wahrnehmbar aktualisiert werden, damit die Preisänderung nicht nur sehenden Nutzern auffällt. Zusätzlich hilft eine klare Zusammenfassung der gewählten Konfiguration vor dem Hinzufügen zum Warenkorb, damit alle Nutzer ihre Auswahl vor dem Kauf noch einmal eindeutig bestätigen können, unabhängig davon, wie sie sich durch den Konfigurator bewegt haben.

Verfügbarkeits- und Lieferstatus-Anzeigen barrierefrei gestalten

Verfügbarkeitsanzeigen wie „auf Lager“, „nur noch wenige verfügbar“ oder „aktuell ausverkauft“ gehören zu den Informationen, die eine Kaufentscheidung direkt beeinflussen. Trotzdem werden sie auf vielen Produktseiten nur über farbige Punkte oder kleine Icons dargestellt, ohne begleitenden Text.

Ein farbiger Punkt allein – grün für verfügbar, rot für ausverkauft – transportiert diese Information nicht zuverlässig an Screenreader-Nutzer und ist auch für Menschen mit eingeschränktem Farbsehen schwer zu unterscheiden. Ein kurzer Textzusatz neben oder anstelle der Farbmarkierung löst dieses Problem zuverlässig, ohne dass sich am visuellen Gesamteindruck der Seite viel ändern muss.

Bei einer geschätzten Lieferzeit sollte die Angabe so konkret wie möglich, aber auch so ehrlich wie möglich formuliert sein, ohne einen exakten Termin zu versprechen, den der Shop nicht sicher einhalten kann. Wichtig ist vor allem, dass diese Angabe als echter Text im Quellcode vorhanden ist und nicht nur als Teil einer Grafik oder eines eingebetteten Bildes, das Lieferzeiten optisch darstellt.

Wechselt der Verfügbarkeitsstatus, etwa weil ein Artikel während des Seitenbesuchs ausverkauft wird, sollte diese Änderung auch für Nutzer erkennbar sein, die den Warenkorb-Button bereits fokussiert haben. Ein Button, der optisch deaktiviert wird, aber technisch weiterhin als aktiv gilt, führt dazu, dass Tastaturnutzer eine Bestellung auslösen, die im Hintergrund gar nicht mehr möglich ist, und erst durch eine spätere Fehlermeldung vom eigentlichen Problem erfahren.

Für Varianten mit unterschiedlicher Verfügbarkeit, etwa je nach Größe oder Farbe, sollte der Status pro Variante einzeln erkennbar sein, nicht nur als allgemeine Aussage für das gesamte Produkt. So lässt sich schon vor der Auswahl erkennen, welche Kombinationen überhaupt bestellbar sind, statt das erst nach mehreren Fehlversuchen zu erfahren.