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.