SevirantaIhren WooCommerce-Shop barrierefrei machen: ein praktischer Leitfaden
9. Juni 2026
Kurze Antwort. WooCommerce selbst folgt den WordPress-Barrierefreiheitsrichtlinien recht ordentlich, aber Ihr Shop erbt vor allem die Barrierefreiheit von Ihrem Theme, Ihren Plugins und Ihrem Content — und da geht es meist schief. Gehen Sie die sechs Punkte unten durch (Kontrast, Alt-Texte, Überschriften, Plugins & Page-Builder, Tastatur, Sprache) und achten Sie besonders auf Ihre Block-Checkout und Ihre Produktfilter; dann haben Sie den Löwenanteil im Griff.
Warum reicht WooCommerce allein nicht aus?
WooCommerce ist ein Plugin oben auf WordPress. Ob Ihr Shop WCAG erfüllt, hängt davon ab, wie Ihr Theme gebaut ist, welche Farben Sie gewählt haben, welche Plugins und welchen Page-Builder Sie nutzen und wie Sie Ihre Produkte gepflegt haben. Zwei Shops mit derselben WooCommerce-Version können also völlig unterschiedlich abschneiden. Die gute Nachricht: Weil vieles über Ihr Theme und Ihre Templates wiederkehrt, deckt eine Korrektur oft Hunderte Seiten ab.
1. Prüfen Sie Ihren Farbkontrast
Der häufigste Fehler. Bei einem Block-Theme (Full Site Editing) gehen Sie zu Design → Editor → Stile → Farben; bei einem klassischen Theme zu Design → Anpassen → Farben. Sorgen Sie dafür, dass Text und Hintergrund mindestens 4,5:1 Kontrast haben (3:1 für großen Text). Achten Sie besonders auf den Text auf Ihrem In den Warenkorb-Button, Preis- und Angebotslabels und Links. Einmal richtig eingestellt, gilt es shopweit. Siehe Farbkontrast: die WCAG-Anforderung und wie Sie ihn messen.
2. Geben Sie Ihren Produktfotos Alt-Texte
Öffnen Sie ein Produkt unter Produkte, klicken Sie im Produktbild (und in der
Produktgalerie) auf das Bild → füllen Sie in der Mediathek das Feld Alternativer Text
aus. Beschreiben Sie kurz und sachlich, was zu sehen ist (z. B. „Schwarzer Herrenschuh aus
Wildleder mit Schnürung"), keine Marketingsprache. Beginnen Sie bei Ihren meistverkauften
Produkten und Ihren Homepage-Bannern. Dekorative Bilder erhalten ein leeres Alt-Attribut
(alt=""). Mehr dazu in
Alt-Texte schreiben, die funktionieren.
3. Prüfen Sie Ihre Überschriftenstruktur
Verwenden Sie Überschriften in logischer Reihenfolge (H1 → H2 → H3) und nicht nur zur Optik. Im Block-Editor (Gutenberg) sehen Sie pro Überschriftenblock die Ebene; überspringen Sie keine Ebenen. Achten Sie auf Page-Builder wie Elementor oder Divi: Die lassen Sie jeden Text groß formatieren, ohne dass es eine echte Überschrift wird — wählen Sie dort bewusst die richtige Überschriftenebene.
4. Achten Sie auf Ihre Plugins und Ihren Page-Builder
Das ist oft die größte Fehlerquelle. Plugins für Bewertungen, Chat, Pop-ups, Slider und Filter — und schwere Page-Builder — injizieren ihren eigenen Code in Ihr Theme, und der enthält häufig Buttons ohne Namen, falsches ARIA oder Elemente, die sich nicht mit der Tastatur bedienen lassen. Installieren Sie also nicht blindlings jedes Plugin und testen Sie Ihre Website immer mit allem aktiviert. Erweist sich ein Plugin als nicht barrierefrei, steigen Sie auf eine Alternative um, die die WCAG-Normen einhält. Wählen Sie wo möglich die neuen WooCommerce-Blöcke für Warenkorb und Kasse (siehe Punkt 6).
5. Testen Sie mit der Tastatur
Probieren Sie Ihre Website einmal ganz ohne Maus: nur mit der Tab-Taste und Enter. Erreichen
Sie alles — Menü, Produktfilter, Variationsauswahl, Warenkorb, Kasse — und sehen Sie jederzeit,
wo der Fokus steht? Achten Sie bei WooCommerce speziell auf die Variations-Dropdowns, den
Mengen-Stepper (+/−) und die Filter-Widgets in Ihrer Seitenleiste; das sind die Stellen,
an denen die Tastatur oft hängen bleibt.
6. Prüfen Sie Ihre Spracheinstellung und Ihre Kasse
Sorgen Sie dafür, dass Ihr Theme das richtige Sprachattribut setzt, damit ein Screenreader die
korrekte Aussprache wählt. In einem klassischen Theme steht in der header.php die Zeile
<html <?php language_attributes(); ?>> — die sollte das Sprachattribut enthalten. Nutzen Sie
WPML oder Polylang für mehrere Sprachen, prüfen Sie, dass jede Sprachversion das richtige
lang-Attribut erhält. Steigen Sie vorzugsweise auf die block-basierten Cart- und
Checkout-Blöcke von WooCommerce um: Die sind barrierefreier als die alte Shortcode-Kasse und
werden aktiv auf Barrierefreiheit gepflegt.
Häufige WooCommerce-Fehler und ihre Korrektur
| WooCommerce-Element | Häufiger Fehler | Die Korrektur |
|---|---|---|
| „In den Warenkorb"-Button | zu helle Schrift / niedriger Kontrast | Kontrast in den Theme-Stilen auf mindestens 4,5:1 |
| Produktfotos | Dateiname als Beschreibung (IMG_2043.jpg) | funktionaler Alt-Text in der Mediathek |
Mengen-Stepper (+/−) | Buttons ohne Label, nicht mit Tastatur bedienbar | Label/aria-label hinzufügen oder eine barrierefreie Variante nutzen |
| Produktfilter-Widget | Filter nur mit der Maus nutzbar | barrierefreies Filter-Plugin oder die WooCommerce-Filterblöcke |
| Barrierefreiheits-Plugin | ein Overlay-Widget installieren | vermeiden — repariert Ihren Code nicht und schützt nicht vor Klagen |
Hilft ein Barrierefreiheits-Plugin aus dem WordPress-Plugin-Verzeichnis?
Nein. Suchen Sie nach „accessibility", finden Sie Dutzende Plugins, die versprechen, Ihren Shop mit einem Klick per Widget compliant zu machen. Fallen Sie nicht darauf herein: Sie reparieren Ihr Theme und Ihre Templates nicht, und Aufsichtsbehörden prüfen den rohen Quellcode Ihres Shops. Das strukturelle Lösen in Theme und Content ist der einzige Weg, der standhält — und es bringt Ihnen besseres SEO und eine schnellere Ladezeit. Mehr dazu in warum ein Overlay-Widget Sie nicht schützt.
Erfüllt mein WooCommerce-Shop damit das Gesetz?
Diese sechs Punkte decken den größten Teil dessen ab, was ein automatisierter Test feststellt, aber „erfüllen" geht weiter: Es hängt von Ihrem gesamten Theme, Ihren Plugins und Ihrem Content zusammen ab. Ob der European Accessibility Act auf Sie zutrifft, lesen Sie in unserer Checkliste. Arbeiten Sie auch mit Shopify? Dann hilft Ihnen unser Shopify-Leitfaden weiter.
Wie weiß ich, wo mein WooCommerce-Shop aktuell steht?
Der schnellste Weg: Scannen Sie kostenlos eine Seite. Sie sehen pro Befund, was falsch ist und wie Sie es lösen — und weil vieles über Ihr Theme und Ihre Templates läuft, lösen Sie es oft in einem Zug für Ihren gesamten Shop. In weniger als 60 Sekunden, ohne Konto.