Barrierefreiheit in WooCommerce: die acht häufigsten Fehler

Was wir in WooCommerce-Shops immer wieder finden — und ob es ein Theme-, Plugin- oder Redaktionsproblem ist.

Die meisten dieser Punkte stammen nicht von WooCommerce selbst, sondern von Themes und Plugins, die darüber liegen. Das ist die gute Nachricht: Man kann sie beheben, ohne den Shop umzubauen.

1. Verkaufs-Badges als Bild

Rabatt- und „Sale"-Hinweise sind in vielen Themes reine Grafiken ohne Alternativtext. Screenreader sagen dann nur „Bild" — der Preisvorteil bleibt unsichtbar. Lösung: Badge als Text mit CSS statt als Bild, oder ein aussagekräftiger alt-Text.

2. Platzhalter statt Label im Checkout

WooCommerce-Blocks und viele Checkout-Plugins setzen den Feldnamen als Platzhalter. Beim Tippen verschwindet er, und Screenreader-Nutzer verlieren die Feldbeschreibung. Ein sichtbares <label> oder aria-label behebt das.

3. Fehlermeldungen ohne Feldbezug

Der Hinweis „Pflichtfeld" erscheint oben im Formular, aber nicht am Feld. Kunden mit Sehbehinderung wissen nicht, welches Feld gemeint ist. Richtig ist eine Meldung am Feld plus aria-describedby.

4. Mengen-Stepper zu klein

Plus/Minus im Warenkorb liegen oft bei 20 × 20 Pixeln. WCAG 2.2 verlangt 24 × 24. Ein min-width/min-height plus Innenabstand im Theme reicht.

5. Fokus-Styles von Plugins entfernt

Slider-, Popup- und Cookie-Plugins setzen häufig outline: none. Tastaturnutzer sehen dann nicht, wo sie sind. Ein zentraler :focus-visible-Stil im Child-Theme überschreibt das.

6. Sortier- und Filter-Dropdowns ohne Namen

Select-Felder für Sortierung oder Filter haben oft kein Label, nur den ersten Eintrag als „Beschriftung". Screenreader lesen dann nur „Auswahlfeld".

7. Galerie ohne Alternativtexte

In der Produktgalerie steht häufig der Dateiname im alt oder gar nichts. Beim Upload lässt sich der Alternativtext in der Mediathek setzen — als Redaktionsregel, nicht als Einmal-Fix.

8. „Ausverkauft" nicht angekündigt

Der Zustand eines Produkts ändert sich optisch (Farbe, Durchstreichung), aber nicht im zugänglichen Namen. Er sollte im Button-Text oder per aria-live stehen.

Woran man erkennt, ob das Theme oder das Plugin schuld ist

Praktischer Test: Theme auf ein Standard-Theme umschalten (in einer Staging-Kopie) und den Befund erneut prüfen. Bleibt er, kommt er aus einem Plugin oder dem Inhalt. Verschwindet er, liegt es im Theme — und dort lässt er sich meist an einer Stelle zentral lösen, statt in jedem Template.

Prüfen Sie Ihren Shop

Der kostenlose Schnellcheck zeigt die drei wichtigsten Befunde Ihrer Startseite. Der Bericht über bis zu 25 Seiten kostet 49 Euro, mit Tastatur- und Screenreader-Analyse 149 Euro. Für Shopware-Shops gibt es die passende Übersicht hier, und die teuersten Fehler im Checkout stehen in diesem Beitrag.

Shop kostenlos prüfen Beispielbericht ansehen

Automatisierter Check. Keine Rechtsberatung, keine Zusicherung der BFSG-Konformität.