Barrierefreier Checkout: 7 häufige Fehler
Kurz gesagt
Der Checkout ist der komplianzkritischste Teil eines Shops und zugleich der fehleranfälligste. Die sieben häufigsten Barrieren: Formularfelder ohne echtes Label, Fehlermeldungen nur über Farbe, nicht tastaturbedienbare Bedienelemente, unsichtbarer oder unlogischer Fokus, zu kleine Klickziele, unzugängliche Captchas oder Logins und dynamische Updates, die nicht angekündigt werden. Jede davon lässt sich im Quellcode beheben.
Warum gerade der Checkout kritisch ist
Der Checkout ist umsatzkritisch, formularlastig und mehrstufig — also genau dort, wo Barrierefreiheits-Fehler einen Kauf komplett verhindern. Nach dem BFSG fällt der Bestellvorgang im elektronischen Geschäftsverkehr klar in den Anwendungsbereich (siehe „BFSG: Wer ist betroffen?“). Eine Barriere ist hier nicht kosmetisch — sie kann den Verkauf abbrechen.
1. Formularfelder ohne echtes Label
Felder, die nur einen Platzhalter (Placeholder) statt eines Labels haben, verlieren ihre Beschriftung, sobald man tippt — und Screenreader kündigen sie nicht zuverlässig an. Fix: Jedes Feld bekommt ein sichtbares, programmatisch verknüpftes <label>. Ein Platzhalter ist kein Label (1.3.1, 3.3.2).
2. Fehlermeldungen nur über Farbe
Ein rot umrandetes Feld allein sagt Screenreader-Nutzern und Menschen mit Farbfehlsichtigkeit nichts. Fix: Fehler als Text ausgeben, mit dem Feld verknüpfen (z. B. per aria-describedby), einen Korrekturhinweis geben und die Meldung ankündigen — nicht über Farbe allein (1.4.1, 3.3.1, 3.3.3).
3. Bedienelemente sind nicht tastaturbedienbar
Eigene Dropdowns, Datumsauswahlen, Mengensteller oder eingebettete Zahlungs-Widgets, die nur mit der Maus funktionieren, sperren Tastaturnutzer aus. Fix: native Bedienelemente verwenden oder eigene Komponenten mit korrektem ARIA und vollständiger Tastaturbedienung ausstatten — und den gesamten Ablauf mit Tab, Enter und Escape durchspielen (2.1.1).
4. Fokus ist unsichtbar oder unlogisch
Ohne sichtbaren Fokusindikator weiß man nicht, wo man ist; springt der Fokus zwischen den Schritten unlogisch oder wird bei einem Dialog nicht geführt, verliert man den Faden. Fix: deutlich sichtbarer Fokus, logische Fokusreihenfolge, Fokus bei Schritt- und Dialogwechseln gezielt setzen und zurückgeben (2.4.3, 2.4.7, 2.4.11).
5. Zu kleine Klickziele
Winzige Mengen-Buttons, Checkboxen oder „Entfernen“-Icons sind für Menschen mit motorischen Einschränkungen oder am Touchscreen kaum zu treffen. Fix: interaktive Ziele mindestens 24×24 CSS-Pixel groß machen oder ausreichend Abstand lassen (2.5.8, neu in WCAG 2.2).
6. Captcha oder Login als unüberwindbare Hürde
Ein Bild-Captcha ohne Alternative, ein Login, der einen kognitiven Test verlangt, oder Felder, die Einfügen und Passwort-Manager blockieren, schließen Nutzer aus. Fix: zugängliche Authentifizierung — Einfügen und Passwort-Manager erlauben, nicht-kognitive Alternativen anbieten (3.3.8, neu in WCAG 2.2).
7. Dynamische Updates werden nicht angekündigt
Wenn sich Zwischensumme, Versandkosten oder ein eingelöster Gutschein still aktualisieren, bemerken Screenreader-Nutzer die Änderung nicht. Fix: solche Statusänderungen über aria-live-Bereiche ankündigen, ohne den Fokus zu verschieben (4.1.3).
So prüfen Sie Ihren Checkout
Legen Sie die Maus beiseite und schließen Sie einen Kauf komplett mit der Tastatur ab; wiederholen Sie es anschließend mit einem Screenreader. Als Prüfraster dient WCAG 2.2 AA — die Punkte listet die „WCAG 2.2 AA Checkliste“. Weil der Checkout hinter Schritten und teils hinter einem Login liegt, ist er genau der komplianzkritische Ablauf, den ein Audit End-to-End abdecken muss — mehr dazu in „Was kostet ein Accessibility-Audit?“.
Häufige Fragen
- Warum ist der Checkout für die BFSG-Konformität so wichtig?
- Weil das Bestellen ein zentraler B2C-Dienst im elektronischen Geschäftsverkehr ist, der klar in den Anwendungsbereich fällt, und weil es der Ablauf ist, den ein Kunde abschließen muss, um zu kaufen. Eine Barriere hier schließt Nutzer unmittelbar aus und fällt in einem Audit besonders auf.
- Reicht ein Platzhalter als Label für Formularfelder?
- Nein. Ein Platzhalter verschwindet bei der Eingabe und ist kein zuverlässiges, programmatisch verknüpftes Label. Jedes Feld braucht ein echtes, verknüpftes <label>.
- Wie teste ich, ob mein Checkout tastaturbedienbar ist?
- Legen Sie die Maus weg und schließen Sie den gesamten Kauf nur mit Tab, Shift+Tab, Enter und Escape ab. Wenn Sie ein Bedienelement nicht erreichen oder bedienen können oder den Fokus verlieren, ist das eine Barriere.
Kostenlosen Scan anfragen
Sagen Sie uns Ihre Domain — wir führen einen kostenlosen Erst-Scan durch und zeigen Ihnen die wichtigsten Barrieren.