Shopify und BFSG: So wird dein Shop barrierefrei

Du betreibst einen Shopify-Shop und hast vom BFSG gehoert. Vielleicht ueber einen Newsletter, vielleicht ueber die Abmahnwelle die seit Mitte 2025 durch den deutschen E-Commerce rollt. Jetzt willst du wissen: Was muss ich konkret tun, und wie viel davon kann Shopify fuer mich loesen?

Die ehrliche Antwort: Shopify liefert eine solide technische Basis, aber dein Shop ist nicht automatisch BFSG-konform. Kein Theme, kein Plugin und keine App macht das fuer dich komplett. Die gute Nachricht: Die meisten Anpassungen sind machbar, viele davon ohne Entwickler. Dieser Artikel zeigt dir Schritt fuer Schritt, was du pruefen und aendern musst.

Warum dein Shopify-Shop unter das BFSG faellt

Das Barrierefreiheitsstaerkungsgesetz ist seit dem 28. Juni 2025 in Kraft. Es verpflichtet alle Unternehmen die digitale Dienstleistungen an Endverbraucher anbieten, ihre Angebote barrierefrei zu gestalten. Ein Online-Shop zaehlt rechtlich als Dienstleistung im elektronischen Geschaeftsverkehr, und damit faellt praktisch jeder B2C-Shopify-Shop unter das Gesetz.

Ausgenommen sind nur Kleinstunternehmen, die gleichzeitig weniger als 10 Beschaeftigte haben und unter 2 Mio. Euro Jahresumsatz oder Bilanzsumme bleiben. Beide Bedingungen muessen gleichzeitig erfuellt sein. Wenn du allein arbeitest und unter 2 Mio. Euro umsetzt, bist du raus. Sobald du einen der beiden Schwellwerte ueberschreitest, giltst du als BFSG-pflichtig.

Fuer alle anderen gilt: WCAG 2.1 Level AA ist der technische Standard, den das BFSG ueber die europaeische Norm EN 301 549 vorschreibt. Das sind ueber 50 Erfolgskriterien, von denen rund 30 bis 40 Prozent automatisch pruefbar sind und der Rest manuelles Testing erfordert.

Wie steht dein Shopify-Shop gerade da?
Der kostenlose BFSG-Scanner prueft deinen Shop in unter 60 Sekunden auf WCAG-2.1-Verstoesse und zeigt dir eine priorisierte Liste mit konkreten Fixes.
→ Jetzt kostenlos pruefen

Was Shopify von Haus aus mitbringt

Shopify-Themes basieren auf Liquid-Templates und modernem HTML. Die Standard-Themes von Shopify (Dawn, Sense, Craft und andere aus der Online Store 2.0 Generation) bringen bereits einige Barrierefreiheits-Grundlagen mit:

Semantisches HTML: Die meisten Standard-Themes nutzen korrekte HTML5-Elemente wie <header>, <main>, <footer>, <nav>. Das ist die Basis fuer Screenreader und andere assistive Technologien.

Responsive Design: Shopify-Themes sind standardmaessig responsive. Das ist relevant fuer WCAG 1.4.4 (Resize Text), weil Inhalte bei 200 Prozent Zoom nicht abgeschnitten werden duerfen.

Grundlegende Tastaturnavigation: Die Kern-Navigation (Menue, Links, Buttons) ist in den meisten Standard-Themes per Tastatur bedienbar. Das ist allerdings oft nur die Oberflaeche.

Alt-Text-Felder fuer Bilder: Shopify bietet in der Medienverwaltung ein Feld fuer Alt-Texte. Ob es befuellt wird, liegt an dir.

Wo Shopify-Themes typischerweise durchfallen

Trotz der soliden Basis gibt es systematische Schwachstellen, die in fast jedem Shopify-Shop auftreten. Das sind die haeufigsten Verstoesse die der BFSG-Scanner bei Shopify-Shops findet:

Farbkontraste (WCAG 1.4.3)

