Ratgeber

WooCommerce barrierefrei machen: Theme, Plugins und Checkout

Veröffentlicht am 19. Oktober 2026

WooCommerce liefert Ihnen eine weitgehend barrierefreie Grundlage; seit Version 8.3 sind in neuen Shops die Warenkorb- und Checkout-Blöcke Standard. Ob Ihr Shop am Ende barrierefrei ist, entscheiden aber Ihr Theme, Ihre Plugins, Ihre Zahlungsanbieter und Ihre Inhalte, und genau diese Teile prüfen und beheben Sie selbst.

Was WooCommerce im Vergleich zu Shopify, Shopware und anderen Systemen liefert, steht in der Übersicht Barrierefreier Onlineshop: was Shopsysteme leisten. Dieser Artikel geht einen Schritt weiter: Er hilft Ihnen bei der Wahl zwischen Block-Checkout und klassischem Checkout, nennt die belegten Wege im WordPress-Admin und gibt Ihnen eine Checkliste für jede Shopseite.

Die WooCommerce-Hilfe beschreibt die Menüs auf Englisch. Wir nennen die englischen Bezeichnungen, damit Sie sie mit der Hilfe abgleichen können; in einem deutschsprachigen WordPress stehen dort die übersetzten Namen.

Wer was liefert: WordPress, WooCommerce, Theme, Plugins

Rechtlich ändert diese Aufteilung nichts: Nach § 14 BFSG muss der Dienstleistungserbringer, also Sie als Shopbetreiber, sicherstellen, dass die Anforderungen eingehalten werden, solange er die Dienstleistung anbietet, und bei einer Nichtkonformität Korrekturmaßnahmen ergreifen. Für Anmeldung und Zahlung nennt § 19 BFSGV zusätzlich, dass Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen „wahrnehmbar, bedienbar, verständlich und robust“ gestaltet sein müssen. Unsere Einschätzung: Deshalb gehören Kundenkonto, Checkout und Zahlungs-Plugins an den Anfang Ihrer Liste.

Block-Checkout oder klassischer Checkout?

WooCommerce hat zwei Checkout-Varianten: den Checkout-Block und den klassischen Checkout über den Kurzcode [woocommerce_checkout]. Shops, die nach Version 8.3 (November 2023) eingerichtet wurden, nutzen die Blöcke standardmäßig; ältere Shops behalten ihre Variante, bis Sie selbst umstellen (WooCommerce: Cart and Checkout Blocks Status und FAQ: Cart and Checkout Blocks by Default, beide gelesen am 19.10.2026).

Welche Variante Ihr Shop nutzt

Öffnen Sie die Checkout-Seite im Editor. Den Weg nennt WooCommerce in der Status-Dokumentation zu den Blöcken (gelesen am 19.10.2026):

• Block-Theme: Appearance > Editor > Pages, dann Checkout wählen.
• Klassisches Theme: Pages > All Pages, dann die Checkout-Seite bearbeiten.

Unsere Einschätzung: Sehen Sie dort den Checkout-Block mit seinen Unterblöcken, nutzen Sie den Block-Checkout. Sehen Sie einen Platzhalter „Classic Shortcode“ oder einen Kurzcode-Block mit [woocommerce_checkout], nutzen Sie den klassischen Checkout. Dieselbe Prüfung machen Sie für die Warenkorb-Seite.

Entscheidungstabelle

Für Formulare allgemein, also in beiden Varianten, nennt WooCommerce beschreibende Labels, gekennzeichnete Pflichtfelder und Fehlermeldungen, die sichtbar und für Hilfstechnik mitgeteilt werden; getestet wird mit VoiceOver, JAWS und NVDA (Accessibility Features in WooCommerce, gelesen am 19.10.2026).

Unsere Empfehlung: Nehmen Sie den Checkout-Block, wenn alle Plugins, die im Checkout etwas anzeigen, mit ihm kompatibel sind. Dann nutzen Sie die Variante, die WooCommerce für neue Shops als Standard setzt, und brauchen meist weniger eigenen Code. Bleiben Sie beim klassischen Checkout, wenn ein unverzichtbares Plugin, etwa für Zahlung oder rechtliche Pflichtfelder, den Block nicht unterstützt. Dann prüfen Sie Labels, Pflichtfeld-Kennzeichnung und Fehlermeldungen jedes zusätzlichen Feldes besonders gründlich. In beiden Fällen gilt: Erst ein Tastaturtest bis zur Bestellbestätigung zeigt, ob es wirklich funktioniert.

Inkompatible Plugins erkennen und zurückwechseln

