WooCommerce barrierefrei machen: Die 8 häufigsten Fehler im Checkout und wie Sie sie beheben

Viele Shop-Betreiber denken bei Barrierefreiheit zuerst an Schriftgrößen und Farben. Die meisten echten Barrieren stecken aber woanders: im Warenkorb und im Checkout. Genau dort, wo aus einem Besuch ein Kauf werden soll.

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Online-Shops, die an Verbraucher verkaufen. Maßstab ist in der Praxis die WCAG 2.1 in Stufe AA. In diesem Artikel zeige ich Ihnen die acht Fehler, die ich in WooCommerce-Shops am häufigsten sehe, welches WCAG-Kriterium jeweils betroffen ist und wie Sie sie beheben.

Ein barrierefreier Checkout hilft nicht nur blinden Menschen mit Screenreader. Er hilft auch Menschen, die nur mit der Tastatur arbeiten, die eine Bildschirmlupe nutzen, die schlecht sehen oder sich schwer konzentrieren können. Und er hilft allen, die gerade mit einer Hand am Smartphone bestellen. Jeder abgebrochene Kauf ist verlorener Umsatz.

Das Problem: Ein Kunde vergisst die Postleitzahl und klickt auf „Zahlungspflichtig bestellen“. WooCommerce zeigt oben eine rote Liste mit Fehlern an. Wer einen Screenreader nutzt, bekommt davon oft nichts mit und weiß nicht, welches Feld betroffen ist.

WCAG: 3.3.1 Fehlererkennung, 3.3.3 Fehlerempfehlung

Die Lösung: Fehler werden direkt am Feld angezeigt, das Feld wird als fehlerhaft markiert (aria-invalid="true") und mit der Meldung verknüpft (aria-describedby). Noch besser: Die Meldung erscheint schon beim Verlassen des Feldes und nicht erst nach dem Absenden.

Das Problem: Ändert ein Kunde die Versandart oder löst einen Gutschein ein, aktualisiert WooCommerce Versandkosten und Gesamtsumme. Sehende Kunden merken das. Screenreader-Nutzer hören nichts und bestellen womöglich zu einem anderen Preis als gedacht.

WCAG: 4.1.3 Statusmeldungen

Die Lösung: Eine sogenannte Live-Region (aria-live) sagt Änderungen an, zum Beispiel: „Warenkorb aktualisiert. Gesamtsumme 49,90 Euro.“

Das Problem: Nach jeder Aktualisierung lädt WooCommerce Teile der Seite neu. Wer mit der Tastatur arbeitet, landet danach plötzlich am Seitenanfang und muss sich erneut bis zur richtigen Stelle durchtabben.

WCAG: 2.4.3 Fokus-Reihenfolge, 2.1.1 Tastatur

Die Lösung: Vor der Aktualisierung merkt sich der Shop, welches Element den Fokus hatte, und setzt ihn danach wieder dorthin.

Das Problem: Die Auswahl für Versand und Zahlung besteht aus Radiobuttons. Fehlt die Gruppierung, hört ein Screenreader-Nutzer nur „PayPal, Optionsfeld“ und weiß nicht, worum es eigentlich geht.

WCAG: 1.3.1 Info und Beziehungen

Die Lösung: Die Optionen werden als Gruppe ausgezeichnet, mit fieldset und legend oder mit role="radiogroup" und einer Beschriftung wie „Zahlungsart“.

Das Problem: Im Warenkorb gibt es für jedes Produkt ein Mengenfeld. Für den Screenreader heißen alle gleich, oft einfach nur „Menge“. Bei fünf Produkten ist nicht klar, welches Feld zu welchem Artikel gehört.

WCAG: 4.1.2 Name, Rolle, Wert und 2.4.6 Überschriften und Beschriftungen

Die Lösung: Jedes Feld bekommt einen eindeutigen Namen, zum Beispiel „Menge für Kaffeebohnen Espresso 500 g“. Dasselbe gilt für „Entfernen“-Links.

