WooCommerce barrierefrei machen: 10 Fixes nach WCAG 2.1 AA
WooCommerce selbst bringt eine ordentliche Grundlage mit, doch die meisten Barrieren entstehen durch Theme, Page-Builder und Plugins. Für das Barrierefreiheitsstärkungsgesetz (BFSG) ist in der Praxis die Norm EN 301 549 und damit WCAG 2.1 Stufe AA der Maßstab. Hier sind die zehn Fixes, die wir in WooCommerce-Shops am häufigsten umsetzen – jeweils mit dem passenden WCAG-Erfolgskriterium.
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.
1. Sichtbaren Tastaturfokus wiederherstellen (2.4.7)
Viele Themes setzen outline: none. Wer mit der Tastatur navigiert, sieht dann nicht, wo er ist. Fix im Child-Theme:
:focus-visible { outline: 3px solid #e07000; outline-offset: 2px; }2. Farbkontraste korrigieren (1.4.3, 1.4.11)
Normaler Text braucht mindestens 4,5:1, großer Text 3:1, Bedienelemente 3:1. Häufig betroffen: Streichpreise, Platzhaltertext in Feldern, Buttons in Markenfarbe, Hinweise wie „Nur noch 2 auf Lager“. Prüfen Sie mit einem Kontrastrechner und passen Sie die Farbvariablen des Themes an.
3. Alternativtexte für Produktbilder (1.1.1)
In der WordPress-Mediathek gibt es pro Bild das Feld „Alternativer Text“. Beschreiben Sie, was für die Kaufentscheidung wichtig ist („Sneaker in Weiß, seitliche Ansicht mit grüner Sohle“). Rein dekorative Grafiken erhalten ein leeres alt="".
4. Icon-Buttons beschriften (4.1.2)
Warenkorb-Icon, Suche, Merkliste, Mengen-Plus/-Minus: Ohne Text kündigt ein Screenreader nur „Schaltfläche“ an. Fix:
<button aria-label="Menge erhöhen">+</button>5. Formularfelder richtig beschriften (1.3.1, 3.3.2)
Checkout-Felder brauchen sichtbare, per <label for> verknüpfte Beschriftungen. Platzhalter allein reichen nicht. Prüfen Sie besonders Felder, die Plugins hinzufügen (z. B. Lieferdatum, Geschenkoptionen). Ergänzen Sie autocomplete-Attribute für Name, Adresse und E-Mail (1.3.5).
6. Fehlermeldungen verständlich machen (3.3.1, 3.3.3)
Eine rot umrandete Box genügt nicht. Fehler müssen im Text benannt werden („Bitte geben Sie eine gültige Postleitzahl ein“) und für Screenreader erreichbar sein. WooCommerce gibt Checkout-Fehler in einer Hinweisliste aus – achten Sie darauf, dass Ihr Theme diese nicht verbirgt und der Fokus dorthin springt.
7. Statusmeldungen ansagen (4.1.3)
Wird ein Produkt per AJAX in den Warenkorb gelegt, bekommen blinde Nutzer das oft nicht mit. Eine Live-Region löst das:
<div role="status" aria-live="polite">Produkt wurde in den Warenkorb gelegt.</div>8. Menüs, Filter und Mini-Cart tastaturbedienbar machen (2.1.1, 2.1.2)
Dropdown-Menüs, die nur bei Mausberührung öffnen, Filter-Slider ohne Tastatursteuerung und Off-Canvas-Warenkörbe ohne Fokusführung sind klassische Probleme. Ziel: Alles mit Tab/Enter/Leertaste erreichbar, Escape schließt Overlays, der Fokus bleibt im geöffneten Dialog und kehrt danach zurück.
9. Überschriften und Landmarks ordnen (1.3.1, 2.4.6)
Eine H1 pro Seite (auf Produktseiten der Produktname), danach logisch H2/H3. Page-Builder setzen Überschriften gern nur nach Optik. Ergänzen Sie einen Skip-Link und nutzen Sie <header>, <nav>, <main> und <footer>.
10. Zoom und kleine Bildschirme (1.4.4, 1.4.10)
Der Shop muss bei 200 % Textvergrößerung und bei 320 px Breite ohne Inhaltsverlust nutzbar sein. Entfernen Sie maximum-scale=1 oder user-scalable=no aus dem Viewport-Tag und testen Sie Produkttabellen und Warenkorb auf schmalen Bildschirmen.
Plugins und Overlays
Prüfen Sie Cookie-Banner, Slider, Bewertungs- und Chat-Plugins einzeln – sie verursachen oft mehr Barrieren als das Theme. Ein Accessibility-Overlay behebt diese Ursachen nicht; mehr dazu in Warum Overlay-Widgets das BFSG nicht lösen.
So prüfen Sie das Ergebnis
Kombinieren Sie ein automatisches Tool (axe DevTools, WAVE, Lighthouse) mit einem manuellen Tastaturtest und einem kurzen Screenreader-Test (NVDA oder VoiceOver). Automatische Tests erkennen erfahrungsgemäß nur einen Teil der Probleme. Vergessen Sie nicht die Barrierefreiheitserklärung – eine Vorlage finden Sie hier. Einen Überblick über alle Pflichten liefert die BFSG-Checkliste, die sinngemäß auch für WooCommerce gilt.
Quellen
- WCAG 2.1 (W3C-Empfehlung)
- W3C: How to Meet WCAG (Quick Reference)
- WooCommerce: Accessibility
- BFSG (gesetze-im-internet.de)
Häufige Fragen
Ist WooCommerce von Haus aus barrierefrei?
WooCommerce bietet eine ordentliche Grundlage, aber Theme, Page-Builder und Plugins bestimmen, wie barrierefrei der fertige Shop ist. Eine Prüfung des konkreten Shops ist nötig.
Welche WCAG-Stufe ist für das BFSG relevant?
In der Praxis WCAG 2.1 Stufe AA, über die harmonisierte Norm EN 301 549.
Reicht ein Barrierefreiheits-Plugin?
Plugins können einzelne Aufgaben erleichtern, ersetzen aber keine Korrekturen an Theme, Inhalten und Formularen. Overlay-Widgets beheben die Ursachen im Code in der Regel nicht.
Wie lange dauert es, die 10 Fixes umzusetzen?
Das hängt vom Theme und den Plugins ab. Viele Punkte wie Fokus, Kontraste und Beschriftungen lassen sich oft in wenigen Stunden bis Tagen umsetzen.