Zum Hauptinhalt springen

WooCommerce barrierefrei: Shop BFSG-konform machen

WooCommerce ist nicht automatisch barrierefrei. Die kritischen Stellen in Produktseite, Warenkorb und Checkout — und was Sie bei Zahlungsanbietern beachten müssen.

Marc Schraepler von Gerlach

Marc Schraepler von Gerlach

· barrierefreie-agenturen.de

Wo die Konformität wirklich entschieden wird

Auf einen Blick:

  • WooCommerce ist nicht automatisch barrierefrei. Es erbt die Struktur Ihres Themes und ergänzt eigene kritische Komponenten.
  • Die Kaufstrecke entscheidet. Varianten-Auswahl, Warenkorb-Meldungen und Checkout sind die Stellen, an denen Nutzer:innen tatsächlich scheitern.
  • AJAX-Meldungen sind der häufigste blinde Fleck. „Produkt wurde hinzugefügt“ erscheint visuell, wird Screenreadern aber oft nicht angesagt.
  • Für Shops gibt es keine Entwarnung bei der Größe — die Kleinstunternehmen-Ausnahme greift bei Shops nicht wie bei reinen Dienstleistungen.
  • Zahlungs-Iframes gehören zum Prüfumfang, auch wenn der Code von Dritten stammt.

Gilt das BFSG für meinen Shop?

Ein Online-Shop ist eine digitale Dienstleistung im Sinne des BFSG und fällt damit grundsätzlich unter die Pflicht. Die Kleinstunternehmen-Ausnahme — weniger als 10 Beschäftigte und unter 2 Mio. € Jahresumsatz — greift bei Dienstleistungen, für Shops ist der Anwendungsbereich enger, weil sie zusätzlich unter die Produktregelungen fallen können.

Die vollständige Einordnung samt Fristen und Kontrollpraxis steht in den Ratgebern BFSG für Online-Shops und BFSG-Pflicht: Bin ich betroffen?. Dieser Artikel behandelt die technische Seite in WooCommerce.

Was WooCommerce mitbringt — und was vom Theme kommt

WooCommerce liefert Templates für Produktseiten, Warenkorb und Checkout aus. Diese Templates sind über die Jahre besser geworden, aber sie werden fast immer vom Theme überschrieben oder gestylt. Das Ergebnis ist eine Mischform: Ein Teil der Barrieren stammt aus WooCommerce, ein größerer Teil aus dem Theme und aus Erweiterungen.

Praktische Konsequenz: Prüfen Sie nie „WooCommerce“ abstrakt, sondern immer Ihre konkrete Kaufstrecke im Live-Zustand.

Die kritischen Stellen der Kaufstrecke

Produktseite: Varianten-Auswahl

Variable Produkte — Größe, Farbe, Ausführung — sind die häufigste Fehlerquelle auf Produktseiten. Typische Probleme:

  • Auswahlfelder ohne sichtbar verknüpftes Label, sodass unklar bleibt, wofür ein Dropdown steht
  • Nicht verfügbare Kombinationen, die sich zwar visuell ausgrauen, per Tastatur aber weiterhin anspringen lassen
  • Preisänderungen nach der Auswahl, die visuell aktualisiert, aber nicht angesagt werden
  • Farbauswahl allein über Farbfelder, ohne Textalternative — ein Verstoß gegen das Prinzip, Information nicht nur über Farbe zu vermitteln

Produktgalerie und Lightbox

Bildergalerien öffnen sich häufig in einer Lightbox, die den Fokus nicht einfängt: Die Tabulatortaste wandert hinter das Overlay weiter, die Escape-Taste schließt nichts, und nach dem Schließen landet der Fokus am Seitenanfang statt beim Auslöser. Produktbilder brauchen außerdem Alternativtexte, die den Artikel beschreiben — nicht den Dateinamen.

Warenkorb: die AJAX-Falle

„In den Warenkorb“ löst in den meisten Setups eine Aktualisierung ohne Seitenneuladen aus. Visuell erscheint eine Bestätigung, der Warenkorb-Zähler springt hoch. Für Screenreader passiert dabei häufig nichts Hörbares: Ohne eine Live-Region bleibt die Statusmeldung unbemerkt, und Nutzer:innen wissen nicht, ob die Aktion funktioniert hat.

Dasselbe gilt für Mengenänderungen, das Entfernen von Positionen und die Aktualisierung der Zwischensumme. Diese Rückmeldungen sind kein Komfort, sondern die Voraussetzung dafür, den Kaufvorgang überhaupt kontrollieren zu können.

Checkout: Formulare und Fehlerbehandlung

Der Checkout ist die Stelle mit der höchsten Abbruchwirkung. Prüfen Sie gezielt:

  • Labels müssen programmatisch mit ihrem Feld verknüpft sein. Ein Platzhaltertext ersetzt kein Label — er verschwindet beim Tippen.
  • Pflichtfelder brauchen eine Kennzeichnung, die nicht allein über Farbe oder ein Sternchen ohne Erläuterung läuft.
  • Fehlermeldungen müssen beim Auftreten angesagt werden, den Fehler benennen und zum betroffenen Feld führen. „Bitte überprüfen Sie Ihre Eingaben“ am Seitenanfang genügt nicht.
  • Autofill funktioniert nur mit korrekten autocomplete-Attributen — für Menschen mit motorischen Einschränkungen oder kognitiver Belastung ein spürbarer Unterschied.
  • Mehrstufige Checkouts müssen den Schrittwechsel ansagen und den Fokus in den neuen Abschnitt setzen.

Zahlung: fremder Code, eigene Verantwortung

Zahlungsanbieter binden ihre Felder häufig als Iframe ein. Wenn dieser Iframe kein Titel-Attribut hat, seine Felder keine Labels tragen oder Fehler nicht zugänglich gemeldet werden, ist Ihre Kaufstrecke an der letzten Stelle nicht bedienbar — unabhängig davon, wer den Code geschrieben hat.

Fordern Sie beim Anbieter eine Konformitätsaussage an. Fällt sie unbefriedigend aus, ist der Wechsel des Zahlungsdienstleisters eine realistische Maßnahme; nachbessern können Sie fremden Iframe-Inhalt nicht.

Was Sie selbst prüfen können

Führen Sie einen vollständigen Testkauf ausschließlich mit der Tastatur durch — von der Produktsuche bis zur Bestellbestätigung. Kein Mausklick, kein Touch.

Achten Sie unterwegs auf drei Dinge: Sehen Sie an jeder Station, wo der Fokus steht? Erfahren Sie nach jeder Aktion, was passiert ist? Kommen Sie aus jedem Overlay, Popup und Menü wieder heraus?

Wiederholen Sie den Durchlauf mit 400 % Browser-Zoom. Bricht das Layout einspaltig um, oder müssen Sie horizontal scrollen, um den Bestellbutton zu erreichen?

Diese beiden Durchläufe finden erfahrungsgemäß mehr relevante Barrieren als jedes automatisierte Tool — Letzteres findet dafür zuverlässig Kontrast- und Markup-Fehler. Eine erste automatisierte Einschätzung liefert der kostenlose Barrierefreiheits-Check; den Prüfumfang insgesamt beschreibt Barrierefreiheit testen.

Erweiterungen als Risikoquelle

Ein produktiver WooCommerce-Shop läuft selten pur. Jede Erweiterung, die in die Kaufstrecke eingreift, kann Barrieren einführen: Filter- und Facettensuchen, die Ergebnisse per AJAX austauschen, ohne die Änderung anzusagen. Buchungs- und Terminkalender mit eigener Tastaturlogik. Produkt-Konfiguratoren. Bewertungs-Widgets von Drittanbietern.

Behandeln Sie jede dieser Komponenten als eigenen Prüfgegenstand — und als Auswahlkriterium, bevor Sie sie einkaufen. Was das insgesamt kostet und wo Zuschüsse möglich sind, steht unter Kosten und Förderung.

Wann Sie Unterstützung brauchen

Die Tastatur- und Zoom-Tests können Sie selbst durchführen und liefern schnell verwertbare Ergebnisse. Für einen belastbaren Nachweis — insbesondere bei Abmahnrisiko oder Nachweispflicht gegenüber Marktüberwachung und Geschäftspartnern — brauchen Sie eine dokumentierte manuelle Prüfung. Agenturen mit E-Commerce-Erfahrung finden Sie im Verzeichnis; mehrere Anbieter dort prüfen Kaufstrecken einschließlich Nutzertests mit betroffenen Menschen.

Häufige Fragen

Ist WooCommerce barrierefrei?

Nicht automatisch. WooCommerce erbt die Struktur des Themes und bringt eigene kritische Komponenten mit: Varianten-Auswahl, AJAX-Meldungen im Warenkorb und mehrstufige Checkout-Formulare. Diese Stellen entscheiden über die Konformität, weil sie direkt im Kaufprozess liegen.

Welche Stellen im WooCommerce-Shop sind am kritischsten?

Die Kaufstrecke: Varianten-Auswahl auf der Produktseite, Statusmeldungen beim Hinzufügen zum Warenkorb und der Checkout mit Formularlabels, Pflichtfeldkennzeichnung und Fehlerbehandlung. Ein Fehler dort verhindert den Kauf, während ein Kontrastfehler im Footer nur stört.

Gilt die Kleinstunternehmen-Ausnahme auch für meinen Shop?

Bei reinen Dienstleistungen greift die Ausnahme unter 10 Beschäftigten und 2 Mio. € Umsatz. Für Shops ist der Anwendungsbereich enger, weil sie zusätzlich unter die Produktregelungen fallen können. Prüfen Sie Ihren Fall über den Ratgeber zur BFSG-Pflicht, statt sich auf die Größe zu verlassen.

Wer haftet, wenn der Zahlungsanbieter nicht barrierefrei ist?

Gegenüber Ihren Kund:innen ist Ihre Kaufstrecke geschuldet — auch der eingebettete Teil. Da Sie fremden Iframe-Inhalt nicht reparieren können, bleibt nur, beim Anbieter eine Konformitätsaussage einzufordern und im Zweifel zu wechseln.

Wie teste ich meinen WooCommerce-Shop selbst?

Führen Sie einen vollständigen Testkauf ausschließlich mit der Tastatur durch und wiederholen Sie ihn bei 400 % Zoom. Achten Sie darauf, ob der Fokus immer sichtbar ist, ob jede Aktion eine wahrnehmbare Rückmeldung erzeugt und ob Sie aus allen Overlays wieder herauskommen.


Dieser Ratgeber ist Teil unseres Leitfadens Barrierefreie WordPress-Website erstellen.

Rechtlicher Hinweis: Die auf barrierefreie-agenturen.de bereitgestellten Inhalte dienen der allgemeinen Information über das Barrierefreiheitsstärkungsgesetz (BFSG). Sie stellen keine Rechtsberatung dar und können eine individuelle juristische Prüfung nicht ersetzen. Trotz sorgfältiger Recherche übernehmen wir keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Informationen.