Blog
Die Barrierefreiheits-Checkliste für Shopify-, WooCommerce- & WordPress-Shops
Eine verständliche, plattformweise Fix-Liste für Shop-Betreiber. Was Ihr Theme kaputt ausliefert, welche Checkout-Strecken Behörden tatsächlich zitieren, warum Ein-Klick-„Barrierefreiheits-Apps“ ein Risiko sind — und was Sie heute selbst beheben können.
13 min read
Es gibt eine bequeme Lüge, die sich viele Shop-Betreiber erzählen: „Ich bin auf Shopify, also ist Barrierefreiheit erledigt.“
Ist sie nicht. Und die Plattformen selbst sagen das als Erste. Shopify stellt unmissverständlich klar: kein Theme ist out of the box vollständig barrierefrei. Die eigenen Theme-Anforderungen decken nur einen Bruchteil der WCAG-Erfolgskriterien ab. WooCommerce hat 2025 einen echten Meilenstein erreicht — aber mit einem Haken, von dem die meisten Shop-Betreiber nicht wissen, dass er sie betrifft.
Hier ist die Regel, die alle drei Plattformen verbindet, und der eine Satz zum Mitnehmen, falls Sie nichts sonst lesen: Die EAA macht Sie — den Händler — für den gesamten Shop verantwortlich. Ihr Theme, Ihre Anpassungen, Ihre installierten Apps, Ihre Produktinhalte. Die Plattform liefert ein Fundament. Was Sie darauf bauen, liegt bei Ihnen.
Dieser Leitfaden geht zuerst die gemeinsamen Fehler durch (die, die Behörden tatsächlich zitieren), dann die plattformspezifischen Fallen für Shopify, WooCommerce und WordPress.
Was Ihre Aufgabe ist vs. was die Plattform abdeckt
Genau deshalb ist eine pauschale Antwort auf „Ist Shopify konform?“ nutzlos. Konformität entsteht in Ihrem konkreten Theme, Ihren Apps und Ihren Inhalten — von denen keine eine Checkliste von außen sehen kann. (Und genau deshalb sagt ein Scan Ihres echten, live geschalteten Shops mehr aus als jeder Blogbeitrag. Mehr dazu am Ende.)
Die gemeinsame Checkliste: 6 Fehler, die Behörden tatsächlich zitieren
Quer durch die realen europäischen Durchsetzungsfälle — Vueling in Spanien, die französischen Händlerklagen, die deutsche Abmahnwelle — waren die scheiternden Seiten immer dieselben: Checkout, Formulare und Konto-Strecken. Und dieselbe Handvoll Probleme taucht auf der überwältigenden Mehrheit der E-Commerce-Seiten auf. Beheben Sie diese zuerst.
- Text und Buttons mit zu wenig Kontrast. Blasser grauer Text und kontrastarme „Designer“-Buttons sind der häufigste Fehler im Web — und für Menschen mit Sehbehinderung (und alle bei Sonnenlicht) unlesbar. Sie brauchen ein Kontrastverhältnis von 4,5:1 für Fließtext, 3:1 für großen Text.Oft selbst machbar
- Fehlender oder nutzloser Alt-Text bei Produktbildern. Eine Screenreader-Nutzerin hört nichts dort, wo Ihr Produktfoto ist — sie kann nicht erkennen, was sie kauft. „IMG_2043.jpg“ ist kein Alt-Text.Selbst machbar
- Formularfelder ohne echte Labels. Checkout- und Kontaktfelder, die sich auf einen Platzhalter verlassen, der beim Tippen verschwindet, oder gar kein Label haben, lassen Screenreader-Nutzende raten. Das ist seit Jahren der meistzitierte Formularfehler.Selbst oder Entwicklung
- Unbrauchbare oder stumme Fehlermeldungen. „Fehler“ ohne Erklärung — oder ein Fehler, der einem Screenreader nie angesagt wird — bringt einen Checkout zum Stillstand.Entwicklung
- Checkout per Tastatur nicht erreichbar. Wer keine Maus benutzen kann, muss sich per Tab durch Warenkorb → Kasse → Bestätigung bewegen können. Wenn der Fokus hängen bleibt oder die Fokus-Markierung unsichtbar ist, kann die Person nicht kaufen.Entwicklung
- Unbenannte Icon-Buttons. Warenkorb-, Such-, Hamburger- und Schließen-Icons brauchen einen zugänglichen Namen. Sonst sagt ein Screenreader nur „Schaltfläche“ an, und die Person weiß nicht, was sie tut.Entwicklung
Noch einer, weil Themes ihn lieben: automatisch rotierende Slider und Autoplay-Videos. Bewegter Inhalt, den man nicht pausieren kann, verursacht Probleme bei Menschen mit Gleichgewichtsstörungen und reißt langsameren Lesenden den Inhalt weg, bevor sie fertig sind. Wenn Ihre Startseiten-Slideshow ohne Pause-Button rotiert, schalten Sie sie ab — das ist eine Einstellung, keine Code-Änderung.
Shopify
Ihr Theme ist out of the box nicht konform — und Shopify sagt das. Selbst Dawn, Shopifys barrierefreiestes kostenloses Theme, kommt mit dokumentierten Lücken: unzureichende Fokus-Indikatoren, Tastatur- und Screenreader-Probleme in Modals/Slidern/Mega-Menüs, kontrastarmer Banner- und Menütext und eine Warenkorb-Lade mit ungeschickter Fokus-Führung. Shopifys eigene Aussage ist deutlich: Shopify kontrolliert die Plattform, Sie kontrollieren den Shop, und die Theme-Anforderungen decken nur einen Bruchteil von WCAG ab.
Was Sie bei einem Shopify-Shop prüfen sollten:
- Ihre Theme-Anpassungen. Dawn out of the box ist ordentlich; je mehr Sie Farben ändern, Sektionen ergänzen und einen Slider davorbauen, desto weiter driften Sie davon weg. Prüfen Sie Kontrast und Tastaturzugang nach jeder Theme-Änderung erneut.
- Checkout-Erweiterungen (Plus). Shopifys Checkout ist eine gute barrierefreie Basis — aber wenn Sie auf Plus sind und ihn mit Checkout-UI-Extensions angepasst haben, führen diese eigenen Komponenten regelmäßig wieder Fehler ein (Post-Purchase-Upsell-Modals ohne Dialog-Rollen, reine Drag-Mengenregler, eigene klickbare Elemente ohne Tastaturunterstützung).
- Jede installierte App. Bewertungs-Widgets, Upsells, Popups und Cookie-Banner schleusen ihr eigenes HTML ein und können Ihren barrierefreien Code überschreiben — Fokus-Fallen, unbeschriftete Schließen-Buttons, Sterne-Bewertungen ohne Textalternative. Shopifys App Store prüft Apps vor der Freigabe nicht auf Barrierefreiheit.
- Theme-Editor-Fallen: automatisch abspielende Slideshows, kontrastarme Farbschema-Presets und Hover-only-Mega-Menüs, die Tastatur- und Touch-Nutzende nicht öffnen können.
WooCommerce
Hier die gute Nachricht und der Haken, den niemand erwähnt. WooCommerce 10.0 (Juli 2025) ist, in WooCommerce’ eigenen Worten, „vollständig konform mit [WCAG] 2.2 Level AA … bei Verwendung mit einem Core-WordPress- oder accessibility-ready-Theme“. Das ist ein echter Meilenstein — über 140 Barrierefreiheits-Verbesserungen in Warenkorb, Produktgalerien und dem block-basierten Checkout.
Der Haken steckt in diesem Nebensatz. Das Konformitäts-Versprechen gilt nur, wenn zwei Dinge zutreffen:
- Sie nutzen die neuen Warenkorb-/Checkout-Blocks, nicht den Legacy-Shortcode
[woocommerce_checkout]. Viele ältere Shops und PHP-Hook-Erweiterungen laufen noch auf dem Shortcode-Checkout, der die neuen Arbeiten nicht erbt. - Sie nutzen ein Core- oder accessibility-ready-Theme. WooCommerce erbt die Barrierefreiheit des aktiven WordPress-Themes. Wenn Sie ein Premium-Theme oder einen Page-Builder (Elementor, Divi) einsetzen, haben Sie das Versprechen wahrscheinlich ausgehebelt — die Konformität ist nur so gut wie das Theme drumherum.
Die ehrliche Zusammenfassung für eine WooCommerce-Betreiberin lautet also: Ihre Plattform wurde 2025 dramatisch barrierefreier, aber Ihr konkreter Aufbau hat das wahrscheinlich nicht geerbt. Prüfen Sie zuerst, welchen Checkout Sie laufen lassen und auf welchem Theme Sie sind.
Ein wichtiger Mythos, den es zu töten gilt: Das „accessibility-ready“-Theme-Tag bedeutet nicht WCAG-AA-konform. Es bedeutet, dass das Theme die Mindesthürde des WordPress-Theme-Review-Teams genommen hat (Skip-Links, Tastaturnavigation, ARIA-Landmarks). Ein gutes Signal, kein Konformitäts-Zertifikat.
WordPress (Content- & Buchungs-Seiten)
Bei WordPress-Seiten, die keine reinen Shops sind — Broschüren-Seiten, Buchungsseiten, Lead-Gen —, verschieben sich die Probleme von der Kasse zu Inhalt und Formularen:
- Page-Builder (Elementor, Divi, WPBakery) erzeugen nicht-semantischen „Div-Brei“ und kaputte Überschriften-Hierarchien (fehlende H1, mehrere H1, übersprungene Ebenen). Elementor und Divi liefern inzwischen Remediation-Helfer, aber die Standard-Ausgabe braucht trotzdem eine Prüfung.
- Formular-Plugins unterscheiden sich stark. Gravity Forms ist bei Barrierefreiheit am stärksten. Contact Form 7 und WPForms lassen sich barrierefrei machen, kommen aber mit Lücken — schlecht beschriftete Checkbox-/Radio-Gruppen, nicht angesagte Fehler, fehlende Pflichtfeld-Semantik. Der wiederkehrende reale Fehler: Es ist einfach, reine Platzhalter-Felder zu aktivieren oder unbeschriftete eigene Felder hinzuzufügen.
- Die Content-Autoren-Falle. Gutenberg wird besser, aber Betreiber nutzen es als Design-Werkzeug — stapeln Absatz-Blöcke, wo Überschriften hingehören, fügen Listen als reinen Text ein. Das Ergebnis sieht gut aus und ist für einen Screenreader unlesbar. Nutzen Sie echte Überschriften-Blöcke und echte Listen-Blöcke.
Die Ein-Klick-„Barrierefreiheits-App“-Falle
Irgendwann verspricht Ihnen ein Plugin oder eine App, Sie mit einer Zeile Code konform zu machen. Kaufen Sie es nicht. Hier sind die Belege, nicht nur eine Meinung:
- Im April 2025 finalisierte die US-FTC eine Anordnung über 1 Mio. $ gegen accessiBe, den bekanntesten Overlay-Anbieter, wegen der irreführenden Behauptung, sein Widget könne jede Website WCAG-konform machen. Die Anordnung untersagt diese Behauptungen für 20 Jahre. Die FTC nannte ausdrücklich das Versprechen, „eine Zeile Code“ mache eine Seite konform.
- Das Overlay Fact Sheet, unterzeichnet von über 800 Barrierefreiheits-Fachleuten, stellt klar, dass Overlays die zugrunde liegenden Quellcode-Probleme nicht beheben können. Kein automatisches Widget repariert Tastatur-Fallen, Fokus-Reihenfolge oder sinnvollen Alt-Text.
- Overlays ziehen Klagen an, statt sie zu verhindern. In den USA haben hunderte Barrierefreiheits-Klagen das Overlay-Widget selbst als Barriere benannt.
Ein Overlay ist eine wiederkehrende Ausgabe, die rechtliches Risiko hinzufügt und strukturell nichts repariert. Echte Konformität heißt, die Quelle Ihres Themes zu reparieren — und das beginnt damit, genau zu wissen, was darin kaputt ist.
Kostenlose Tools, die Sie heute selbst nutzen können
Sie müssen nichts kaufen, um anzufangen. Das sind die kostenlosen Checker, die Shop-Betreiber tatsächlich nutzen:
Der ehrliche Vorbehalt, der für jedes automatische Tool gilt — kostenlos oder kostenpflichtig, auch unseres: Sie finden grob 30–40 % der WCAG-Probleme. Die übrigen 60–70 % (Tastatur-Fallen, Fokus-Reihenfolge, sinnvoller Alt-Text, das echte Screenreader-Erlebnis) brauchen menschliches Testen. Ein Scan ist ein Ausgangspunkt und eine Triage-Liste, kein Zertifikat. Wer Ihnen etwas anderes erzählt, verkauft ein Overlay.
Heute selbst machen vs. Entwicklerin holen
Wo Sie anfangen
Wenn Sie diesen Monat drei Dinge tun, dann diese: Schalten Sie jede Autoplay-Slideshow ab, beheben Sie Kontrast und Alt-Text selbst, und finden Sie heraus, ob Ihr Checkout allein mit der Tastatur funktioniert. Letzteres ist die Stelle, auf die sich jeder reale Durchsetzungsfall konzentriert hat.
Hören Sie auf zu raten, welches Template scheitert
Eine generische Checkliste sieht Ihr Theme, Ihre Apps und Ihre Inhalte nicht — die drei Orte, an denen Konformität tatsächlich lebt. Webply scannt Ihre echten Shopify-, WooCommerce- oder WordPress-Templates gegen WCAG 2.1 AA, sortiert die Funde nach EAA-Rechtsrisiko und gibt Ihrer Entwicklerin eine priorisierte Fix-Liste. Keine Kreditkarte, kein Overlay.
Weiterführend
Quellen
- Shopify — Accessibility for themes und das Dawn-Theme-VPAT.
- WooCommerce — WooCommerce 10.0: Investing in Accessibility (volle WCAG-2.2-AA-Konformität mit Core-/accessibility-ready-Theme).
- WordPress — Theme-Review-Barrierefreiheits-Anforderungen (was das „accessibility-ready“-Tag bedeutet).
- Overlays — FTC-Endanordnung, accessiBe zu 1 Mio. $ zu verpflichten (April 2025); das Overlay Fact Sheet.
- Häufige Fehler — WebAIM Million, jährliche Barrierefreiheits-Analyse.
Dieser Artikel ist informativ und keine Rechtsberatung. Bei einer konkreten Beschwerde ziehen Sie eine qualifizierte Anwältin für Barrierefreiheit in Ihrer Jurisdiktion hinzu.