Produktvarianten und Groessenwahl barrierefrei im Online-Shop: Weniger Frust vor dem Warenkorb

Gerade Mode-, Ersatzteil- und Konfigurations-Shops verlieren haeufig Umsatz an einer unsauberen Variantenlogik. Wenn Groesse, Farbe, Set-Auswahl oder Verfuegbarkeit nur optisch sichtbar sind, koennen Nutzer das Produkt nicht sicher konfigurieren und springen ab.

Typische Fehler auf variantenreichen Produktseiten

• Farbfelder ohne Text: Screenreader-Nutzer hoeren nur "Button, Button, Button".
• Groessen nur per Farbe markiert: Verfuegbar, ausverkauft oder aktiv ist nicht eindeutig.
• Dynamische Preis- und Bildwechsel: Inhalte aendern sich, ohne dass assistive Technik informiert wird.
• Pflichtauswahl ohne Hinweis: Der Nutzer klickt auf "In den Warenkorb" und scheitert erst dann.
• Verfuegbarkeit unklar: Lieferzeit, Restbestand oder Vorbestellung sind missverstaendlich.

Die 5 Pflichtpruefungen fuer Varianten und Groessenwahl

1. Jede Variante braucht eine echte Beschriftung

Farben, Groessen und Ausfuehrungen duerfen nicht nur als Kreis oder Kachel erscheinen. Jede Option braucht einen klaren Namen, der technisch mit ausgegeben wird.

2. Aktiver Zustand muss sichtbar und hoerbar sein

Nutzer muessen erkennen, welche Variante aktiv ist. Das gilt fuer sichtbare Markierungen, Tastatur-Fokus und den Zustand fuer Screenreader gleichermassen.

3. Nicht verfuegbare Optionen sauber kennzeichnen

Ausverkaufte oder nicht kombinierbare Varianten duerfen nicht wie aktive Optionen aussehen. Besser ist eine klare Deaktivierung mit Hinweistexten statt stiller Blockade.

4. Dynamische Aenderungen ansagen

Wenn sich Bild, Preis, SKU oder Lieferzeit nach der Auswahl aendern, sollte diese Aenderung technisch nachvollziehbar sein. Sonst wirkt die Seite widerspruechlich.

5. Pflichtoptionen vor dem CTA benennen

Wer erst nach dem Klick auf "In den Warenkorb" sagt, dass noch eine Groesse fehlt, baut Reibung ein. Pflichtauswahlen gehoeren sichtbar vor den CTA.

WCAG-Hotspots bei Varianten-Widgets

• 1.3.1 Info and Relationships: Variantenlogik ist nur optisch, aber nicht semantisch aufgebaut.
• 1.4.1 Use of Color: Verfuegbarkeit oder Aktivzustand werden nur ueber Farbe signalisiert.
• 2.1.1 Keyboard: Swatches, Dropdowns oder Custom Selector sind nicht komplett per Tastatur steuerbar.
• 4.1.2 Name, Role, Value: Custom Widgets geben ihren Zustand nicht sauber aus.
• 4.1.3 Status Messages: Preis- und Lageraenderungen bleiben fuer assistive Technik stumm.

Schneller Praxistest fuer Shop-Betreiber

1. Produktseite ohne Maus durchlaufen und jede Variante per Tastatur waehlen.
2. Screenreader-Test fuer Farbe, Groesse und Ausverkauf-Zustaende machen.
3. Pruefen, ob Preis, Bild und Lieferzeit nach Variantenauswahl klar aktualisiert werden.
4. Absichtlich ohne Groessenwahl auf den CTA klicken und den Fehlerweg bewerten.
5. Produktseite mit dem kostenlosen BFSG-Scanner vorpruefen.

Quick Wins fuer diese Woche

Wenn Sie nur drei Dinge anpassen, geben Sie Varianten echte Textlabels, markieren Sie den aktiven Zustand klar und kennzeichnen Sie nicht verfuegbare Optionen unmissverstaendlich. Diese drei Punkte helfen Conversion und Barrierefreiheit zugleich.