WooCommerce barrierefrei machen: BFSG-Checkliste für WordPress-Shops

Was WooCommerce selbst mitbringt, warum Theme, Page-Builder und Plugins die meisten Barrieren erzeugen und welche Punkte Sie in WordPress konkret prüfen sollten.

WooCommerce ist in Deutschland eines der meistgenutzten Shopsysteme, gerade bei kleinen und mittleren Händlern. Seit dem 28. Juni 2025 gilt für Onlineshops, die an Verbraucher verkaufen, das Barrierefreiheitsstärkungsgesetz (BFSG). Für WooCommerce-Shops ist die Ausgangslage besonders: Das Plugin selbst ist ordentlich gebaut, aber kaum ein Shop besteht nur aus WooCommerce. Theme, Page-Builder, Rechtstexte-Plugin, Cookie-Banner, Slider und Zahlungsanbieter kommen von unterschiedlichen Herstellern, und jedes Teil kann Barrieren mitbringen.

Diese Checkliste zeigt, wo Sie ansetzen. Maßstab sind die WCAG 2.1 in der Stufe AA, auf die das BFSG über die harmonisierte Norm EN 301 549 verweist. Welche Pflichten insgesamt gelten, lesen Sie in BFSG für Onlineshops: Diese Pflichten gelten seit Juni 2025. Der Artikel ist eine technische Anleitung und keine Rechtsberatung.

Was WooCommerce selbst mitbringt

WooCommerce gibt auf seiner Seite zur Barrierefreiheit an, dass das Frontend des Kern-Plugins weitgehend konform mit WCAG 2.2 in den Stufen AA und AAA ist. 2024 hat WooCommerce die Agentur Equalize Digital mit einem Audit aller Frontend-Komponenten beauftragt, also Blöcke, Shortcodes und Templates. Die gefundenen Probleme werden nach eigenen Angaben noch behoben. Laut Dokumentation gehören dazu:

• eine logische Tab-Reihenfolge in Warenkorb, Checkout und Formularen und sichtbare Fokusmarkierungen,
• Beschriftungen für alle Formularfelder,
• Live-Bereiche, die Änderungen an Warenkorbsummen und Fehlermeldungen für Screenreader ansagen,
• Unterstützung für Browser-Zoom bis 400 % und für die Systemeinstellung „Bewegung reduzieren“.

Seit WooCommerce 8.3 aus dem November 2023 sind bei neuen Installationen die Warenkorb- und Checkout-Blöcke Standard. Ältere Shops nutzen häufig weiterhin die klassischen Shortcodes [woocommerce_cart] und [woocommerce_checkout], oft weil ein Plugin den Checkout umbaut. WooCommerce weist selbst darauf hin, dass veraltete Blöcke nur eingeschränkt barrierefrei sind und dass Theme-Styles die eigenen Einstellungen überschreiben können.

Kurz gesagt: Der WooCommerce-Kern ist eine solide Basis. Ob Ihr Shop barrierefrei ist, entscheidet sich an anderer Stelle.

Wer ist wofür verantwortlich?

Rechtlich bieten Sie als Shopbetreiber die Dienstleistung an. Gegenüber Kunden und der Marktüberwachung bleiben Sie verantwortlich, auch für Code von Theme- und Plugin-Herstellern.

Schritt 1: Das Theme prüfen

Das Theme bestimmt Header, Navigation, Produktkacheln, Farben und Fokusdarstellung. Es ist deshalb der größte Hebel.

• Accessibility-ready: Im WordPress-Theme-Verzeichnis tragen manche Themes das Schlagwort „accessibility-ready“. Diese Themes wurden von einem Prüfteam auf Mindestanforderungen getestet, etwa Tastaturbedienung, Sprunglinks, Überschriften und einen Textkontrast von 4,5:1. Das ist ein guter Startpunkt, aber nach Aussage des WordPress-Teams kein Nachweis für volle WCAG-Konformität.
• Premium-Themes: Themes von Marktplätzen sind oft auf Optik und Animationen optimiert. Fragen Sie vor dem Kauf nach Aussagen zur Barrierefreiheit und testen Sie die Demo mit der Tastatur.
• Block-Themes: Bei aktuellen Block-Themes fügt WordPress automatisch einen Sprunglink zum Hauptinhalt ein. Bei klassischen Themes muss das Theme ihn selbst mitbringen.
• Kindthemes und Anpassungen: Prüfen Sie eigenes CSS auf outline: none. Diese eine Zeile entfernt in vielen Shops den Fokusrahmen für alle Links und Buttons.