• Warnung im Editor: Wählen Sie im Editor den Checkout-Block oder einen seiner inneren Blöcke aus. Hat eine Erweiterung ihre Inkompatibilität erklärt, erscheinen in der Einstellungs-Seitenleiste eine Warnung und eine Schaltfläche, mit der Sie zum klassischen Checkout wechseln (Blocks Status, gelesen am 19.10.2026). Erweiterungen, die nichts erklärt haben, erzeugen keine Warnung; testen Sie sie im Frontend.
• Kompatibilität vorab prüfen: Bei Erweiterungen von WooCommerce.com steht die Kompatibilität im Abschnitt „Compatibility“ der Produktseite (ebenda).
• Zurück zum klassischen Checkout: Seite wie oben öffnen, die Listenansicht (List View) öffnen, den Checkout-Block auswählen, in der Block-Werkzeugleiste ganz links Transform klicken, Classic Shortcode wählen und oben Save klicken. WooCommerce rät, Warenkorb und Checkout gemeinsam umzustellen (ebenda).

Wie ein barrierefreier Checkout unabhängig vom Shopsystem aussehen muss, Feld für Feld, erklärt Barrierefreier Checkout im Onlineshop.

Das Theme: was „accessibility-ready“ bedeutet und was nicht

WooCommerce empfiehlt Themes mit dem Schlagwort „accessibility-ready“ aus dem WordPress-Verzeichnis und für Themes von anderswo einen Accessibility Conformance Report (ACR) des Entwicklers (Accessibility Tips for Store Owners, gelesen am 19.10.2026). Im WordPress-Verzeichnis können Sie Themes nach diesem Schlagwort filtern (gelesen am 19.10.2026). Das WordPress-Theme Twenty Twenty-Five trägt es (gelesen am 19.10.2026).

Für das Schlagwort prüft das Accessibility-Team von WordPress unter anderem diese Punkte (Required: accessibility-ready, gelesen am 19.10.2026): Sprunglink zum Inhalt, Landmarks, Tastaturbedienung, Bedienelemente, Formularbeschriftungen, Überschriften, unterstrichene Links im Text, Kontrast, Alternativtexte, Medien, Zoom und Textgröße, keine unerwarteten Kontextwechsel, Hinweise auf neue Fenster, Inhalte bei Hover und Fokus und keine Empfehlung unzugänglicher Plugins.

Drei Grenzen sollten Sie kennen:

1. Mindeststandard, nicht WCAG AA. WordPress schreibt selbst, dass das Schlagwort nicht bedeutet, dass das Theme WCAG AA erfüllt, sondern nur die Mindeststandards des Review-Teams (Theme Handbook).
2. Die Prüfliste nennt keine Shopseiten. Ob Produktseite, Warenkorb und Checkout in Ihrem Theme funktionieren, zeigt nur Ihr eigener Test.
3. Das Schlagwort gibt es nur im WordPress-Verzeichnis. Es wird dort nach einer Prüfung eingereichter Themes vergeben (Theme Handbook). Kaufen Sie ein Theme auf einem Marktplatz oder bei einer Agentur, fragen Sie schriftlich nach einem ACR, so wie WooCommerce es empfiehlt.

Veraltete Vorlagen im Theme finden

Klassische Themes überschreiben oft WooCommerce-Vorlagen. Werden diese Kopien nicht gepflegt, fehlen Ihnen Verbesserungen, die WooCommerce in neueren Vorlagen eingebaut hat. Den Stand prüfen Sie laut How to fix outdated WooCommerce templates (gelesen am 19.10.2026) unter WooCommerce > Status > System Status: Am Ende der Seite stehen die vom Theme überschriebenen Vorlagen mit einem Warnhinweis, wenn sie veraltet sind. WooCommerce empfiehlt, zuerst das Theme zu aktualisieren, da Theme-Anbieter das meist zeitnah beheben, oder ein Theme mit aktuellen Vorlagen zu wählen.

Plugins: Inventur in vier Schritten

1. Liste anlegen. Gehen Sie die installierten Plugins durch und notieren Sie jedes, das im Shop etwas anzeigt: Cookie-Banner, Pop-ups, Filter, Bewertungen, Größenberater, Chat, Zahlungsarten, Versandoptionen, Zusatzfelder im Checkout.
2. Bericht anfordern. Für einige Erweiterungen von WooCommerce selbst gibt es Konformitätsberichte, darunter Stripe, WooCommerce Payments, PayPal Braintree, Square, Product Add-ons, Product Bundles und WooCommerce Subscriptions (Liste auf WooCommerce Accessibility, gelesen am 19.10.2026). Für alle anderen fragen Sie den Anbieter schriftlich nach einem ACR oder VPAT und legen die Antwort ab.
3. Einzeln testen. Bedienen Sie jedes Plugin nur mit der Tastatur. WooCommerce weist darauf hin, dass eigener JavaScript- oder CSS-Code die Barrierefreiheit verschlechtern kann und betroffene Abläufe danach neu getestet werden sollten (Accessibility Tips).
4. Ersetzen statt überdecken. Was sich nicht bedienen lässt und vom Anbieter nicht behoben wird, ersetzen Sie. Ein Overlay-Plugin mit Schriftgrößen- und Kontrastknöpfen behebt die Ursachen nicht; warum, steht in der Übersicht zu den Shopsystemen.