Die Standardfarben vieler Themes erfuellen nicht den geforderten Mindestkontrast von 4,5:1 fuer normalen Text. Besonders betroffen sind Placeholder-Texte in Formularfeldern, ausgegraute Preise bei Sale-Artikeln und Footer-Links auf dunklem Hintergrund. In den aktuellen Abmahnwellen ist der Farbkontrast einer der am haeufigsten gerruegten Verstoesse.

Fix: Gehe in den Theme-Editor unter Online Store → Themes → Customize. Pruefe alle Farbkombinationen mit einem Kontrastrechner wie dem WebAIM Contrast Checker. Erhoehe den Kontrast, indem du dunklere Textfarben oder hellere Hintergruende verwendest. Faustregel: Schwarz (#1D1D1F) auf Weiss (#FFFFFF) hat ein Verhaeltnis von 16,5:1, das ist sicher. Grau (#999999) auf Weiss (#FFFFFF) hat nur 2,8:1, das ist zu wenig.

Fehlende Alt-Texte (WCAG 1.1.1)

Shopify stellt das Feld bereit, aber die Mehrheit der Shop-Betreiber laesst es leer. Jedes Produktbild, jedes Banner, jedes Kategoriebild braucht einen beschreibenden Alt-Text. Dekorative Bilder (rein gestalterische Elemente ohne informativen Inhalt) bekommen ein leeres alt="", damit Screenreader sie ueberspringen.

Fix: Gehe zu Products → Medien → klicke auf ein Bild → fuege im Feld "Alt text" eine Beschreibung ein. Beispiel: "Schwarzer Leder-Rucksack mit Laptop-Fach, seitliche Ansicht" statt nur "Rucksack" oder gar nichts.

Formular-Labels (WCAG 1.3.1)

Checkout-Formulare, Newsletter-Anmeldungen und Kontaktformulare haben oft nur Placeholder-Text als Beschriftung. Sobald der Nutzer ins Feld klickt, verschwindet die Beschriftung. Das ist fuer Screenreader-Nutzer ein Problem, weil Placeholder kein zuverlaessiges Label ist. Einige Themes verwenden bereits <label>-Elemente, viele aeltere oder Drittanbieter-Themes nicht.

Fix: Im Theme-Code (Liquid) sicherstellen dass jedes <input> ein zugehoeriges <label for="field-id"> hat. Falls du den Code nicht selbst aendern willst, pruefe ob dein Theme ein Update anbietet das dieses Problem behebt.

Ueberschriften-Hierarchie (WCAG 1.3.1)

Shopify-Themes nutzen Ueberschriften-Ebenen oft nach visuellen Kriterien statt nach semantischer Hierarchie. Eine Produktseite hat dann zum Beispiel eine H1 fuer den Shop-Namen, eine H3 fuer den Produktnamen und eine H5 fuer die Beschreibung. Das verwirrt Screenreader-Nutzer, die per Ueberschriften-Navigation durch die Seite springen.

Fix: Pro Seite genau eine H1, die den Hauptinhalt beschreibt (auf der Produktseite: der Produktname). Danach H2, H3 in logischer Reihenfolge ohne Spruenge.

Tastaturbedienung von Drittanbieter-Apps (WCAG 2.1.1)

Hier wird es kritisch: Sobald du Shopify-Apps fuer Slider, Filter, Quick-View-Modals oder Cookie-Banner installierst, fuegen diese oft HTML und JavaScript ein das nicht per Tastatur bedienbar ist. Ein Produktfilter der sich nur per Mausklick oeffnen laesst, ein Modal das den Fokus nicht faengt, ein Slider der keine Pause-Funktion hat. Jede installierte App ist ein potenzieller neuer Verstoess.

Fix: Teste jede installierte App per Tastatur (nur Tab, Enter, Escape, Pfeiltasten). Wenn du nicht durch alle Funktionen navigieren kannst, kontaktiere den App-Anbieter oder ersetze die App. Ein barrierefreier Shop mit drei Apps ist besser als ein Shop mit 15 Apps von denen acht Barrieren einbauen.

Die 10-Punkte-Checkliste fuer deinen Shopify-Shop

Arbeite diese Liste von oben nach unten ab. Die Reihenfolge entspricht der Haeufigkeit, mit der diese Verstoesse in Abmahnschreiben auftauchen.

1. Farbkontraste pruefen und korrigieren — alle Text-Hintergrund-Kombinationen auf 4,5:1 bringen
2. Alt-Texte fuer alle Produktbilder — jedes Bild beschreiben, dekorative Bilder alt="" setzen
3. Formular-Labels — jedes Eingabefeld mit einem sichtbaren <label> versehen
4. Ueberschriften-Hierarchie — eine H1 pro Seite, keine Spruenge (H1 → H2 → H3)
5. Tastaturnavigation — Tab durch den gesamten Checkout, alle Menues und Filter
6. Fokus-Indicator — sichtbarer Rahmen um fokussierte Elemente (kein outline: none im CSS)
7. Automatische Inhalte pausierbar — Slider, Karussells und Animationen muessen eine Pause-Funktion haben
8. Fehlermeldungen klar formuliert — nicht nur rot markieren, sondern textuell beschreiben was falsch ist
9. Zoom auf 200 Prozent — kein Inhalt darf abgeschnitten werden oder horizontal scrollen erfordern
10. Barrierefreiheitserklaerung — Pflicht nach § 14 BFSG, muss im Footer verlinkt sein

Detaillierte Informationen zum BFSG-Check fuer Shopify findest du auf unserer Shopify-Landingpage.

Theme-Wahl: Welches Shopify-Theme ist am barrierefreisten?

Die Standard-Themes aus Shopifys Online Store 2.0 Generation sind der sicherste Ausgangspunkt. Besonders Dawn, Shopifys kostenloses Referenz-Theme, wird aktiv auf Barrierefreiheit optimiert und bekommt regelmaessige Updates.

Empfehlung nach Barrierefreiheit:

Dawn ist die beste Wahl wenn du ein kostenloses, gut gewartetes Theme mit solider Accessibility-Basis suchst. Es verwendet semantisches HTML, hat korrekte ARIA-Attribute und unterstuetzt Tastaturnavigation besser als die meisten Drittanbieter-Themes.

Bei Premium-Themes gilt: Pruefe vor dem Kauf ob der Theme-Entwickler Barrierefreiheit explizit als Feature nennt und ob das Theme regelmaessig aktualisiert wird. Ein Theme das seit 2023 kein Update bekommen hat, wird die WCAG-2.1-Anforderungen wahrscheinlich nicht erfuellen.

Vermeide Themes die stark auf visuelle Effekte setzen: Parallax-Scrolling, Auto-Play-Videos, komplexe Hover-Animationen. Jedes dieser Features ist ein potenzieller Verstoess und erfordert zusaetzliche Arbeit fuer die Barrierefreiheit.

BFSG-Check fuer deinen Shopify-Shop
Pruefe in 60 Sekunden welche WCAG-Verstoesse dein aktuelles Theme hat. Du bekommst eine priorisierte Liste mit konkreten Loesungsvorschlaegen.
→ Shopify-Shop jetzt pruefen

Shopify-Apps und Barrierefreiheit

Apps sind das groesste Risiko fuer die BFSG-Konformitaet deines Shops. Jede App die HTML in deine Seite injiziert, kann neue Barrieren einfuegen. Cookie-Banner die nicht per Tastatur bedienbar sind, Produktfilter ohne ARIA-Labels, Newsletter-Popups die den Fokus nicht zuruecksetzen.

Was du tun kannst:

Erstens: Minimiere die Anzahl installierter Apps. Jede App die du nicht brauchst, ist eine potenzielle Barriere weniger.

Zweitens: Teste jede verbleibende App per Tastatur. Navigiere mit Tab durch alle Elemente, oeffne und schliesse Dialoge mit Enter und Escape, bediene Slider mit Pfeiltasten. Wenn das nicht funktioniert, ist die App nicht barrierefrei.

Drittens: Kontaktiere App-Entwickler und frage nach WCAG-Konformitaet. Serioeose Anbieter koennen dir eine Aussage dazu machen. Wenn die Antwort ausweichend ist, suche eine Alternative.

Viertens: Teste nach jeder App-Installation oder jedem Update erneut. Ein Update kann neue Barrieren einfuehren.

Die Barrierefreiheitserklaerung fuer Shopify-Shops

Was viele Shopify-Betreiber nicht wissen: Neben der technischen Barrierefreiheit bist du nach § 14 BFSG auch verpflichtet, eine Barrierefreiheitserklaerung auf deiner Website zu veroeffentlichen. Das ist eine eigene Pflicht, unabhaengig davon ob dein Shop technisch konform ist oder nicht.

Die Erklaerung muss enthalten:

• Den Konformitaetsstatus deiner Website (vollstaendig konform, teilweise konform, nicht konform)
• Bekannte Einschraenkungen und Barrieren mit Begruendung
• Einen Feedback-Mechanismus fuer Nutzer die Barrieren melden wollen
• Kontaktdaten fuer Anfragen zur Barrierefreiheit

In Shopify legst du dafuer eine neue Seite an unter Online Store → Pages → Add page. Titel: "Barrierefreiheitserklaerung". Verlinke die Seite im Footer deines Shops.

Warum Overlay-Plugins keine Loesung sind

Im Shopify App Store findest du Apps die versprechen, deinen Shop per Ein-Klick-Installation barrierefrei zu machen. Diese sogenannten Accessibility-Overlays legen eine JavaScript-Schicht ueber deine Seite die Schriftgroessen, Kontraste und andere visuelle Eigenschaften anpasst.

Das Problem: Overlays aendern nicht den tatsaechlichen Code deines Shops. Screenreader lesen weiterhin den gleichen DOM, fehlende Alt-Texte bleiben fehlend, kaputte Formulare bleiben kaputt. Die internationale Accessibility-Community hat Overlays mehrfach oeffentlich kritisiert. Die US-Wettbewerbsbehoerde FTC hat bereits Verfahren gegen Overlay-Anbieter gefuehrt.

Ein Overlay kann die Nutzererfahrung fuer manche Besucher verbessern, aber es ersetzt nicht die technische Konformitaet die das BFSG verlangt. Wenn du einen Overlay-Anbieter als Argument gegen eine Abmahnung verwendest, wird das vor Gericht wahrscheinlich nicht helfen.

Was eine BFSG-Abmahnung fuer Shopify-Betreiber bedeutet

Seit August 2025 laufen zwei aktive Abmahnwellen gegen Online-Shops. Die Forderungen reichen von rund 595,00 Euro bis ueber 2.700,00 Euro. Die Abmahner nutzen automatisierte Scanner um Verstoesse zu finden, typischerweise Kontrastfehler, fehlende Alt-Texte und fehlende Formular-Labels, also genau die Punkte aus der Checkliste oben.

Parallel dazu prueft die zentrale Marktueberwachungsbehoerde MLBF in Magdeburg seit Januar 2026 eigenstaendig. Bussgelder koennen bis zu 100.000,00 Euro betragen.

Der beste Schutz ist ein Shop der die Grundlagen erfuellt. Nicht perfekt, nicht zu 100 Prozent, aber die automatisch pruefbaren Kriterien abgedeckt. Das ist genau das was ein automatischer Scanner fuer dich leisten kann: die haeufigsten Verstoesse finden bevor es ein Abmahner tut.

Wenn du bereits eine Abmahnung erhalten hast, findest du eine detaillierte Handlungsanleitung in unserem Ratgeber BFSG-Abmahnung erhalten: So reagierst du richtig.

Dein 4-Wochen-Fahrplan

Woche 1: Status-Check
Lass einen automatisierten BFSG-Check ueber deinen Shop laufen. Du bekommst eine Liste aller gefundenen Verstoesse mit Schweregrad und konkreten Fixes. Notiere die Top-5-Probleme.

Woche 2: Quick Wins
Farbkontraste anpassen (Theme-Editor), Alt-Texte fuer alle Produktbilder einfuegen, Barrierefreiheitserklaerung erstellen und im Footer verlinken. Das sind die drei Massnahmen mit dem besten Aufwand-Wirkungs-Verhaeltnis.

Woche 3: Technik
Formular-Labels pruefen, Ueberschriften-Hierarchie korrigieren, alle Apps per Tastatur testen. Falls Apps nicht barrierefrei sind: Alternativen suchen oder den App-Anbieter kontaktieren.

Woche 4: Re-Scan und Feinschliff
Erneuter BFSG-Check. Score vergleichen. Verbleibende Probleme priorisieren. Regelmaessiges Monitoring einrichten, damit neue Verstoesse frueh auffallen, etwa nach Theme-Updates oder neuen Produkten.

Haeufige Fragen

Ist mein Shopify-Shop automatisch BFSG-konform?

Nein. Kein Shopify-Theme ist vollstaendig BFSG-konform ohne manuelle Anpassungen. Shopify liefert eine solide Basis mit semantischem HTML und responsivem Design, aber Farbkontraste, Alt-Texte, Formular-Labels und die Barrierefreiheitserklaerung musst du selbst umsetzen.

Reicht eine Accessibility-App aus dem Shopify App Store?

Nein. Overlay-Apps aendern nicht den tatsaechlichen Code deines Shops und erfuellen die BFSG-Anforderungen nicht. Sie koennen ergaenzend die Nutzererfahrung verbessern, ersetzen aber nicht die technische Konformitaet.

Kann ich als Kleinstunternehmer die BFSG-Pflicht ignorieren?

Wenn du gleichzeitig unter 10 Beschaeftigte hast und unter 2 Mio. Euro Jahresumsatz oder Bilanzsumme bleibst, bist du von den BFSG-Pflichten fuer Dienstleistungen befreit. Trotzdem empfiehlt sich Barrierefreiheit, weil Google barrierefreie Websites bevorzugt und du eine groessere Zielgruppe erreichst.

Welches Shopify-Theme ist am barrierefreisten?

Dawn, Shopifys kostenloses Standard-Theme, bietet die beste Ausgangsbasis. Es wird aktiv auf Barrierefreiheit optimiert und regelmaessig aktualisiert. Bei Premium-Themes achte auf explizite Accessibility-Features und aktuelle Updates.

Wie oft sollte ich meinen Shop auf Barrierefreiheit pruefen?

Mindestens einmal pro Quartal und nach jedem Theme-Update, jeder neuen App-Installation und groesseren Content-Aenderungen. Ein automatisierter Scanner wie der BFSG-Check findet neue Verstoesse in unter 60 Sekunden.

Was kostet die BFSG-Umsetzung fuer einen Shopify-Shop?

Fuer die Grundlagen (Kontraste, Alt-Texte, Labels, Erklaerung) reichen 1 bis 3 Tage eigene Arbeit. Wenn du eine Agentur beauftragst, rechne mit 2.000,00 bis 8.000,00 Euro je nach Shop-Groesse und Anzahl installierter Apps. Ein automatischer Scanner hilft dir, den Umfang vorab einzuschaetzen.

Fazit

Shopify-Shops haben eine bessere Ausgangslage als viele andere Plattformen, aber kein Theme ist fertig barrierefrei. Die haeufigsten Verstoesse sind Farbkontraste, fehlende Alt-Texte, fehlende Formular-Labels und nicht barrierefreie Drittanbieter-Apps. Alle vier lassen sich mit ueberschaubarem Aufwand beheben.

Der sinnvolle erste Schritt: Einen automatisierten Check laufen lassen, die Top-Probleme identifizieren und die Quick Wins sofort umsetzen. Danach regelmaessig scannen, damit neue Verstoesse nicht unbemerkt bleiben.

Dein naechster Schritt
Pruefe deinen Shopify-Shop jetzt kostenlos auf BFSG-Verstoesse. Du bekommst eine priorisierte Liste mit WCAG-Zuordnung und konkreten Loesungsvorschlaegen, in unter 60 Sekunden.
→ Jetzt Shopify-Shop pruefen

---

Dieser Artikel informiert ueber die BFSG-Anforderungen fuer Shopify-Shops und ersetzt keine individuelle Rechtsberatung. Bei konkreten Rechtsfragen empfehlen wir die Konsultation eines Fachanwalts fuer IT-Recht oder Wettbewerbsrecht.