Barrierefreier Onlineshop nach BFSG: Pflichten, Prüfungen und Umsetzung
Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) die meisten Onlineshops, die an Verbraucher verkaufen, zu digitaler Barrierefreiheit. Der gesamte Kaufprozess, von der Suche bis zur Zahlung, muss auch per Tastatur und mit Screenreader funktionieren. Technischer Maßstab ist die Norm EN 301 549, also im Kern WCAG 2.1 Level AA.
Im ersten Jahr haben viele Händler abgewartet. Das reicht 2026 nicht mehr: Die Marktüberwachungsstelle der Länder (MLBF) hat Anfang 2026 ihre Überwachungsstrategie beschlossen und setzt bei webbasierten Dienstleistungen auf automatisierte Vorprüfungen. Parallel kontrollieren auch andere EU-Staaten, etwa Frankreich, gezielt Onlineshops.
Dieser Leitfaden richtet sich an Shopbetreiber, E-Commerce-Verantwortliche und Unternehmen, die ihre Shop-Entwicklung auslagern. Er zeigt, wer betroffen ist, welche Mängel Sie zuerst beheben sollten und wie Sie in WooCommerce, Shopify und Webflow vorgehen.
Fällt Ihr Onlineshop unter das BFSG?
Das BFSG setzt den European Accessibility Act (Richtlinie (EU) 2019/882) in deutsches Recht um. Erfasst sind unter anderem Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher, also typische B2C-Onlineshops.
- Der Firmensitz spielt keine Rolle. Auch Anbieter außerhalb der EU sind erfasst, wenn sie an Verbraucher in Deutschland oder der EU verkaufen.
- Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen: weniger als 10 Beschäftigte und ein Jahresumsatz oder eine Jahresbilanzsumme von höchstens 2 Millionen Euro. Beide Bedingungen müssen erfüllt sein.
- Reine B2B-Shops ohne Verbraucherbezug sind anders zu bewerten. Mischmodelle sind für den Verbraucherteil betroffen.
Ausnahmen wegen „unverhältnismäßiger Belastung" oder „grundlegender Veränderung" gibt es, sie müssen aber begründet und dokumentiert werden.
Kontrollen und Bußgelder 2026: Deutschland und Frankreich im Vergleich
| Thema | Deutschland | Frankreich |
|---|---|---|
| Gesetz | Barrierefreiheitsstärkungsgesetz (BFSG) mit Verordnung (BFSGV) | Gesetz Nr. 2023-171, Dekret Nr. 2023-931, Erlass vom 9. Oktober 2023 |
| Zuständige Behörde | Marktüberwachungsstelle der Länder (MLBF) | Verbraucherschutzbehörde DGCCRF |
| Technischer Maßstab | EN 301 549 (WCAG 2.1 AA) | Prüfmethode RGAA, abgestimmt auf EN 301 549 |
| Sanktionen | Bußgeld bis 100.000 € für das Anbieten einer nicht konformen Dienstleistung, bis 10.000 € für weitere Verstöße (§ 37 BFSG) | Anordnung zur Nachbesserung, Geldbußen je festgestelltem Verstoß |
| Kontrollen | Reaktiv nach Beschwerden und aktiv durch Stichproben, teils automatisiert | Untersuchung von Onlineshops seit Januar 2026, rund 100 Prüfungen für 2026 angekündigt |
Die französische DGCCRF hat in ihrer Jahresbilanz vom 25. Juni 2026 zudem angekündigt, auch Anbieter von Barrierefreiheits-Audits unter die Lupe zu nehmen. Für deutsche Händler kommt neben behördlichen Verfahren das Risiko wettbewerbsrechtlicher Abmahnungen hinzu, dessen Reichweite unter Juristen diskutiert wird.
Diese Informationen ersetzen keine Rechtsberatung. Lassen Sie Ihren konkreten Fall von einer Anwältin oder einem Anwalt prüfen.
Die häufigsten Barrieren in Onlineshops
Die jährliche Studie WebAIM Million untersucht die Startseiten der eine Million meistbesuchten Websites. Im Februar 2026 wiesen 95,9 % automatisch erkennbare WCAG-Fehler auf, im Schnitt 56,1 Fehler pro Seite. Genau diese Fehler finden sich in fast jedem Shop:
| Mangel | Anteil der Seiten | Typische Stelle im Shop |
|---|---|---|
| Zu geringer Textkontrast | 83,9 % | Hellgraue Streichpreise, Sale-Badges, Text auf Bannern |
| Fehlende Alternativtexte | 53,1 % | Produktbilder, Kategoriekacheln, Zahlungslogos |
| Formularfelder ohne Label | 51 % | Suche, Newsletter, Checkout, Filter |
| Leere Links | 46,3 % | Warenkorb-, Konto- und Social-Icons |
| Leere Buttons | 30,6 % | Mengen-Buttons (+/-), Slider-Pfeile, Pop-up-Schließen |
Die gute Nachricht: Diese Fehler wiederholen sich und stecken meist im Theme. Wer die Produktvorlage einmal korrigiert, behebt den Fehler auf tausenden Seiten gleichzeitig.
Anforderungen entlang der Customer Journey
Navigation und Suche
Alle Funktionen müssen per Tastatur bedienbar sein, mit sichtbarem Fokus. Mega-Menüs sollten sich mit Enter öffnen und mit Escape schließen lassen. Ergänzen Sie einen Sprunglink „Zum Inhalt" und deklarieren Sie die Seitensprache (lang="de"), die laut WebAIM auf 13,5 % der Seiten fehlt.
Kategorieseiten und Filter
Facettenfilter sollten echte Formularelemente nutzen (Checkboxen, Buttons) und die neue Trefferzahl ansagen. Ein Raster, das sich still neu lädt, lässt Screenreader-Nutzer ratlos zurück.
Produktseiten
Schreiben Sie aussagekräftige Alternativtexte („Leinenkleid in Marineblau, Rückansicht") statt Dateinamen. Größen- und Farbauswahl muss ihren Zustand, etwa „ausgewählt" oder „ausverkauft", nicht nur über Farbe vermitteln. Gute Produkttexte helfen zugleich der Suchmaschinenoptimierung.
Warenkorb und Checkout
Hier kostet jede Barriere direkt Umsatz. Jedes Feld braucht ein sichtbares Label, korrekte autocomplete-Werte und verständliche Fehlermeldungen direkt am Feld. WCAG 2.2 ergänzt das Kriterium „Redundante Eingabe": Kunden sollen eine bereits angegebene Adresse nicht erneut tippen müssen. Mehr dazu in unserem Beitrag WooCommerce-Checkout optimieren.
Dynamische Inhalte
Ausklappbarer Warenkorb, Newsletter-Pop-up, Cookie-Banner und Chat müssen beim Öffnen den Fokus erhalten, per Tastatur schließbar sein und dürfen niemanden „einsperren". Automatische Slider brauchen eine Pause-Funktion.
WooCommerce, Shopify, Webflow: wo Sie anfangen
Keine Plattform ist von Haus aus BFSG-konform. Der Kern liefert eine Grundlage, über das Ergebnis entscheiden Theme, Plugins oder Apps und Ihre Inhalte.
| Plattform | Grundlage | Typische Risiken | Erster Schritt |
|---|---|---|---|
| WooCommerce | Kern und Block-Checkout werden laufend verbessert (Dokumentation) | Überladene Premium-Themes, Filter-Plugins, Slider, Page Builder | Theme und alle Plugins an Produktseite und Checkout prüfen |
| Shopify | Themes im Theme Store brauchen einen durchschnittlichen Lighthouse-Barrierefreiheitswert von 90 auf vier Seitentypen (Shopify-Vorgaben) | Drittanbieter-Apps (Bewertungen, Upselling, Pop-ups), angepasste Themes | Jede App per Tastatur testen, Überflüssiges entfernen |
| Webflow | Audit-Panel meldet fehlende Labels, Alternativtexte und Kontrastprobleme (Webflow-Hilfe) | Eigene Interaktionen und Animationen, div-Elemente als Buttons | Warnungen im Audit-Panel abarbeiten, Interaktionen manuell testen |
Ein Lighthouse-Wert von 90 oder 100 belegt keine Konformität. Automatische Tools erkennen nur einen Teil der WCAG-Kriterien. Der Rest erfordert manuelle Tests: reine Tastaturbedienung, Screenreader wie NVDA oder VoiceOver und Zoom auf 200 %.
Warum Overlay-Tools keine Lösung sind
Barrierefreiheits-Widgets versprechen Konformität per Script-Einbindung. Sie korrigieren den Code des Themes nicht und können Hilfsmittel stören, die Betroffene bereits nutzen.
In den USA hat die Federal Trade Commission 2025 den Anbieter accessiBe zur Zahlung von 1 Million US-Dollar verpflichtet, wegen irreführender Aussagen zur Konformität. Investieren Sie lieber in die Korrektur des Themes. Das verbessert nebenbei auch Ladezeit und SEO.
In 6 Schritten zum barrierefreien Onlineshop
- Betroffenheit klären: Verkauf an Verbraucher, Mitarbeiterzahl, Umsatz.
- Audit einer repräsentativen Stichprobe: Startseite, Kategorie, Produkt, Suche, Warenkorb, Checkout, Kundenkonto, Kontakt. Automatische Scans mit manuellen Tests kombinieren.
- Nach Wirkung priorisieren: zuerst alles, was den Kauf blockiert (Checkout, Variantenauswahl, Mini-Warenkorb), dann wiederkehrende Template-Fehler.
- An der Quelle beheben: Theme, Komponenten, Plugins oder Apps. Nicht korrigierbare Erweiterungen ersetzen.
- Barrierefreiheitsinformationen veröffentlichen: Das BFSG verlangt eine Erklärung, wie Ihr Shop die Anforderungen erfüllt, etwa in den AGB oder auf einer eigenen Seite.
- Dauerhaft absichern: Das Team, das Produkte pflegt, schulen (Alternativtexte, Bannerkontraste) und nach jedem Theme-Update erneut testen.
Ist Ihr Shop schon einige Jahre alt und mit Erweiterungen überladen, ist ein Website-Relaunch oft wirtschaftlicher als eine lange Liste an Einzelkorrekturen.
Praxisbeispiel: ein WooCommerce-Shop mit Kunden in Deutschland
Ein fiktives Beispiel: Eine Naturkosmetikmarke mit 15 Beschäftigten verkauft über WooCommerce an Verbraucher in Deutschland und Österreich. Sie liegt über der Schwelle für Kleinstunternehmen und ist damit betroffen.
Das Audit zeigt rosafarbene Aktionspreise auf weißem Grund, Mengen-Buttons ohne zugänglichen Namen, einen Filter „Hauttyp", der per Tastatur nicht bedienbar ist, und ein Newsletter-Pop-up, das sich ohne Maus nicht schließen lässt. Der Maßnahmenplan: zwei Markenfarben anpassen, die Mengenkomponente neu bauen, das Filter-Plugin ersetzen und das Pop-up neu konfigurieren. Das Katalogteam erhält zusätzlich eine kurze Vorgabe für Alternativtexte.
Von jeder dieser Änderungen profitieren auch mobile Kunden, die den Shop einhändig oder bei Sonnenlicht nutzen.
Fazit: Barrierefreiheit ist Entwicklungsarbeit, kein Häkchen
Ein barrierefreier Onlineshop ist in Deutschland keine Kür mehr, sondern Pflicht, die seit 2026 aktiv geprüft wird. Gleichzeitig steigert er die Conversion: klare Buttons, beschriftete Formulare und ein verlässlicher Checkout helfen allen Kunden.
Unser Team prüft und optimiert WooCommerce-, Shopify- und Webflow-Shops für Händler in Deutschland, Österreich und der Schweiz, von der Theme-Korrektur bis zum barrierefreien Relaunch. Mehr zu unserer WooCommerce-Entwicklung und dazu, wie Sie Webentwicklung nach Tunesien auslagern.