Ein deutlicher Fokusrahmen lässt sich über Design > Customizer > Zusätzliches CSS oder im Website-Editor ergänzen:

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

Schritt 2: Farben und Kontraste

Bei Block-Themes legen Sie Farben zentral unter Design > Editor > Stile > Farben fest, bei klassischen Themes meist im Customizer. Prüfen Sie jede Kombination mit einem Kontrastrechner:

• Normaler Text: mindestens 4,5:1 zum Hintergrund.
• Große Schrift (ab 24 Pixel oder ab etwa 19 Pixel fett): mindestens 3:1.
• Rahmen von Eingabefeldern, Icons und Fokusmarkierungen: mindestens 3:1.

Typische Fehler in WooCommerce-Shops sind der „Sale“-Badge in hellem Rot oder Pastellgrün mit weißer Schrift, hellgraue Streichpreise, Platzhaltertext in Formularen, der die Beschriftung ersetzt, und Buttons in der Markenfarbe, deren Text kaum lesbar ist. Page-Builder erlauben pro Element eigene Farben. Hier entstehen Kontrastfehler oft auf einzelnen Landingpages, obwohl das Theme selbst korrekt ist.

Schritt 3: Alt-Texte in der Mediathek

WooCommerce übernimmt den Alternativtext eines Produktbilds aus der Mediathek. Unter Medien > Mediathek wählen Sie ein Bild aus und tragen in den Anhang-Details den Alternativtext ein. Titel und Beschriftung ersetzen ihn nicht.

• Beschreiben Sie, was für den Kauf zählt: „Leinenkissen in Salbeigrün, 50 mal 50 Zentimeter, mit verdecktem Reißverschluss“ statt „kissen_gruen_final.jpg“.
• Galeriebilder brauchen ebenfalls Alt-Texte, nicht nur das Hauptbild.
• Rein dekorative Bilder bekommen ein leeres Alt-Attribut.
• Bei großen Katalogen hilft ein Export der Medien oder die REST-API, statt jedes Bild einzeln zu öffnen.

Schritt 4: Page-Builder und Slider

Elementor, Divi, WPBakery und ähnliche Builder machen es leicht, Seiten zu gestalten, und ebenso leicht, Barrieren einzubauen.

• Überschriften: Builder lassen die Überschriftenebene oft frei wählen. Nutzen Sie H1 bis H4 für die Gliederung, nicht für die Schriftgröße. Jede Seite braucht genau eine H1.
• Buttons und Links: Ein Icon ohne Text, etwa ein Warenkorb-Symbol oder ein Pfeil im Slider, braucht eine Beschriftung für Screenreader.
• Slider und Karussells: Automatisch laufende Slider brauchen eine Pause-Funktion. Prüfen Sie, ob sich alle Folien per Tastatur erreichen lassen.
• Text in Bildern: Rabattaktionen gehören als echter Text auf die Seite, nicht in ein Bannerbild.

Schritt 5: Checkout und deutsche Rechtstexte-Plugins

Der Checkout ist für das BFSG besonders wichtig, weil dort der Vertrag zustande kommt. In deutschen WooCommerce-Shops wird er fast immer durch ein Rechtstexte-Plugin wie Germanized oder German Market erweitert. Diese Plugins fügen Checkboxen für AGB und Widerruf, Hinweise zu Lieferzeiten und den Button „Zahlungspflichtig bestellen“ ein.

Prüfen Sie im Checkout:

• Hat jede Checkbox eine Beschriftung, die beim Fokussieren vorgelesen wird? Ein Link zu den AGB innerhalb der Beschriftung muss ebenfalls per Tastatur erreichbar sein.
• Erscheinen Fehlermeldungen als Text in der Nähe des Felds, und werden sie angesagt? Ein roter Rahmen allein genügt nicht.
• Lassen sich Zahlungsarten per Tastatur auswählen, und sind eingebettete Felder von Stripe, PayPal oder Klarna bedienbar?
• Bleibt der Fokus nach dem Absenden an einer sinnvollen Stelle, wenn ein Fehler auftritt?

