Shopify Barrierefreiheit: Was ein gekauftes Theme abdeckt und was Du selbst prüfen musst

Wer sich mit Shopify Barrierefreiheit beschäftigt, landet schnell bei der Frage, ob das gekaufte Theme die Arbeit schon erledigt hat. Es erledigt einen Teil davon, aber nicht alles. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) auch für Onlineshops, und ein Theme aus dem Theme Store bringt dafür eine geprüfte Grundlage mit. Was Du danach mit Farben, Bildern, Texten und Apps machst, hat Shopify ja nicht geprüft.

Unten steht, für wen die Pflicht eigentlich gilt, was Shopify von einem Theme verlangt und wie Du Deinen Shop mit zehn Prüfpunkten selbst durchgehst. Danach geht es darum, was Du im Editor behebst und wofür Du den Theme-Anbieter oder einen Entwickler brauchst.

Ich bin kein Anwalt und beschreibe hier die technische Seite. Ob Dein Shop unter das Gesetz fällt und was in Deine Erklärung zur Barrierefreiheit gehört, klären der Händlerbund, die IT-Recht Kanzlei oder Deine eigene Rechtsberatung.

1Shopify Barrierefreiheit und BFSG: Für wen die Pflicht gilt

Das BFSG setzt den European Accessibility Act um, die Richtlinie (EU) 2019/882. Es erfasst unter anderem „Dienstleistungen im elektronischen Geschäftsverkehr“. Nach der Definition im Gesetz sind das Angebote auf Websites und in Apps, über die Verbraucher Verträge abschließen, also auch ein Onlineshop für Privatkunden.

Ausgenommen sind Kleinstunternehmen, soweit sie Dienstleistungen anbieten. Das Gesetz meint damit Unternehmen mit weniger als zehn Beschäftigten, die höchstens 2 Millionen Euro Jahresumsatz erzielen oder deren Bilanzsumme höchstens 2 Millionen Euro beträgt. Teilzeitkräfte zählen laut Händlerbund anteilig. Für bestimmte Produkte wie E-Book-Reader, Smartphones, Laptops und Router gilt sie nach derselben Quelle nicht.

Weil das Gesetz auf Verbraucher abstellt, fällt ein reiner B2B-Shop nach einer Auswertung der Leitlinien des Bundesarbeitsministeriums nicht darunter. Das gilt nach dieser Einschätzung aber nur, wenn Privatkunden dort tatsächlich nicht bestellen können, ein Satz in den AGB reicht dafür nicht.

Der technische Maßstab ist die Norm EN 301 549. Sie verweist für Websites auf die WCAG 2.1 in den Stufen A und AA, so beschreibt es die Bundesfachstelle Barrierefreiheit.

Zuständig ist die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) in Magdeburg. § 37 BFSG sieht bis zu 100.000 Euro Bußgeld vor, wenn jemand eine Dienstleistung anbietet, die die Anforderungen nicht erfüllt. Für andere Verstöße sind es bis zu 10.000 Euro. Nach einem Bericht vom Juli 2026 kontrolliert die MLBF seit Januar 2026 aktiv und geht vorrangig Beschwerden nach. Öffentlich dokumentierte Bußgelder gegen einzelne Anbieter waren dort bis zu diesem Zeitpunkt nicht bekannt.

2Was ein Theme aus dem Theme Store mitbringt

Shopify nimmt ein Theme nur in den Theme Store auf, wenn es eine Reihe von Anforderungen erfüllt. Zur Barrierefreiheit stehen in den aktuellen Anforderungen diese Punkte.

• Der Lighthouse-Wert für Barrierefreiheit liegt im Durchschnitt bei mindestens 90, gemessen auf Startseite, Produktseite und Kollektionsseite.
• Alle Teile der Seite lassen sich mit der Tastatur bedienen, auch Dropdown-Menüs.
• Fokussierte Elemente zeigen einen sichtbaren Fokus, und die Reihenfolge beim Tabben folgt dem Aufbau der Seite.
• Fließtext hat einen Kontrast von mindestens 4,5 zu 1. Für große Schrift, Icons und Rahmen gilt 3 zu 1.
• Touch-Ziele sind mindestens 24 mal 24 CSS-Pixel groß.
• Formularfelder haben ein verknüpftes Label, und jedes Bild hat ein alt-Attribut.

Gemessen wird das allerdings an der Demo. In einem Beitrag für Theme-Entwickler von 2021 steht, dass ein Theme barrierefreie Voreinstellungen mitbringen muss und nur die Standard-Demo getestet wird. Die Prüfung beschreibt also erstmal nur den Zustand, in dem Du das Theme installierst.

