Mit dem European Accessibility Act (EAA) gelten in der EU seit Juni 2025 verbindliche Vorgaben für die Barrierefreiheit digitaler Produkte und Dienstleistungen – darunter fallen auch Online-Shops. Anbieter müssen sicherstellen, dass Menschen mit Behinderungen Webseiten und Shops uneingeschränkt nutzen können, andernfalls drohen rechtliche Konsequenzen. Noch wichtiger ist: Wer Barrierefreiheit vernachlässigt, schließt Millionen potenzieller Kunden vom Online-Einkauf aus.
WooCommerce, das weltweit über 7 Millionen Websites als E-Commerce-Plattform betreibt, hat daher reagiert und seine Software grundlegend überarbeitet. Pünktlich zur EAA-Frist erreichte WooCommerce umfassende Konformität mit den aktuellen Web Content Accessibility Guidelines (WCAG) 2.2 auf Level AA. Dies bedeutet, dass nun barrierefreie Online-Shops „out of the box“ mit WooCommerce möglich sind – ein Meilenstein für Händler, Entwickler und Kunden gleichermaßen.
WooCommerce barrierefrei dank Amber Hinds und Equalize Digital
Die Barrierefreiheits-Offensive von WooCommerce mündete in der Version 10.0, die im Juli 2025 veröffentlicht wurde. WooCommerce 10.0 ist – in Verbindung mit einem barrierefreien WordPress-Theme – vollständig WCAG 2.2 Level AA konform und teilweise sogar Level AAA konform. Ermöglicht wurde dies durch enge Zusammenarbeit des WooCommerce-Core-Teams mit Accessibility-Experten. Amber Hinds und ihr Team von Equalize Digital spielten dabei eine maßgebliche Rolle. In einem umfassenden Audit identifizierten sie über 140 Barrierefreiheitsprobleme, die gemeinsam mit weiteren Agenturen behoben wurden. Durch diesen umfassenden Prozess wurde WooCommerce zu einem Vorreiter für barrierefreie E-Commerce-Plattformen.
Wichtige Verbesserungen im WooCommerce-Frontend
Die Accessibility-Optimierungen in WooCommerce betreffen vielfältige Bereiche der Shop-Oberfläche. Hier ein ausführlicher Überblick der wichtigsten in den letzten Monaten umgesetzten Verbesserungen:
- Modale Dialoge: Alle modalen Dialoge (z.B. Popups) sind nun vollständig zugänglich – der Tastaturfokus wird korrekt eingeschränkt und zurückgegeben, und Aktionen werden Screenreadern sinnvoll angekündigt
- Formulare: Sämtliche Formulareingabefelder (etwa im Checkout, Login und Kundenkonto) sind mit eindeutigen Beschriftungen versehen, und Fehlermeldungen werden klar zugeordnet sowie verständlich ausgegeben
- Dynamische Updates: Wichtige Vorgänge wie Warenkorb-Änderungen, Produktvarianten-Auswahl oder das Abschicken von Formularen lösen jetzt Live-Ansagen via ARIA-Live-Regions aus. So werden Nutzer:innen mit Screenreader sofort über Veränderungen oder Feedback informiert
- Klare Beschriftungen bei Bedienelementen:Alle interaktiven Elemente (Buttons, Tabs, Accordion-Menüs etc.) verfügen über aussagekräftige ARIA-Rollen und Labels. Zuvor fehlende oder mehrdeutige Beschriftungen – etwa unbenannte Buttons – wurden behoben
- Strukturierte Überschriften: Die Überschriften-Hierarchie und Seiteneinteilung (Landmarks) in WooCommerce wurden bereinigt. Überschriften folgen nun einer logischen Reihenfolge (H1, H2, H3, …) über Shopseiten wie Produktdetail, Warenkorb, Kasse bis zum Konto-Bereich, was die Navigation für Screenreader-Nutzer erheblich verbessert
- Kontrast und Design: Zahlreiche Probleme mit zu geringem Farbkontrast wurden korrigiert. Texte, Symbole und Bedienelemente erfüllen nun die WCAG 2.2 AA-Kontrastanforderungen (mind. 4,5:1), wodurch Inhalte auch für sehbehinderte oder farbfehlsichtige Menschen besser erkennbar sind
- Tastatur-Navigation:Die Bedienung des Shops mit der Tastatur wurde deutlich verbessert. Komplexe Komponenten wie Produktfilter, Bewertungssektionen oder der Mini-Warenkorb sind nun ohne Maus nutzbar, ohne Tastaturfallen, und der Fokus springt in logischer Reihenfolge durch alle Elemente
Diese High-Level-Änderungen bedeuten in der Praxis einen großen Sprung nach vorn. Händler können nun darauf vertrauen, dass WooCommerce ihnen eine gute Grundlage für einen barrierefreien Shop liefert. Viele Probleme, die früher separate Anpassungen erfordert hätten, sind im Standard bereits gelöst.
Insgesamt wurden über 140 Verbesserungen im Bereich Barrierefreiheit umgesetzt. Hier die vollständige Liste aller WooCommerce Verbesserungen im Bereich Barrierefreiheit.
WooCommerce-Shop barrierefrei gestalten: Detaillierte Tipps für Betreiber:innen
Trotz der Verbesserungen in WooCommerce-Core müssen Shop-Betreiber:innen weiterhin einiges tun, um einen vollständig barrierefreien Onlineshop zu gewährleisten.
Falls sie hierbei professionelle Unterstützung suchen, könnte unser Barrierefreiheit Praxis-Paket genau das Richtige für sie sein.
Zunächst sollte der WooCommerce-Shop natürlich auf die neueste Version aktualisiert werden, um von den genannten Fixes zu profitieren. Darüber hinaus sind folgende Maßnahmen zu empfehlen, um WCAG 2.2 / EAA-Konformität (und darüber hinaus eine gute User Experience für alle) sicherzustellen:
1. Regelmäßige Updates
Aktualisiere WooCommerce und alle Erweiterungen regelmäßig, um von den neuesten Barrierefreiheitsoptimierungen zu profitieren.
2. Wahl eines barrierefreien Themes
Nutzen Sie ein aktuelles, responsives WordPress-Theme, das als accessible ausgewiesen ist (barrierefrei bereit). Das Theme sollte semantisch sauberes HTML ausgeben und keine neuen Barrieren einführen. Achten Sie darauf, nicht auf veraltete Templates zurückzugreifen, die WCAG-Vorgaben evtl. nicht erfüllen.
3. Ausreichende Farbkontraste
Stellen Sie im Design Ihres Shops ausreichende Kontraste sicher – Texte und Bedienelemente sollten mindestens einen Kontrast von 4,5:1 zum Hintergrund aufweisen. Prüfen Sie Farbschemata, Buttons, Links etc. darauf, dass sie auch von Personen mit Sehbehinderungen gut erkannt werden können.
4. Inhalte klar und verständlich gestalten
Verwenden Sie klare, präzise Produktnamen und Beschreibungen, statt blumiger oder technischer Bezeichnungen. tellen Sie bei allen Bildern und Grafiken aussagekräftige Alternativtexte (alt-Texte) bereit, die den Inhalt oder Zweck des Bildes beschreiben. So können auch Screenreader-Nutzer oder Menschen mit abgeschalteten Bildern alle Informationen erfassen.
5. Klare Formulare
orgen Sie dafür, dass alle Formularfelder – vom Suchfeld bis zur Adresseingabe an der Kasse – mit sichtbaren Labels oder ARIA-Labels versehen sind. Versteckte oder fehlende Feldbeschriftungen führen dazu, dass Nutzer:innen mit Screenreader nicht wissen, welche Eingabe erwartet wird. Ebenso wichtig: Hilfreiche Fehlermeldungen. Formulare sollten bei falschen Eingaben deutlich erklären, was schiefging und wie es korrigiert werden kann (z.B. „Bitte geben Sie eine gültige Postleitzahl ein“ statt nur „Ungültig!“)
6. Strukturierte Überschriften und Navigation
Achten Sie im Seitenaufbau auf eine logische Überschriften-Hierarchie (eine Hauptüberschrift H1, darunter sinnvolle Unterüberschriften H2, H3 etc.). Eine konsistente Seitenstruktur mit Regions-/Landmark-Markup (z.B. header, main, footer) hilft Nutzern von assistiven Technologien, sich zurechtzufinden. Verwenden Sie klare Linktexte, die auch aus dem Kontext heraus verständlich sind (keine rein generischen Links wie „Mehr lesen“).
7. Regelmäßige Accessibility-Tests
Achten Sie im Seitenaufbau auf eine logische Überschriften-Hierarchie (eine Hauptüberschrift H1, darunter sinnvolle Unterüberschriften H2, H3 etc.). Eine konsistente Seitenstruktur mit Regions-/Landmark-Markup (z.B. header, main, footer) hilft Nutzern von assistiven Technologien, sich zurechtzufinden. Verwenden Sie klare Linktexte, die auch aus dem Kontext heraus verständlich sind (keine rein generischen Links wie „Mehr lesen“). So entdecken Sie schnell, ob irgendwo Elemente nicht fokussierbar sind, Beschriftungen fehlen oder Dynamiken nicht angekündigt werden.
Führen Sie zusätzlich manuelle Tests mit Screenreadern wie NVDA oder VoiceOver sowie automatische Checks (z.B. mit WAVE) durch.
8. Automatische Tests & professionelle Audits
Nutzen Sie ergänzend automatisierte Prüf-Tools, um gängige Probleme aufzudecken. Ein Beispiel ist der WAVE Accessibility Checker, der als Browser-Tool grundlegende WCAG-Probleme aufzeigt.
Solche Tools ersetzen kein manuelles Testing, können aber erste Hinweise geben. Für eine umfassende und professionelle Analyse empfiehlt sich ein vollständiges WCAG-Audit. Alternativ können wir auch gerne unseren Accessibility Quick-Check durchführen, um einen ersten Überblick über den Status der Barrierefeiheit ihres Shops zu schaffen.
9. Plugins & Erweiterungen prüfen
Installieren Sie möglichst offizielle WooCommerce-Erweiterungen, da diese vom WooCommerce-Team auf Barrierefreiheit überprüft und verbessert werden (siehe Ausblick unten). Bei Plugins von Drittanbietern ist Vorsicht geboten: Nicht alle externen Entwickler halten die Woo-Standards ein.
Testen Sie daher jedes Drittanbieter-Plugin auf seine Bedienbarkeit (insbesondere wenn es wichtige Shop-Funktionen wie Produktoptionen, Galerien o.ä. liefert). Im Zweifel fragen Sie beim Plugin-Anbieter nach einer WCAG-Konformitätserklärung oder wählen eine barrierefreie Alternative.
WooCommerce übertrifft Mindestanforderungen
WooCommerce begnügt sich nicht damit, gerade so die Pflichtkriterien zu erfüllen – in vielen Bereichen geht die Plattform bewusst über die WCAG 2.2 AA-Anforderungen hinaus. So wurden, wo immer möglich, sogar WCAG 2.2 AAA-Erfolgskriterien berücksichtigt, um die Zugänglichkeit weiter zu verbessern. Dieses Vorgehen bringt einen Mehrwert für alle Nutzer:innen, nicht nur für Menschen mit Behinderungen. Ein Beispiel: Die umfangreichen Verbesserungen bei Fokussteuerung, Formular-Feedback und semantischer Auszeichnung sorgen generell für eine klarere, konsistentere Benutzerführung im Shop, wovon auch Nutzer:innen ohne Behinderung profitieren (Stichwort Usability). WooCommerce selbst betont, dass Barrierefreiheit ein grundlegender Bestandteil einer guten User Experience ist – letztlich gewinnt jeder: Kunden erhalten ein besseres Einkaufserlebnis, Händler erreichen ein größeres Publikum
Eine offizielle Accessibility-Seite stellt detaillierte Ressourcen zur Verfügung.
Weitere geplante Schritte
Die Arbeit an WooCommerce ist in puncto Accessibility noch nicht abgeschlossen – und wird es eigentlich nie sein, denn Barrierefreiheit versteht sich als fortlaufender Prozess. Nach dem Core-Plugin nimmt sich WooCommerce nun die offiziellen Erweiterungs-Plugins (Extensions) vor. Equalize Digital und das WooCommerce-Team überprüfen derzeit sämtliche von WooCommerce entwickelten Erweiterungen nach den WCAG 2.2 AA-Kriterien. Wo Probleme gefunden werden, werden diese nach und nach behoben, damit auch Zusatzfunktionen wie z.B. Abonnements, dynamische Preisregeln, Produkt-Bundles und ähnliches out of the box barrierefrei nutzbar sind. Für viele dieser Erweiterungen sollen ebenfalls Accessibility Conformance Reports veröffentlicht werden – einige Berichte sind bereits online, und weitere folgen, sobald die Audits abgeschlossen sind.
Zudem ermutigt das WooCommerce-Team die Community, weiterhin Accessibility-Issues zu melden. Auf GitHub und anderen Kanälen können Nutzer Barrierefreiheitsprobleme mit dem Label „Accessibility“ kennzeichnen, damit sie priorisiert behoben werden. Diese Offenheit und der Aufruf zur Mithilfe verdeutlichen, dass weitere Verbesserungen zu erwarten sind. Neue Funktionen durchlaufen künftig von vornherein strenge Accessibility-Prüfungen, um das erreichte Niveau zu halten oder noch zu steigern.
WooCommerce hat sich zum Ziel gesetzt, eine wirklich inklusive E-Commerce-Plattform zu sein – und die bisherigen Fortschritte sind ein großer Schritt in diese Richtung. Für Shop-Betreiber:innen, Agenturen und Entwickler:innen bedeutet das: Barrierefreiheit muss kein lästiges Hindernis mehr sein, sondern wird immer mehr zum integrierten Qualitätsmerkmal. Jetzt ist ein guter Zeitpunkt, bestehende WooCommerce-Shops auf den neuesten Stand zu bringen und selbst aktiv für Barrierefreiheit zu sorgen. Die technischen Grundlagen sind gelegt, und wenn alle Beteiligten das Thema weiterhin ernst nehmen, wird barrierefreies Online-Shopping bald zum selbstverständlichen Standard – zum Vorteil aller.
Fazit: WooCommerce barrierefrei – jetzt aktiv werden!
Betreiber:innen und Agenturen sollten diese Gelegenheit nutzen, ihre Shops inklusiv und nachhaltig auszurichten. Wir begleiten sie gerne bei der Erstellung barrierefreier Webseiten und unterstützen sie umfassend mit Beratung & Projektbegleitung.