Start › Ratgeber

WooCommerce Checkout barrierefrei: Formulare und Fehlermeldungen richtig umsetzen

Im Checkout schließt die Kundin den Vertrag ab – genau hier greift das BFSG für Dienstleistungen im elektronischen Geschäftsverkehr am deutlichsten. Gleichzeitig ist der Checkout der Ort, an dem Barrieren direkt Umsatz kosten: Wer ein Feld nicht ausfüllen kann, bricht ab. Dieser Artikel konzentriert sich auf Formulare und Fehlermeldungen. Allgemeine Theme-Fixes finden Sie in den 10 WCAG-Fixes für WooCommerce.

Keine Rechtsberatung: Dieser Artikel gibt den Stand unserer Recherche (November 2026) wieder und ersetzt keine Rechtsberatung. Für eine verbindliche Einschätzung Ihres Einzelfalls wenden Sie sich bitte an eine Rechtsanwältin oder einen Rechtsanwalt.

Klassischer Checkout oder Block-Checkout?

WooCommerce bietet den klassischen Shortcode-Checkout und den neueren Checkout-Block. Beide haben grundsätzlich beschriftete Felder. Probleme entstehen meist durch das Theme, durch Feld-Editor-Plugins und durch Zahlungs-Plugins, die eigene Formulare einbetten. Prüfen Sie deshalb immer Ihren tatsächlichen Checkout, nicht die Demo.

1. Jedes Feld braucht ein sichtbares Label

Platzhaltertext („Straße und Hausnummer“) im Feld ist kein Ersatz für ein Label: Er verschwindet beim Tippen und hat oft zu wenig Kontrast (WCAG 3.3.2, 1.3.1). Richtig ist:

<label for="billing_postcode">Postleitzahl <span aria-hidden="true">*</span></label>
<input id="billing_postcode" name="billing_postcode" autocomplete="postal-code" required aria-required="true">

2. Pflichtfelder nicht nur mit Sternchen oder Farbe kennzeichnen

Erklären Sie oben im Formular: „Mit * markierte Felder sind Pflichtfelder.“ Zusätzlich sollte das Feld technisch als Pflichtfeld markiert sein (required), damit Screenreader es ansagen.

3. Autocomplete-Attribute setzen

WCAG 1.3.5 verlangt, dass der Zweck von Feldern mit persönlichen Daten maschinell erkennbar ist. WooCommerce setzt bei Standardfeldern meist autocomplete-Werte wie given-name, email oder street-address. Bei Zusatzfeldern aus Plugins fehlen sie oft. Das hilft nicht nur Menschen mit motorischen oder kognitiven Einschränkungen, sondern beschleunigt den Checkout für alle.

4. Fehlermeldungen im Text, am Feld und angesagt

Die häufigste Barriere: Ein Feld wird nur rot umrandet. WCAG 3.3.1 verlangt, dass der Fehler im Text beschrieben wird, WCAG 3.3.3 empfiehlt einen Korrekturvorschlag. Gut ist:

<input id="billing_email" aria-invalid="true" aria-describedby="err-email">
<p id="err-email">Bitte geben Sie eine E-Mail-Adresse im Format name@beispiel.de ein.</p>

Der klassische WooCommerce-Checkout zeigt Fehler gesammelt oben an. Sorgen Sie dafür, dass der Fokus nach dem Absenden auf diese Fehlerliste springt oder dass sie als Live-Region (role="alert") angesagt wird. Sonst bemerkt ein Screenreader-Nutzer nicht, warum nichts passiert.

5. Zahlungsarten und Versandoptionen als echte Radio-Buttons

Zahlungsarten sind oft als gestylte Kacheln umgesetzt. Prüfen Sie, ob sie mit Pfeiltasten auswählbar sind und die Auswahl angesagt wird. Logos von PayPal oder Klarna brauchen einen Textnamen.

6. Eingebettete Zahlungsformulare (iFrames)

Kreditkartenfelder von Zahlungsanbietern laufen meist in iFrames. Deren Inhalt können Sie selbst kaum ändern. Testen Sie trotzdem mit der Tastatur und dokumentieren Sie bekannte Probleme in Ihrer Barrierefreiheitserklärung. Wenden Sie sich bei Problemen an den Anbieter.

7. AGB-Checkbox und Bestellbutton

Die Checkbox für AGB und Widerruf braucht ein verbundenes Label, die verlinkten Dokumente müssen erreichbar sein. Der Button sollte eindeutig heißen, etwa „Zahlungspflichtig bestellen“, und ausreichend Kontrast haben.

8. Kein Zeitdruck, keine Überraschungen

Wenn Ihr Warenkorb Produkte nach einer Zeit freigibt, informieren Sie vorher und bieten Sie eine Verlängerung an (WCAG 2.2.1). Ändert die Auswahl eines Landes die Felder, sollte das nicht unerwartet den Fokus verschieben (WCAG 3.2.2).

Test in 10 Minuten

1. Einen Testkauf nur mit Tastatur durchführen.
2. Absichtlich ein Feld falsch ausfüllen und absenden: Ist der Fehler ohne Farbe verständlich?
3. Mit NVDA (Windows) oder VoiceOver (Mac) die Fehlermeldung anhören.

Quellen

• WCAG 2.1 (W3C-Empfehlung)
• W3C WAI: Forms Tutorial
• § 2 BFSG – Begriffsbestimmungen (gesetze-im-internet.de)

Häufige Fragen