WooCommerce
Barrierefreiheit in WooCommerce: wo das Problem wirklich sitzt
WooCommerce hat etwas Seltenes in dieser Branche: Das Projekt veröffentlicht seine eigene Position zur Barrierefreiheit und erklärt, das Frontend des Kern-Plugins sei „im Wesentlichen konform“ mit WCAG 2.2 AA. Das sagt sonst kaum jemand. Der Haken: Ein WooCommerce-Shop ist nicht nur das Plugin, sondern ein Theme, zehn bis dreißig Plugins und ein Zahlungsanbieter. Genau dort bricht es.
Der WooCommerce-Kern ist selten das Problem. Es sind Hinweise, die nie angesagt werden, Variantenauswahlen ohne Beschriftung, Filter-Plugins, die die Tastatur nicht erreicht, und Checkout-Felder, die Fehler nur mit rotem Rahmen anzeigen. Fast alles lässt sich mit Hooks und überschriebenen Templates beheben, ohne den Kern anzufassen.
Was WooCommerce liefert und was Sie liefern
Was WooCommerce liefert: Das Projekt erklärt, das Frontend des Kern-Plugins sei im Wesentlichen konform mit WCAG 2.2 Stufe AA, und räumt Lücken im Adminbereich offen ein. Eine ehrliche und seltene Aussage.
Was Sie liefern: das Theme — und zwischen einem „accessibility-ready“ Theme und einem vom Template-Marktplatz liegen Welten. Die Plugins für Filter, Popups und Bewertungen. Den Zahlungsanbieter, oft ein Fremd-iframe, dessen Barrierefreiheit Sie nicht steuern. Und die Inhalte: klare Produkttitel, Alternativtexte, Fehlermeldungen, die sagen, was zu korrigieren ist.
Praktische Folge: Wenn Ihr Shop nicht konform ist, liegt die Arbeit fast nie im Kern, sondern an vier oder fünf konkreten Stellen Ihrer Installation.
Die sieben Barrieren, die fast immer auftauchen
| Komponente | Was hakt | WCAG | Die Behebung |
|---|---|---|---|
Hinweise und Fehlerwoocommerce-message / error | „In den Warenkorb gelegt“ und Fehlermeldungen werden Screenreader-Nutzenden nie angesagt. | 4.1.3 | Per Filter in einen Bereich mit role="alert" oder aria-live einfassen. |
Variantenauswahlvariable.php (variaciones) | Die Auswahllisten für Größe und Farbe kommen ohne zugeordnete Beschriftung. | 1.3.1 · 3.3.2 | Jedes select im überschriebenen Template mit seinem label for verbinden. |
In den Warenkorb per AJAXadd-to-cart AJAX | Der Warenkorb aktualisiert sich lautlos: sichtbar ändert er sich, für einen Screenreader passiert nichts. | 4.1.3 | Den aktualisierten Container mit aria-live="polite" auszeichnen. |
Facettenfilterfiltros por facetas (plugin) | Filter-Plugins bauen oft Pseudo-Checkboxen, die die Tastatur nicht erreicht. | 2.1.1 · 2.4.7 | Native Bedienelemente nutzen oder den eigenen Rolle, Zustand und sichtbaren Fokus geben. |
Checkout-Felderform-checkout.php | Fehler nur farblich markiert, Felder ohne zugeordnete Beschreibung. | 3.3.1 · 3.3.2 | Ausdrücklicher Fehlertext und aria-describedby an Feldern mit Hinweis. |
Zahlungsanbieterpasarela de pago externa | Das iframe des Anbieters kann unzugänglich sein und ist von Ihrer Seite aus nicht zu reparieren. | 4.1.2 | Eine echte Zahlung mit der Tastatur testen und bei Scheitern den Anbieter wechseln oder ihn in die Pflicht nehmen. |
Das Themetema (Storefront u otro) | Niedriger Kontrast und unsichtbarer Fokus: der häufigste Mangel in Marktplatz-Templates. | 1.4.3 · 2.4.7 | Ein „accessibility-ready“ Theme wählen oder Kontrast und Fokus im Child-Theme korrigieren. |
Die Behebungen kommen als Hooks in die functions.php des Child-Themes oder als überschriebene Templates unter woocommerce/. Nie durch Bearbeiten des Kerns: das wäre beim nächsten Update weg.
Warum das Barrierefreiheits-Plugin das nicht löst
Im WordPress-Verzeichnis versprechen Plugins Konformität hinter einem Häkchen. Sie ergänzen eine Leiste mit hohem Kontrast und Schriftgröße. Sie beheben weder einen Hinweis, der nicht angesagt wird, noch einen Filter, den die Tastatur nicht bedienen kann, noch ein Checkout-Feld ohne Beschriftung.
Dazu kommt ein WordPress-eigenes Problem: Jedes Plugin fügt eigenes HTML im Frontend ein, sodass ein Plugin, das „Barrierefreiheit repariert“, oft mit dem kollidiert, was ein anderes gerade erzeugt hat. Der Weg, der funktioniert, ist der langweilige: Theme sorgfältig wählen, HTML-erzeugende Plugins prüfen und mit Hooks korrigieren.
Prüfen Sie Ihren Shop in zehn Minuten, ganz ohne Werkzeuge
- Legen Sie die Maus weg. Von der Startseite zu einem variablen Produkt, Größe und Farbe wählen, in den Warenkorb legen und bis zum Checkout — mit Tab, Umschalt+Tab, Enter und den Pfeiltasten.
- In den Warenkorb legen und hinhören. Bei AJAX prüfen, ob der Hinweis „in den Warenkorb gelegt“ in einem
aria-live-Bereich steht. - Checkout mit einem absichtlich leeren Feld absenden. Der Fehler muss sagen, welches Feld fehlt — nicht nur den Rahmen rot färben.
- Filter mit der Tastatur bedienen. Hier scheitern die meisten Plugins.
- Auf 200 % zoomen und prüfen, ob die Warenkorbtabelle nutzbar bleibt.
Möchten Sie die vollständige Liste für Ihren Shop?
Der kostenlose Scan gibt Ihnen in wenigen Minuten eine erste Karte der Barrieren Ihres Shops: ohne Konto, ohne Karte, ohne Verpflichtung.