Ihre Inhalte: Alt-Texte richtig hinterlegen

Produktbilder setzen Sie laut Adding Product Images and Galleries (gelesen am 19.10.2026) unter Products > All Products, Produkt öffnen, Box Product image > Set product image; Galeriebilder über Product gallery > Add product gallery images. Die Seite nennt dabei kein Feld für den Alternativtext.

Den Alternativtext pflegen Sie in der WordPress-Mediathek. Laut WordPress: Edit Media (gelesen am 19.10.2026) gehen Sie zu Media > Library, klicken auf den Namen des Bildes oder auf Edit, tragen den Text im Feld Alternative Text (in der Hilfe „Alternate text“) ein und klicken auf Update.

Wichtig für Bilder auf Seiten: Dieselbe Seite erklärt, dass die Angaben aus der Mediathek nur als Vorgabe beim Einfügen dienen. Ist ein Bild einzeln in eine Seite eingefügt, ist es von der Mediathek getrennt, und Sie ändern den Alternativtext am Bild in der Seite selbst. Bilder in Bannern und Startseiten-Blöcken prüfen Sie deshalb dort, wo sie eingefügt sind.

Was ein guter Alternativtext ist: Produktbilder und verlinkte Bilder sind laut WooCommerce nie dekorativ und brauchen eine Beschreibung; nur rein dekorative Bilder bekommen ein leeres Feld (Accessibility Tips). Beispiel: Statt „produkt-01.jpg“ schreiben Sie „Leinenkissen in Salbeigrün, 40 mal 40 cm, mit verdecktem Reißverschluss“.

Checkliste je Shopseite

Gehen Sie jede Zeile einmal mit der Maus und einmal nur mit der Tastatur durch (Tabulator, Umschalt plus Tabulator, Eingabe, Leertaste, Escape). WooCommerce empfiehlt zusätzlich, die Seite auf 200 und 400 Prozent zu vergrößern und einen Screenreader wie NVDA oder VoiceOver zu nutzen (Accessibility Tips). Wie Sie solche Tests ohne Vorwissen durchführen, zeigt Website auf Barrierefreiheit prüfen.

Zur letzten Zeile: Die Informationen nach Anlage 3 BFSG geben Sie nach dem Gesetz „in seinen Allgemeinen Geschäftsbedingungen oder auf andere deutlich wahrnehmbare Weise“ an, gemeint sind Ihre AGB oder eine andere gut sichtbare Stelle; ein Link im Fußbereich ist unsere Empfehlung dafür. Einen Text liefert das Muster für die Barrierefreiheitserklärung.

Nach jedem Update erneut prüfen

Prüfen Sie Checkout, Warenkorb und Produktseite erneut, wenn Sie WooCommerce, das Theme oder ein Plugin aktualisieren, ein neues Plugin installieren, zwischen Block- und klassischem Checkout wechseln oder eigenes CSS ändern. Werfen Sie nach Theme-Updates auch einen Blick in WooCommerce > Status > System Status auf veraltete Vorlagen. Unsere Einschätzung: Das gehört zur Pflicht aus § 14 Abs. 3 BFSG, Veränderungen bei der Art und Weise der Erbringung der Dienstleistung gebührend Rechnung zu tragen.

Barrieren in WooCommerce selbst können Sie laut WooCommerce über den Support oder per E-Mail an accessibility@woocommerce.com melden (Accessibility Features, gelesen am 19.10.2026).

Ihr nächster Schritt

Ein kostenloser Scan Ihrer Startseite zeigt Ihnen automatisch gefundene technische Probleme, etwa fehlende Alternativtexte, zu schwache Kontraste oder unbeschriftete Felder, und hilft Ihnen, die Checkliste oben gezielt abzuarbeiten. Automatische Werkzeuge finden nur einen Teil aller Barrieren; den Tastaturtest bis zur Bestellbestätigung, jede Zahlungsart und die Fragen an Ihre Plugin-Anbieter erledigen Sie zusätzlich von Hand.

Dieser Ratgeber ist keine Rechtsberatung. Im Zweifel klären Sie Ihren Fall mit der Bundesfachstelle Barrierefreiheit oder einer Anwältin oder einem Anwalt.

Stand: 19.10.2026. Quellen gelesen am 19.10.2026.