Für Dawn hat Shopify außerdem einen Accessibility Conformance Report veröffentlicht, datiert auf November 2021. Kein Kriterium der WCAG 2.1 in den Stufen A und AA ist dort als nicht erfüllt eingestuft, mehrere aber als nur teilweise erfüllt, darunter der Mindestkontrast. Der Bericht ist einige Jahre alt und sagt nichts über die heutige Version von Dawn. Für Themes anderer Anbieter kenne ich keinen vergleichbaren öffentlichen Bericht, frag dort am besten mal nach.

Nicht jedes Theme hat diese Prüfung durchlaufen. Ein Theme, das Du vor Jahren gekauft und seitdem nicht aktualisiert hast, entspricht möglicherweise nicht dem heutigen Stand. Ein Theme von einem anderen Marktplatz hat die Prüfung von Shopify gar nicht durchlaufen. Wie Du ein Theme aktualisierst, ohne Deine Anpassungen zu verlieren, steht im Beitrag zum Theme-Update.

3Was beim Theme aufhört und bei Dir anfängt

Shopify schreibt in der eigenen Hilfe, dass die Richtlinien für Themes mit den WCAG im Blick entstanden sind und trotzdem keinen vollständig barrierefreien Shop garantieren. Das liegt ja daran, dass Du mit jeder Änderung an der Demo über einen Teil dessen entscheidest, was geprüft wurde.

Für die rechte Spalte gibt Shopify in der Hilfe schon konkrete Werte vor. Fließtext und Buttontext brauchen 4,5 zu 1 gegen den Hintergrund, Überschriften und großer Text ab 24 Pixel 3 zu 1. Dieselben Werte gelten für Text auf Bildern, Slideshows und Videos.

4Zehn Prüfpunkte für Deinen Shop

Für den ersten Durchgang brauchst Du die Tabulatortaste, einen Kontrastrechner wie den WebAIM Contrast Checker und ein automatisches Werkzeug. Shopify nennt in den Hinweisen für Theme-Entwickler Lighthouse, WAVE und Accessibility Insights for Web. Geh die Liste auf der Startseite, einer Kollektionsseite, einer Produktseite und im Warenkorb durch.

1. Geh einmal mit der Tabulatortaste von der Startseite bis in den Checkout. Du musst jedes Menü, jeden Filter und jeden Button erreichen und mit Enter oder Leertaste auslösen können.
2. Achte dabei auf den Fokus, also den Rahmen um das aktive Element. Fehlt er, prüf, ob jemand den Fokus-Stil im CSS entfernt hat. Shopify rät in der Hilfe ausdrücklich davon ab.
3. Miss den Kontrast Deiner Markenfarben, Sale-Badges, Streichpreise und hellgrauen Hinweistexte gegen die Werte aus Abschnitt 3.
4. Prüf Text auf Bannern und Slideshows gesondert, weil das Foto dahinter wechselt. Manche Themes bieten dafür eine Farbfläche zwischen Bild und Text.
5. Vergib Alt-Texte für Produktbilder im Admin und für Bilder in Sections im Theme-Editor. Der Produkttitel allein genügt nach den Vorgaben für Theme-Entwickler nicht. Auch eine Grafik mit Pflichtinhalt wie das Gewährleistungslabel braucht einen Alt-Text.
6. Kontrolliere, ob jede Seite eine H1 hat und die Überschriften der Reihe nach folgen, ohne eine Ebene zu überspringen.
7. Sieh Dir Kontaktformular, Newsletter und Kundenkonto an. Jedes Feld braucht ein Label, ein Platzhaltertext zählt dabei nicht, und Fehlermeldungen stehen als Text am Feld.
8. Stell sicher, dass Slideshows und Videos nicht von selbst starten oder sich anhalten lassen. Videos mit Sprache brauchen Untertitel und ein Transkript.
9. Öffne Menü, Warenkorb-Drawer und Pop-ups mit der Tastatur. Der Fokus springt in das Fenster, Escape schließt es, und danach steht der Fokus wieder auf dem Element, das es geöffnet hat.
10. Wiederhol den Durchgang am Handy und vergrößere den Text im Browser auf 200 %. Buttons und Links müssen groß genug für den Finger sein, und die Seite muss bedienbar bleiben.

Ein automatischer Test findet eben nur einen Teil der Fehler. Lighthouse erkennt ein fehlendes alt-Attribut, aber es kann nicht beurteilen, ob der Text das Bild beschreibt. Deshalb gehört nach der Liste ein Durchgang mit einem Screenreader dazu, etwa mit VoiceOver auf dem iPhone oder TalkBack auf Android.

5Checkout, Apps und Cookie-Banner: Wer wofür zuständig ist

