Wenn Sie einen Online-Shop betreiben, sind Sie mit hoher Wahrscheinlichkeit vom BFSG betroffen — egal ob Shopify, WooCommerce, Shopware oder ein anderes System. Online-Shops sind das Paradebeispiel für barrierefrei zu machende digitale Dienstleistungen: Bestellfunktion, Zahlungsformulare, Kundenkonten, Bestätigungs-E-Mails — alles davon muss Menschen mit Behinderungen genauso zugänglich sein wie allen anderen.
Das BFSG ist seit dem 28. Juni 2025 in Kraft. Die ersten Abmahnungen sind seit Juli 2025 verschickt worden. Wer einen Shop betreibt, sollte heute eher gestern handeln als morgen. Was das konkret bedeutet — und welche Stolperstellen pro Plattform am häufigsten sind:
Sind Sie betroffen? Der 30-Sekunden-Check
- Sie verkaufen Produkte oder Dienstleistungen an Verbraucher:innen über eine Website → Ja, BFSG gilt
- Sie haben einen Bestellprozess, Warenkorb oder Checkout → Ja, BFSG gilt
- Sie haben einen reinen B2B-Shop (Endkunden nur registrierte Unternehmen, B2C-Käufe ausgeschlossen) → Nein, BFSG gilt nicht
- Sie sind Solo-Selbstständig mit unter 10 Mitarbeitenden und unter 2 Mio. € Jahresumsatz und verkaufen nur Dienstleistungen → Mikrounternehmer-Ausnahme könnte greifen, aber sobald Sie physische oder digitale Produkte verkaufen (10er-Karten, E-Books, Downloads, Kurspakete), wird's eng
Vier-Fragen-Entscheidungsbaum: Bin ich vom BFSG betroffen?
Wichtig: Anders als bei Buchungsanbietern (Eversports, Calendly) gibt es im Shop-Bereich keine „der Anbieter macht's"-Ausrede. Auch Shopify, WooCommerce und Shopware verlagern die Verantwortung nicht auf den Plattform-Anbieter. Sie als Shop-Betreiber:in stehen in der Verantwortung für Theme-Wahl, Produkttext-Pflege, Bild-Alt-Texte und alle Custom-Anpassungen.
Was BFSG für Online-Shops konkret bedeutet
Das Gesetz fordert (verkürzt): Der gesamte Kauf-Lebenszyklus muss für Menschen mit Behinderungen genauso bedienbar sein. Praktisch heißt das, mindestens diese sechs Bereiche müssen barrierefrei sein:
- Produktkarten und Produktlistings — Bilder mit Alt-Text, lesbare Preisangaben, klare Heading-Hierarchie pro Kategorie
- Produktdetail-Seite — beschriftete Variant-Wähler (Größe, Farbe), erreichbare Bilder-Zoom-Funktion ohne Maus, Mengen-Stepper mit Tastatur-Bedienbarkeit
- Warenkorb — verständliche Status-Meldungen („Artikel hinzugefügt"), Tabellen-Struktur mit echten
<th>-Headers - Checkout-Flow — jedes Formularfeld mit echtem
<label>(kein Placeholder!), klare Fehlermeldungen, Schritt-Indikator - Zahlung — die Zahlungsformulare deines Providers (Stripe, PayPal, Klarna) müssen barrierefrei eingebettet sein
- Bestätigung & Kundenkonto — Bestellbestätigungs-E-Mail mit semantischem HTML, Login-Formular mit Labels, Bestellhistorie als echte Tabelle
Was viele übersehen: AGB, Widerruf, Datenschutz und Impressum müssen ebenfalls barrierefrei sein — sie sind Teil des Verkaufsprozesses. Ein PDF-Download der AGB ist keine Lösung — das PDF müsste dann selbst barrierefrei sein (PDF/UA-Konformität), was technisch deutlich aufwendiger ist als das einfach als HTML auszuliefern.
Die 7 häufigsten Findings in Online-Shops
Aus mehreren hundert Scans von DACH-Online-Shops kristallisieren sich diese sieben Probleme heraus — sie machen zusammen rund 80 % aller BFSG-Findings im Shop-Kontext aus:
- Produktbilder ohne Alt-Text. Klassiker. Das Image-Feld in der Mediathek wird befüllt, der Alt-Text vergessen.
- Variant-Dropdowns ohne Label. „Größe wählen" steht als visueller Hinweis über dem Dropdown — aber nicht als
<label for>. Screenreader hören nur „Kombinationsfeld". - Add-to-Cart-Button ohne sichtbaren Focus-Ring. Theme-CSS setzt
outline: none— Tastatur-Nutzer:innen verlieren komplett die Orientierung. - Checkout-Formularfelder mit Placeholder statt Label. „Vorname" steht im Feld, verschwindet beim Tippen, kommt nicht zurück. Beim Re-Edit hat niemand mehr eine Chance zu sehen, was wohin gehört.
- Fehlermeldungen nur über Farbe. Roter Rahmen um ein fehlerhaftes Feld — Menschen mit Rot-Grün-Schwäche sehen den Rahmen nicht.
- Cookie-Banner blockiert Tastatur-Navigation. Banner öffnet sich beim Page-Load, fängt den Fokus ab, lässt sich aber nicht mit Tab + Enter schließen.
- Bestätigungs-E-Mail nur als Bild. Eine schöne Grafik mit Bestellnummer — Screenreader liest nichts davon vor.
Shopify: Was Sie konkret tun müssen
Shopify ist in der DACH-Region nach Shopware das zweitstärkste Shop-System. Vorteil: Die Plattform selbst (Checkout-Flow, Zahlungsmodule, Standard-Themes) ist seit 2024 deutlich barrierefreundlicher geworden. Nachteil: Theme-Marketplace und Apps können die Konformität schnell wieder zerstören.
Theme-Wahl: Das offizielle Dawn-Theme (Standard seit Online Store 2.0) ist WCAG-2.1-AA-tauglich konzipiert. Premium-Themes aus dem Marketplace bewerben Barrierefreiheit unterschiedlich aktiv — bei Themes wie Studio, Impulse, Empire oder Refresh prüfen Sie vor dem Kauf, ob die Demo-Site einen Free-Scan besteht.
Checkout: Shopify hostet den Checkout selbst (checkout.shopify.com). Sie haben hier wenig direkten Einfluss — was gut ist, weil Shopify den Checkout auf BFSG-Konformität ausrichten muss. Wenn Sie aber Shopify Plus nutzen und einen Custom-Checkout gebaut haben: Eigenverantwortung. Standard-Checkout = weitgehend okay, Custom = volle Prüfung nötig.
Apps-Falle: Pop-up-Apps (Klaviyo, Privy, Wisepops) und Bewertungs-Apps (Loox, Stamped) injizieren oft eigene Modals und Widgets ins Frontend, die nicht barrierefrei sind. Pro App prüfen, ob das eingeblendete Element mit Tab + Esc bedienbar ist und einen sichtbaren Focus-Ring hat.
Produkt-Bulk-Edit: Shopify hat in der Admin-Oberfläche Bulk-Editing für Alt-Texte. Unter Produkte > Alle Produkte > Spalten > Alt-Text lassen sich hunderte Alt-Texte in 30 Minuten nachpflegen. Wer das einmal macht, hat Finding #1 für den ganzen Shop erschlagen.
WooCommerce: Was Sie konkret tun müssen
WooCommerce ist im DACH-Raum nach Shopware das verbreitetste Shop-System für KMU. Es läuft auf WordPress — deshalb gelten alle WordPress-spezifischen Stolpersteine plus die WooCommerce-eigenen.
Theme-Wahl: Das offizielle Storefront-Theme ist WCAG-tauglich. GeneratePress + WooCommerce-Add-on ist eine bewährte Performance-/A11y-Kombination. Bei kommerziellen Themes (Avada, Flatsome, Astra Pro mit Sample-Demos) bringen Sie eine Stunde manueller Prüfung pro Page mit. Detaillierte Builder-Guides: WordPress + Gutenberg, + Elementor, + Divi, + Avada.
Block-vs.-Shortcode-Entscheidung: WooCommerce 8+ liefert echte Gutenberg-Blocks für Cart, Checkout und Product-Listings. Diese Blocks sind deutlich barrierefreundlicher als die klassischen [woocommerce_cart]-Shortcodes. Wenn Ihr Theme Block-Editor-tauglich ist (FSE-Theme oder Twenty Twenty-Four/-Five): umstellen lohnt sich.
Variations-Dropdowns: Die WooCommerce-Standard-Variations-Auswahl rendert als <select> mit hartem JS-Reset. In den meisten Themes fehlt der <label> davor (visuell ist die Variation-Beschriftung oft als <div> realisiert). Plugin-Empfehlung: YITH WooCommerce Color and Label Variations mit aktivierter Label-Option, oder Custom-CSS auf die WC-Standard-Selects.
Checkout-Felder: Standard-Checkout hat Labels, aber viele Theme-Builder zeigen sie standardmäßig nicht an („Floating Labels"). Bei Floating Labels muss sichergestellt sein, dass der Label-Text die ganze Zeit programmatisch erreichbar bleibt — nicht nur als Placeholder.
Cookie-Banner: WordPress-Sites haben oft Plugin-basierte Cookie-Banner (Borlabs, Real Cookie Banner). Beide Anbieter haben in 2024/2025 ihre Banner barrierefreundlicher gemacht — aber die Default-Konfiguration ist nicht automatisch konform. Im Banner-Editor jeweils prüfen, ob „Tastatur-Bedienbarkeit" und „Focus-Trap" aktiviert sind.
Shopware: Was Sie konkret tun müssen
Shopware ist im DACH-Raum das verbreitetste Shop-System für mittelständische Händler. Shopware 6 (seit 2019) ist architektonisch deutlich barrierefreundlicher als Shopware 5 — wer noch auf 5 ist, hat ein größeres Migrations-Problem auf dem Tisch als ein BFSG-Problem.
Standard-Theme (Shopware 6): Das mitgelieferte Storefront-Theme ist WCAG-2.1-AA-vorbereitet. Aber: Default-Konfigurationen aus den Demo-Sites (z. B. das Branding-Theme aus dem Setup-Assistenten) ändern oft Farben, Schriftgrößen und Kontraste so, dass die Konformität verloren geht. Nach dem Branding einmal mit einem Scanner durchgehen.
Configurator (Produkt-Konfigurator): Shopware liefert Standard-Konfiguratoren für Variantenprodukte. Die sind weitgehend okay, ABER: viele Händler nutzen Drittanbieter-Konfiguratoren (z. B. Produktkonfigurator-Plugins aus dem Community Store), die eigene UI-Elemente mitbringen — die müssen einzeln geprüft werden.
Checkout-Custom-Code: Shopware ist Open-Source und sehr individualisierbar. Wenn Ihr Setup Custom-Checkouts, Custom-Themes oder eingebettete Drittanbieter-Komponenten enthält, sind diese Ihre Verantwortung — Shopware-Konformität deckt den Standard ab, nicht Ihre Anpassungen.
B2B-Suite: Shopware bietet eine offizielle B2B-Suite. Wer reines B2B macht, fällt nicht unter BFSG — aber sobald auch nur ein einziger Verbraucher kauft (Mischshop), greift das Gesetz.
Bonus: Sonderfälle
- Marktplatz-Verkäufer:innen (Amazon, eBay, Etsy): Sie sind als Verkäufer nicht direkt verantwortlich — die Plattform schon. Aber: Ihre eigene Website (z. B. die Etsy-Shop-Beschreibung mit Bildern) müsste barrierefrei sein, wenn Sie sie als externen Marketing-Kanal nutzen.
- Subscription-Shops (Subbly, Recharge): Subscription-Anbieter haben eigene UI-Layer auf dem Checkout. Hier nochmal explizit prüfen.
- Headless-Commerce (Shopify Storefront-API, Shopware-Headless): Bei Headless ist der Frontend-Code von Ihnen geschrieben — volle Verantwortung. Komponentenbibliothek auf WCAG-Konformität prüfen.
- Digitale Produkte (E-Books, Downloads, Software-Lizenzen): Doppelte BFSG-Pflicht — sowohl der Shop als auch das verkaufte Produkt müssen barrierefrei sein. Ein E-Book in PDF/UA-Format, eine Software mit Screenreader-Support.
Was Sie nicht selbst lösen können
Wenn Sie einen großen Shop mit hunderten Produkten haben oder einen Custom-Checkout, der über Jahre gewachsen ist: der manuelle Fix-Aufwand kann groß sein. Drei realistische Wege:
- Sofort-Scan, dann selber priorisieren. Unser Free-Scan zeigt Ihnen die kritischen Findings — Sie entscheiden, was zuerst fixt werden muss.
- Theme-Wechsel. Wenn das aktuelle Theme grundsätzlich nicht WCAG-tauglich ist, ist ein Wechsel auf ein BFSG-vorbereitetes Theme (Dawn, Storefront, Shopware-Standard) oft schneller als 100 Findings einzeln zu reparieren.
- Fix-Service. Für Shop-Betreiber:innen, die nicht selbst Hand anlegen wollen: ein einmaliger Fix-Service der die Top-Findings repariert ist oft günstiger als eine drohende Abmahnung.
Checkliste: 10 Punkte für BFSG-konforme Online-Shops
- [ ] Alle Produktbilder haben einen Alt-Text, der das Bild beschreibt (nicht nur die Artikel-Nummer)
- [ ] Variant-Wähler (Größe, Farbe) haben sichtbare
<label>, kein Placeholder-Text - [ ] Add-to-Cart-Button hat einen sichtbaren Focus-Ring (Tab-Test ohne Maus)
- [ ] Alle Checkout-Felder haben echte
<label>-Tags, kein Placeholder als Label - [ ] Fehlermeldungen sind nicht nur farbcodiert (rot/grün), sondern auch text- oder icon-codiert
- [ ] Cookie-Banner ist mit Tab + Enter + Esc bedienbar und blockiert nicht die Page-Navigation
- [ ] Bestätigungs-E-Mail enthält den Bestelltext als HTML, nicht nur als Bild
- [ ] Heading-Hierarchie auf jeder Page: eine H1 → H2 → H3, niemals Stufen überspringen
- [ ] AGB, Widerruf, Datenschutz, Impressum sind als HTML-Seite erreichbar (nicht nur PDF)
- [ ] Bei Shop-Apps (Pop-ups, Reviews, Chat-Widgets): pro App geprüft, ob Modal mit Tastatur bedienbar ist
Wer alle 10 Punkte abhakt, hat den größten Teil der BFSG-Anforderungen abgedeckt. Die feinen Details (ARIA-live-Regions für Cart-Updates, Screenreader-spezifische Statusmeldungen) sind die Kür — der Pflichtteil sind diese 10 Items.
Wenn Sie unsicher sind, ob Ihr Shop fertig ist: starten Sie mit einem kostenlosen Scan — 60 Sekunden, ohne Anmeldung. Wir scannen 16 WCAG-Kriterien und liefern für jedes Finding einen Klartext-Fix-Hinweis auf Deutsch.