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.

Größentabellen und Maßhilfen technisch sauber einbinden

Viele Shops zeigen ihre Größentabelle als Bild oder Screenshot in einem Pop-up. Für Screenreader-Nutzer ist ein solches Bild in der Regel nicht lesbar, selbst wenn ein Alternativtext hinterlegt ist, weil die einzelnen Zahlen und Zuordnungen darin verloren gehen. Eine echte HTML-Tabelle mit Zeilen- und Spaltenüberschriften lässt sich dagegen Zelle für Zelle vorlesen und einer bestimmten Größe eindeutig zuordnen.

Wichtig ist außerdem, wie die Tabelle mit der eigentlichen Größenauswahl zusammenhängt. Öffnet ein Link "Größentabelle" ein Overlay, sollte der Fokus beim Öffnen automatisch dorthin springen und beim Schließen wieder zur Größenauswahl zurückkehren. Sonst verliert die Person die Stelle, an der sie im Formular war, und muss sich erneut durch die Seite orientieren.

Bei internationalen Shops kommt häufig eine dritte Schwierigkeit hinzu: unterschiedliche Maßsysteme wie EU-, UK- und US-Größen in derselben Tabelle. Werden diese Systeme nur durch Spaltenüberschriften unterschieden, sollte jede Spalte eine eindeutige, technisch auslesbare Überschrift tragen, damit klar bleibt, welche Zahl zu welchem System gehört.

Native Auswahlfelder gegen selbstgebaute Button-Gruppen abwägen

Ein natives HTML-Auswahlfeld bringt Tastaturbedienung, Ankündigung des aktuellen Werts und ein bekanntes Bedienmuster automatisch mit. Sobald ein Shop stattdessen eigene Buttons, Kacheln oder Kreise für Größen und Farben baut, gehen diese Eigenschaften verloren, wenn sie nicht bewusst nachgebaut werden.

Für selbstgebaute Varianten-Widgets bedeutet das: Jede Option braucht eine Rolle, die ihr Verhalten beschreibt, zum Beispiel als Radio-Button innerhalb einer Gruppe, dazu einen Zustand, der anzeigt, ob sie ausgewählt ist, und eine Pfeiltasten-Navigation zwischen den Optionen, wie Nutzer sie von nativen Radio-Gruppen kennen. Ein reines Klick-Div ohne diese Eigenschaften lässt sich zwar mit der Maus bedienen, für Tastatur- und Screenreader-Nutzer bleibt es jedoch unsichtbar.

Vor dem Bau eines eigenen Widgets lohnt sich deshalb die Gegenfrage, ob ein natives Element mit eigenem Styling nicht denselben visuellen Effekt erzielt und dabei die eingebaute Zugänglichkeit behält. Bei einfachen Farbkacheln reicht oft ein gestyltes Radio-Input, statt eine komplette Widget-Logik neu zu entwickeln.

Kontrast und Erkennbarkeit bei Farb-Swatches

Farbkacheln zeigen häufig nur einen kleinen Farbklecks ohne Textlabel. Für Menschen mit Farbsehschwäche sind ähnliche Töne wie Marine und Schwarz oder Bordeaux und Braun auf einem kleinen Quadrat kaum zu unterscheiden, besonders bei schwacher Bildschirmbeleuchtung oder auf einem kleinen Smartphone-Display.

Der ausgewählte Zustand einer Swatch darf sich deshalb nicht allein über eine Farbänderung des Rahmens unterscheiden. Ein zusätzliches Symbol, ein deutlich dickerer Rahmen mit ausreichendem Kontrast zum Hintergrund oder ein Häkchen im aktiven Feld macht die Auswahl auch für Menschen erkennbar, die den Farbunterschied selbst nicht wahrnehmen.

Nicht verfügbare Farben brauchen dieselbe Sorgfalt. Ein bloß leicht aufgehellter Farbton wirkt für viele Nutzer identisch mit einer normalen, wählbaren Option. Eine durchgestrichene Darstellung oder ein zusätzliches Wort wie "ausverkauft" direkt bei der Farbe macht den Unterschied eindeutig, unabhängig davon, wie gut jemand Farben unterscheiden kann.

Mengenauswahl und Bestätigung im Warenkorb

Steppers für die Stückzahl bestehen oft nur aus einem Minus- und einem Plus-Symbol ohne sichtbares Textlabel. Screenreader-Nutzer hören dann bestenfalls "Button", aber nicht, wofür der Button steht oder welcher aktuelle Wert im Feld daneben angezeigt wird. Ein Label wie "Menge verringern" beziehungsweise "Menge erhöhen" sowie eine Verknüpfung zum Eingabefeld beheben das.

Nach dem Klick auf "In den Warenkorb" sollte außerdem eine Bestätigung folgen, die auch ohne Blick auf ein neu erscheinendes Mini-Warenkorb-Icon wahrnehmbar ist. Eine kurze, per aria-live eingeblendete Meldung wie "Artikel wurde zum Warenkorb hinzugefügt" schließt diese Lücke, ohne die Seite optisch zu verändern.

Beim Vergrößern der Seite auf 400 Prozent oder mehr, wie es viele sehbehinderte Nutzer einstellen, darf die Variantenauswahl nicht aus dem sichtbaren Bereich rutschen oder von anderen Elementen überdeckt werden. Ein Test mit stark vergrößerter Browseransicht zeigt schnell, ob Auswahl, Preis und Warenkorb-Button noch zusammen bedienbar bleiben.

Automatisierte Prüfwerkzeuge und ihre Grenzen bei Variantenlogik

Automatisierte Scanner erkennen zuverlässig, wenn ein Button ganz ohne Namen im Code steht oder ein Kontrastwert klar zu niedrig ist. Ob eine Größentabelle inhaltlich verständlich aufgebaut ist oder ob der Fokus nach dem Öffnen eines Overlays sinnvoll springt, können solche Werkzeuge dagegen kaum beurteilen, weil dafür der tatsächliche Bedienablauf nachvollzogen werden muss.

Ein manueller Durchlauf über eine typische Produktseite deckt deshalb andere Probleme auf als ein automatischer Scan: Größe wählen, Farbe wechseln, eine ausverkaufte Kombination testen und den Artikel danach in den Warenkorb legen, einmal komplett mit Tastatur und einmal mit Screenreader.

Für Shop-Betreiber mit vielen Produktvarianten lohnt es sich, diesen manuellen Test nicht auf einer einzelnen Musterseite zu belassen, sondern stichprobenartig auf mehreren Kategorien zu wiederholen, etwa einem Kleidungsstück mit vielen Größen und einem Konfigurationsprodukt mit mehreren Auswahllisten. Unterschiedliche Varianten-Widgets im selben Shop verhalten sich technisch oft unterschiedlich, auch wenn sie optisch ähnlich aussehen, weil sie häufig von verschiedenen Modulen oder Drittanbieter-Plugins stammen.

Häufig gestellte Fragen