Das Problem: In deutschen Shops müssen Kunden meist AGB und Widerrufsbelehrung bestätigen. Diese Checkboxen sind oft nur mit einem roten Sternchen markiert, und das sagt der Screenreader nicht verständlich an.

WCAG: 3.3.2 Beschriftungen oder Anweisungen

Die Lösung: Die Checkbox wird technisch als Pflichtfeld gekennzeichnet (aria-required="true"), und das Sternchen wird im Text erklärt.

Das Problem: Der Browser kann Name, Adresse und E-Mail automatisch ausfüllen. Das funktioniert aber nur, wenn die Felder richtig ausgezeichnet sind. Für Menschen mit motorischen oder kognitiven Einschränkungen ist das eine große Erleichterung.

WCAG: 1.3.5 Bestimmung des Zwecks einer Eingabe

Die Lösung: Jedes Feld erhält das passende autocomplete-Attribut, zum Beispiel given-name, postal-code oder email.

Das Problem: Viele Themes entfernen den Fokusrahmen, weil er „nicht schön aussieht“. Wer mit der Tastatur arbeitet, sieht dann nicht mehr, wo er sich befindet. Dazu kommen hellgraue Hinweistexte auf weißem Grund.

WCAG: 2.4.7 Fokus sichtbar, 1.4.3 Kontrast (Minimum), 1.4.11 Nicht-Text-Kontrast

Die Lösung: Ein gut sichtbarer Fokusrahmen mit ausreichendem Kontrast zum Hintergrund und Texte mit einem Kontrastverhältnis von mindestens 4,5 zu 1.

Viele deutsche Shops nutzen Germanized oder German Market, um rechtliche Anforderungen wie Grundpreise, Lieferzeiten oder die Bestätigung der AGB abzubilden. Diese Plugins verändern den Checkout spürbar: Sie fügen Checkboxen, Hinweistexte und manchmal eine eigene Bestellübersicht hinzu.

Prüfen Sie deshalb immer die Kombination aus Theme, WooCommerce und diesen Plugins. Ein Checkout, der mit dem Standard-Theme barrierefrei ist, kann mit Germanized schon wieder Lücken haben. Besonders oft betroffen sind die Pflicht-Checkboxen aus Fehler 6 und die Fehlermeldungen aus Fehler 1.

Gehen Sie diese Punkte einmal selbst durch. Jedes „Nein“ ist eine Baustelle:

Vielleicht haben Sie schon Plugins gesehen, die eine Toolbar mit Schriftgröße und Kontrastmodus einblenden. Solche Overlays verändern den eigentlichen Code nicht. Die Fehler oben bleiben bestehen, denn Screenreader und Tastatur greifen auf den Code zu, nicht auf die Toolbar. Barrierefreiheit muss im Code umgesetzt werden.

1. Selbst testen: Bestellen Sie einmal komplett nur mit der Tastatur. Kommen Sie ohne Maus bis zur Bestellbestätigung? Testen Sie zusätzlich mit einem Screenreader, zum Beispiel NVDA unter Windows oder VoiceOver auf dem Mac.
2. Die häufigsten Fehler beheben: Für Warenkorb und Checkout habe ich das kostenlose Plugin Checkoutable entwickelt. Es behebt die oben beschriebenen Fehler direkt im Code, ohne Overlay, und jede Korrektur lässt sich einzeln abschalten.
3. Den ganzen Shop prüfen lassen: Warenkorb und Checkout sind nur ein Teil. Produktseiten, Filter, Navigation und Kundenkonto gehören ebenso dazu. Mit dem BFSG-Schnellcheck prüfe ich Ihren Shop zum Festpreis und Sie erhalten eine priorisierte Liste, was zu tun ist.

Die meisten Barrieren im WooCommerce-Checkout lassen sich mit überschaubarem Aufwand beheben. Wer jetzt handelt, verringert das Risiko bei Kontrollen und verkauft gleichzeitig an mehr Kunden.

Ob das BFSG für Ihren Shop gilt, klären Sie bitte mit Ihrer Rechtsberatung. Bei der technischen Umsetzung helfe ich Ihnen gern.