Warenkorb und Mini-Cart barrierefrei im Online-Shop: Der uebersehene Conversion-Hebel

Viele Shop-Teams investieren in Produktseiten und Checkout, aber uebersehen den Warenkorb selbst. Genau dort sitzen Drawer, Mengenfelder, Gutscheinboxen und Zwischensummen, die per Tastatur, Screenreader oder Mobilgeraet oft schlecht bedienbar sind.

Warum gerade Mini-Carts problematisch sind

Mini-Carts werden oft als Animation, Side-Drawer oder Overlay umgesetzt. Wenn Fokusmanagement, Lesereihenfolge und Schliessen-Funktion nicht stimmen, verlieren Nutzer sofort die Orientierung. Der Warenkorb wird dann vom Zwischenschritt zum Abbruchgrund.

Die haeufigsten Fehler im Warenkorb

• Drawer ohne Fokusfalle: Die Tastatur springt hinter das Overlay.
• Schliessen-Button ohne Beschriftung: Screenreader melden nur einen unklaren Button.
• Mengensteuerung als Minus/Plus ohne Kontext: Nutzer verstehen nicht, welches Produkt geaendert wird.
• Zwischensumme erst nach Scroll sichtbar: Mobil fehlt die Orientierung ueber den aktuellen Kaufwert.
• CTA zur Kasse im Sticky-Bereich verdeckt: Cookie-Banner oder Chat-Buttons blockieren den wichtigsten Schritt.

Die 5 wichtigsten Pruefbereiche

1. Fokus sauber in den Drawer setzen

Oeffnet sich der Warenkorb als Overlay, muss der Fokus sofort in den Warenkorb springen und nach dem Schliessen logisch zurueckkehren. Alles andere fuehlt sich fuer Tastaturnutzer kaputt an.

2. Mengen und Entfernen eindeutig beschriften

Ein Button "Plus" reicht nicht. Besser ist "Menge fuer Produkt X erhoehen". Sonst weiss ein Screenreader-Nutzer nicht, welche Position geaendert wird.

3. Preise, Versand und Summen lesbar halten

Zwischensumme, Versandhinweis und Rabatt muessen kontrastreich und ohne Akkordeon-Versteckspiel lesbar sein. Unsicherheit an dieser Stelle bremst den Kauf.

4. Gutschein und Hinweise nicht verstecken

Wenn Gutscheinfelder oder Lieferinfos in schlecht bedienbaren Akkordeons liegen, erzeugt das Rueckfragen und Abbrueche. Wichtige Kontextinfos gehoeren sichtbar oder sauber beschriftet aufklappbar in den Warenkorb.

5. CTA zur Kasse immer erreichbar halten

Der naechste Schritt muss klar benoetigt, sichtbar fokussierbar und auf Mobilgeraeten nicht verdeckt sein. Genau dieser Button entscheidet, ob der Warenkorb ein Kaufpfad oder eine Sackgasse ist.

WCAG-Hotspots im Warenkorb

• 2.1.1 Keyboard: Drawer, Mengenwahl und Close-Funktion sind nicht vollstaendig per Tastatur erreichbar.
• 2.4.3 Focus Order: Die Fokus-Reihenfolge springt unlogisch ueber das Overlay hinaus.
• 2.4.7 Focus Visible: Der Fokus auf CTA und Icon-Buttons ist kaum sichtbar.
• 4.1.2 Name, Role, Value: Custom-Controls fuer Mengen oder Delete-Aktionen sind technisch nicht sauber ausgezeichnet.

Ein schneller Warenkorb-Test

1. Produkt in den Warenkorb legen und den gesamten Drawer nur mit Tastatur bedienen.
2. Menge aendern, Produkt entfernen und Gutscheinfeld oeffnen.
3. Warenkorb bei 200 Prozent Zoom und auf dem Smartphone pruefen.
4. Screenreader oder Browser-Vorlesefunktion kurz gegen den Drawer laufen lassen.
5. Startseite und Warenkorb-Einstieg mit dem kostenlosen BFSG-Scanner vorpruefen.

Quick Wins fuer diese Woche

Wenn Sie sofort Wirkung wollen, priorisieren Sie eine saubere Fokusfalle im Drawer, aussagekraeftige Mengen-Labels und einen klar sichtbaren Kassen-CTA. Diese drei Punkte entschärfen viele Kaufabbrueche sofort.