Wenn Sie noch den klassischen Shortcode-Checkout nutzen, testen Sie den Checkout-Block auf einer Staging-Umgebung. Prüfen Sie vorher, ob Ihr Rechtstexte-Plugin und Ihre Zahlungs-Plugins den Block unterstützen.

Schritt 6: Weitere Plugins, Captcha und Cookie-Banner

Jedes Plugin, das im Frontend etwas anzeigt, bringt eigenes Markup mit: Produktfilter, Wunschlisten, Bewertungen, Größentabellen, Chat-Fenster, Newsletter-Popups und Upsell-Layer.

• Testen Sie jedes sichtbare Plugin mit der Tastatur: erreichbar, Fokus sichtbar, mit Escape schließbar?
• Deaktivieren Sie Plugins, die Sie nicht mehr brauchen. Viele Shops schleppen Popups und Slider aus alten Aktionen mit.
• Ersetzen Sie Bild-Captchas durch Verfahren ohne Rätsel, etwa ein Honeypot-Feld.
• Der Cookie-Banner muss per Tastatur erreichbar sein, beide Schaltflächen brauchen ausreichenden Kontrast, und er muss bei 400 % Zoom vollständig bedienbar bleiben.

Plugins, die ein Barrierefreiheits-Menü mit Schriftgrößen- und Kontrastschaltern einblenden, ändern das Markup Ihres Shops nicht. Warum solche Overlays nicht reichen, erklären wir in Accessibility-Overlays und das BFSG.

Schritt 7: Informationen zur Barrierefreiheit veröffentlichen

Das BFSG verlangt, dass Sie in Ihren AGB oder auf andere deutlich wahrnehmbare Weise darüber informieren, wie Ihr Shop die Anforderungen erfüllt. Legen Sie dafür unter Seiten eine neue Seite „Barrierefreiheit“ an und verlinken Sie sie unter Design > Menüs oder im Website-Editor im Footer. Welche Angaben hineingehören, zeigt unser Muster für die Erklärung zur Barrierefreiheit.

Die Checkliste im Überblick

Häufige Fragen

Ist WooCommerce automatisch BFSG-konform?

Nein. Der WooCommerce-Kern ist nach Herstellerangaben weitgehend konform mit WCAG 2.2 AA, Restpunkte aus einem externen Audit werden noch behoben. Theme, Page-Builder, Plugins und Inhalte verantworten Sie selbst, und dort entstehen die meisten Barrieren.

Reicht ein Theme mit dem Schlagwort accessibility-ready?

Es ist ein guter Start, weil das Theme auf Mindestanforderungen geprüft wurde. Die Prüfung deckt aber nicht alle WCAG-Kriterien ab und gilt für das Theme im Auslieferungszustand. Ihre Farben, Inhalte und Plugins müssen Sie zusätzlich testen.

Muss ich auf den Checkout-Block umstellen?

Das BFSG schreibt keine bestimmte Technik vor. Entscheidend ist, dass Ihr Checkout bedienbar ist. Der Block-Checkout ist aktueller und wird von WooCommerce weiterentwickelt. Ob ein Umstieg für Sie sinnvoll ist, hängt davon ab, ob Ihre Rechtstexte- und Zahlungs-Plugins ihn unterstützen.

Kann ich die Barrierefreiheit per Plugin nachrüsten?

Einzelne Plugins helfen bei Teilaufgaben, etwa beim Pflegen von Alt-Texten oder beim Korrigieren bekannter Fehler im Checkout. Ein Overlay, das Barrieren zur Laufzeit überdecken soll, ersetzt aber keine Korrekturen im Theme und in den Inhalten.

Nächster Schritt

Prüfen Sie in 30 Sekunden kostenlos, welche Barrieren Ihr WooCommerce-Shop hat: Jetzt kostenlosen BFSG-Check starten. Der Check lädt Startseite, eine Kategorie- und eine Produktseite in einem echten Browser und zeigt Kontrastfehler, fehlende Alt-Texte, fehlende Beschriftungen und einen unsichtbaren Tastaturfokus mit der jeweiligen Fundstelle. Er ersetzt keine manuelle Prüfung und keine Rechtsberatung.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung.