BFSG-Barrierefreiheit mit WooCommerce

WooCommerce erbt die Barrierefreiheit von Theme und Plugins. Gerade Checkout und Filter sind die kritischen Stellen — ein Scan zeigt Ihren Ist-Stand.

Typische Barrieren bei WooCommerce

Das sind die Stellen, an denen wir bei WooCommerce zuerst nachsehen:

• Checkout-Felder ohne korrekt verknüpfte Labels
• Produktfilter-Plugins, die sich nicht per Tastatur bedienen lassen
• Warenkorb-Aktualisierungen ohne Ankündigung für Screenreader
• Theme-Kontraste bei Preisen, Badges und Buttons unter dem Grenzwert

Wo diese Fehler bei WooCommerce auftreten

Bei WooCommerce entstehen die Fehler an der Naht zwischen Theme und Shop-Plugin: Mengenfelder und Varianten-Auswahl ohne Label, Warenkorb-Aktualisierungen, die ohne Ankündigung im Hintergrund passieren, und Produktbilder aus einem Import, die alle denselben Dateinamen als Alt-Text tragen.

Wie häufig diese Fehler insgesamt sind, hat die WebAIM Million 2026 an einer Million Startseiten gemessen: Sechs Fehlerarten machen 96 % aller Verstöße aus, und alle sechs sind maschinell erkennbar. Die vollständige Tabelle steht im Ratgeber „Wie Sie Ihre Website auf Barrierefreiheit testen“.

Gilt das BFSG für WooCommerce?

Ihr WooCommerce-Shop ist ein Verbraucherangebot und fällt damit unter das BFSG. Die Plattform ändert an den Anforderungen nichts.

Wer genau betroffen ist und welche Ausnahmen gelten, erklärt unser Ratgeber „Gilt das BFSG für meine Website?“.

Das WooCommerce-Problem: zwei Systeme, eine Seite

WooCommerce ist kein eigenständiges Shopsystem, sondern ein Plugin, das in ein WordPress-Theme hineinrendert, das jemand anderes für einen anderen Zweck gebaut hat. Fast alle Befunde in einer Prüfung sitzen an dieser Naht: Woo liefert Templates aus, das Theme überschreibt sie teilweise, ein Page-Builder legt noch eine Ebene darüber, und Zusatz-Plugins ergänzen Markup an Stellen, die niemand mehr überblickt.

Das erklärt, warum zwei WooCommerce-Shops mit denselben Plugin-Versionen völlig unterschiedlich abschneiden — und warum es wenig bringt, im Netz nach „WooCommerce barrierefrei“ zu suchen, statt den eigenen Shop zu messen. Die Kombination ist bei Ihnen einmalig.

Wo WooCommerce-Shops konkret durchfallen

Template-Overrides im Theme

Themes dürfen WooCommerce-Templates überschreiben, indem sie Kopien im Theme-Ordner ablegen. Diese Kopien altern: Sie bleiben auf dem Stand der Woo-Version, unter der sie erstellt wurden, und übernehmen spätere Verbesserungen am Markup nicht. Ein Shop kann so mit aktuellem WooCommerce laufen und trotzdem Templates von vor mehreren Jahren ausliefern — inklusive der Barrieren, die dort seither behoben wurden.

Prüfbar ist das nicht am Versionsstand, sondern nur am ausgelieferten HTML. Genau deshalb misst ein Scanner die gerenderte Seite und nicht die Konfiguration.

Varianten, Mengenfelder und der stille Warenkorb

• Variable Produkte. Die Auswahl von Größe oder Farbe erfolgt über Dropdowns, die per JavaScript den Preis und die Verfügbarkeit ändern. Ohne Live-Region bleibt diese Änderung für Screenreader unbemerkt — der Preis auf dem Bildschirm stimmt nicht mehr mit dem überein, was angesagt wurde.
• Mengenfeld. Das Standard-Eingabefeld trägt häufig nur ein visuell verstecktes oder gar kein Label; die Plus-/Minus-Buttons, die viele Themes ergänzen, kommen ohne zugänglichen Namen.
• AJAX-„In den Warenkorb“. Der Klassiker: Der Artikel landet im Warenkorb, der Zähler oben rechts zählt hoch, und akustisch passiert nichts. Ohne aria-live ist der wichtigste Moment der Seite für einen Teil Ihrer Kunden unsichtbar.
• Warenkorb-Tabelle. Die Entfernen-Spalte besteht aus einem ×-Link ohne Text — ein leerer Link, den jeder Scanner findet.

Der Checkout und seine Feld-Plugins

Der WooCommerce-Checkout ist in Deutschland selten unverändert: Rechnungsadresse, Lieferadresse, Firmenfeld, USt-IdNr., Wunschtermin, Geschenkverpackung — vieles davon kommt aus Zusatz-Plugins oder aus Snippets in der functions.php. Genau diese nachträglich eingefügten Felder verlieren am häufigsten ihr <label for> oder tragen nur einen Platzhalter.

Zwei weitere Punkte gehören in jede Prüfung: Werden Validierungsfehler nach dem Absenden angekündigt und erhält die Fehlerliste den Fokus? Und ist die AGB-Checkbox mit einem klickbaren, verknüpften Label versehen — sie ist rechtlich zwingend und technisch oft die schwächste Stelle im Formular.

Page-Builder und Produktfilter

Wo Elementor, Divi oder ein Block-Theme die Shopseiten baut, entstehen zwei Muster: Überschriften werden nach Schriftgröße statt nach Hierarchie gewählt, und verlinkte Produktkacheln bestehen nur aus einem Bild — ein Link ohne Text. Facettenfilter-Plugins ergänzen Checkbox-Listen, deren Beschriftungen häufig nur daneben stehen, statt verknüpft zu sein, und deren Ergebnisanzahl sich ohne Ankündigung ändert.

WCAG-Checkliste für WooCommerce

Sortiert nach den Ebenen, aus denen ein WooCommerce-Shop besteht. Markiert ist, was ein automatischer Scan zuverlässig erkennt.

Theme und Template-Ebene

• Überschriftenhierarchie ohne übersprungene Ebenen, auch in Page-Builder-Sektionen (automatisch prüfbar)
• Landmarks vorhanden, Hauptinhalt in <main> (automatisch prüfbar)
• Sprachauszeichnung gesetzt (automatisch prüfbar)
• Fokusindikator nicht durch das Theme entfernt
• Template-Overrides im Theme auf aktuellen Stand geprüft
• Kontrast von Preisen, Sale-Badges und Verfügbarkeitshinweisen (automatisch prüfbar)

Produkt und Kategorie

• Produktbilder mit sinnvollem Alt-Text, nicht mit dem Importdateinamen (Vorhandensein automatisch prüfbar)
• Produktkacheln verlinken den Namen, nicht nur das Bild (leere Links automatisch prüfbar)
• Varianten-Dropdowns mit Label, Preisänderung wird angekündigt
• Mengenfeld mit Label, Plus/Minus-Buttons benannt (automatisch prüfbar)
• „In den Warenkorb“ als <button> mit Text (automatisch prüfbar)
• Facettenfilter mit verknüpften Labels, Ergebnisanzahl als Statusmeldung (Labels automatisch prüfbar)

Warenkorb und Checkout

• AJAX-Warenkorb meldet Änderungen über eine Live-Region
• Entfernen-Links tragen Text, nicht nur ein × (automatisch prüfbar)
• Alle Checkout-Felder mit <label for>, auch nachträglich ergänzte (automatisch prüfbar)
• Autocomplete-Attribute auf Adressfeldern gesetzt
• Fehlermeldungen im Text benannt, Fehlerliste erhält den Fokus
• AGB- und Widerrufs-Checkbox mit klickbarem Label (automatisch prüfbar)
• Zahlungsarten als Radiogruppe mit fieldset und legend

Plugins und Inhalte

• Cookie-Banner per Tastatur bedienbar, kein Fokusfang
• Kontaktformular-Plugin: alle Felder beschriftet (automatisch prüfbar)
• Bewertungssterne mit Textalternative (automatisch prüfbar)
• Rechnungen und Datenblätter als getaggte PDFs oder HTML-Alternative
• Nach jedem Plugin-Update erneut geprüft
• Barrierefreiheitserklärung veröffentlicht und auffindbar

Was die Marktüberwachung bei einem Shop ansieht

Nach ihrer veröffentlichten Strategie setzt die zuständige Stelle der Länder bei webbasierten Diensten auf automatisierte Vorprüfungen mit technischer Prüfsoftware und gewichtet die Nutzerreichweite eines Angebots. Vorrang haben jedoch Beschwerden: Nach § 32 BFSG kann jede Verbraucherin einen Antrag auf Marktüberwachungsmaßnahmen stellen. Für einen typischen deutschen WooCommerce-Shop ist das der realistische Auslöser — nicht ein Sweep. Die Einzelheiten stehen im Ratgeber „So prüft die Marktüberwachung nach dem BFSG“.

Zusätzlich prüft die Behörde die Informationspflichten nach § 14 Abs. 2 BFSG — laut Strategie ein „wesentlicher Bestandteil der formalen Überwachung“. Das ist der Teil, der Sie nichts kostet außer einer Seite Text, und der bei den meisten Shops fehlt.

So prüfen Sie Ihren WooCommerce-Shop — kostenlos

Der kostenlose Einzelseiten-Check zeigt in Sekunden die ersten Barrieren — ohne Anmeldung. Automatisierte Tests finden dabei ehrlich nur rund 30–57 % der WCAG-Probleme; den Rest markieren wir zur manuellen Prüfung, statt „100 % konform“ zu versprechen.

Für die ganze Website gibt es den vollständigen automatischen Report ab €14 — günstiger als die üblichen deutschen Tools.