Den Checkout baut und betreibt Shopify. In einem Beitrag von 2024 beschreibt Shopify, wie er geprüft wird. Automatische Tests laufen fortlaufend, und vierteljährlich gibt es Sitzungen mit Menschen mit Behinderungen, die Hilfstechnik nutzen. Bei Dir bleiben Logo, Farben und Schriften, die Du im Checkout einstellst, und die Erweiterungen von Apps. Für sie schreibt Shopify, dass App-Entwickler die Regeln selbst anwenden müssen.

Für Apps gilt die Prüfung des Themes nicht. Bewertungs-Widgets, Chat, Pop-ups für den Newsletter, Upsell-Fenster und der Cookie-Banner bringen ihren eigenen Code mit. Teste jedes dieser Elemente einmal mit der Tastatur, den Cookie-Banner zuerst, und frag den Anbieter nach einer Aussage zur Barrierefreiheit. Welche Apps sich ein Shop sparen kann, steht in der App-Liste für den Start.

6Die Erklärung zur Barrierefreiheit: Was hineingehört

Zur Pflicht gehört neben dem Shop selbst eine Information für die Öffentlichkeit. § 14 BFSG verlangt, dass Du die folgenden Angaben aus Anlage 3 des Gesetzes erstellst und barrierefrei zugänglich machst.

• Eine allgemeine Beschreibung der Dienstleistung in einem barrierefreien Format.
• Beschreibungen und Erläuterungen, die man braucht, um die Durchführung der Dienstleistung zu verstehen.
• Eine Beschreibung, wie die Dienstleistung die Anforderungen an die Barrierefreiheit erfüllt.
• Die zuständige Marktüberwachungsbehörde.

Die Angaben stehen in den AGB oder an einer anderen deutlich wahrnehmbaren Stelle. In Shopify bietet sich eine eigene Seite an, die Du im Footer neben Impressum und Datenschutz verlinkst. Frag Deinen Anbieter für Rechtstexte nach einem Muster. Der technische Teil, also was erfüllt ist und was noch nicht, kommt aus Deiner eigenen Prüfung.

7Warum ein Overlay-Widget die Prüfung nicht ersetzt

Im Shopify App Store gibt es in der Kategorie Barrierefreiheit eine Reihe von Widgets, zum Beispiel „ADA Accessibility Widget by AP“ oder „Ez Accessibility Widget“. Sie legen eine Bedienleiste über den Shop und werben mit Konformität zu WCAG, EAA oder BFSG, mehrere davon mit kostenlosem Tarif.

Die US-Handelsaufsicht FTC hat allerdings im April 2025 eine Anordnung gegen den Anbieter accessiBe bestätigt. Er zahlt 1 Million US-Dollar und darf ohne Belege nicht mehr behaupten, sein automatisches Produkt mache Websites WCAG-konform. Die Prüfstellen des BIK BITV-Tests schreiben in ihrem Prüfverfahren, dass sie für Websites mit Overlay-Tool keine sichere Aussage zur Konformität treffen können und kein Prüfzeichen vergeben.

Ein Menü, das mit der Tastatur nicht erreichbar ist, oder ein Formularfeld ohne Label bleibt unter dem Widget ja so, wie es im Theme gebaut ist. Etwas anderes sind Helfer für einzelne Aufgaben. Apps wie AltKing oder AltText.ai schlagen Alt-Texte per KI vor, die Du vor dem Übernehmen gegenlesen solltest.

8Selbst beheben, Theme-Anbieter fragen oder Entwickler holen

Nach der Prüfung hast Du erstmal eine Liste mit Fundstellen. Sie lässt sich danach sortieren, wer den Fehler beheben kann.

Was Du selbst im Admin und im Editor löst

Farben im Theme-Editor, Alt-Texte, die Reihenfolge der Überschriften, Linktexte, Autoplay in Slideshows und die Seite mit der Erklärung zur Barrierefreiheit brauchen keinen Code.

Was der Theme-Anbieter liefern sollte

Tritt ein Fehler im unveränderten Theme auf, etwa ein Menü, aus dem die Tastatur nicht mehr herauskommt, ist das ein Fall für den Support des Anbieters. Aktualisiere das Theme aber zuerst auf die neueste Version und beschreib dann Seite, Schritte und Browser.

Wofür Du einen Entwickler brauchst

Eigene Sections, angepasster Code und Fehler, die der Anbieter nicht behebt, sind Code-Arbeit. Bei einem Custom Theme gibt es keinen Anbieter, der die Anforderungen des Theme Stores für Dich erfüllt hat. Die Punkte aus Abschnitt 4 gehören dann in die Abnahme. Planst Du ohnehin einen neuen Shop, nimm sie am besten schon in den Aufbau des Shops mit auf.