Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 alle deutschen Shopify-Händler oberhalb der Kleinstunternehmen-Schwelle (mehr als zehn Beschäftigte ODER mehr als zwei Millionen EUR Jahresumsatz) zur Einhaltung der WCAG-2.1-AA-Kriterien über die harmonisierte Norm EN 301 549. Bei Verstößen drohen Bußgelder bis 100.000 EUR pro Einzelverstoß nach § 37 BFSG. Diese 14-Punkte-Checkliste umfasst alle prüfungsrelevanten Anforderungen aus § 3 BFSG, § 8 BFSG und Anlage I der EU-Richtlinie 2019/882.
Das BFSG (BGBl. 2021 I S. 2970) setzt die EU-Richtlinie 2019/882 (European Accessibility Act, EAA) in deutsches Recht um. § 1 BFSG legt den sachlichen Geltungsbereich fest, § 3 BFSG bestimmt die erfassten Dienstleistungen. Online-Shops fallen unter § 3 Abs. 1 Nr. 5 BFSG als "Dienstleistungen im elektronischen Geschäftsverkehr".
Vom Anwendungsbereich ausgenommen sind Kleinstunternehmen nach § 3 Abs. 3 BFSG, also Unternehmen mit weniger als zehn Beschäftigten UND einem Jahresumsatz oder einer Jahresbilanzsumme unter zwei Millionen EUR. Beide Bedingungen müssen kumulativ erfüllt sein. Ein Shopify-Händler mit acht Beschäftigten und drei Millionen EUR Umsatz fällt vollständig unter das BFSG.
Die Marktüberwachung erfolgt nach § 32 BFSG durch die Marktüberwachungsbehörden der Bundesländer. Als gemeinsamer zentraler Ansprechpartner aller 16 Länder ist die MLBF (Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen) mit Sitz in Magdeburg eingerichtet, eine Anstalt des öffentlichen Rechts, die seit dem 26. September 2025 voll arbeitsfähig ist.
| Nr. |
Anforderung |
Norm |
Prüfort in Shopify |
| 1 |
Textkontrast 4,5:1 |
EN 301 549, WCAG 1.4.3 |
base.css, CSS-Variablen |
| 2 |
UI-Komponenten Kontrast 3:1 |
EN 301 549, WCAG 1.4.11 |
Buttons, Formularfelder |
| 3 |
Alternativtexte für Bilder |
EN 301 549, WCAG 1.1.1 |
Produktbilder, Banner |
| 4 |
Tastaturbedienbarkeit |
EN 301 549, WCAG 2.1.1 |
Megamenüs, Modals |
| 5 |
Sichtbarer Fokusindikator |
EN 301 549, WCAG 2.4.7 |
Globales CSS |
| 6 |
Mindest-Klickfläche 24×24 px |
EN 301 549, WCAG 2.5.8 |
Paginierung, Icons |
| 7 |
Formularbeschriftungen |
EN 301 549, WCAG 3.3.2 |
Newsletter, Login, Checkout |
| 8 |
Sprache der Seite |
EN 301 549, WCAG 3.1.1 |
<html lang="de"> |
| 9 |
Konsistente Navigation |
EN 301 549, WCAG 3.2.3 |
Theme-Header, Footer |
| 10 |
Korrekte ARIA-Auszeichnung |
EN 301 549, WCAG 4.1.2 |
Eigene Sections |
| 11 |
Fehlertoleranz |
EN 301 549, WCAG 3.3.1 |
Checkout, Adressformular |
| 12 |
Erklärung zur Barrierefreiheit |
§ 14 BFSG i.V.m. Anlage 3 BFSG |
Eigene Shopify-Seite |
| 13 |
Feedback-Mechanismus |
§ 14 BFSG, Art. 7 EAA |
Kontaktformular, E-Mail |
| 14 |
Dokumentation der Konformität |
§ 8 BFSG |
Interne Akte |
WCAG 1.4.3 verlangt für normalen Text ein Kontrastverhältnis von 4,5:1 gegen den Hintergrund, für großen Text (ab 18 pt oder 14 pt fett) genügt 3:1. Diese Anforderung ist über EN 301 549 v3.2.1 in Anlage I der EU-Richtlinie 2019/882 in das BFSG übernommen.
So prüfen Sie es in Shopify: Öffnen Sie Ihren Store, klicken Sie mit der rechten Maustaste auf einen Textabsatz und wählen Sie "Untersuchen". In den Chrome DevTools zeigt das Farbfeld neben color: das Kontrastverhältnis. Ein gelbes oder rotes Symbol bedeutet einen Verstoß.
Häufiger Verstoß sind sekundäre Textfarben (Metadaten, Hilfstexte, Datumsangaben im Footer), die optisch zum weißen Hintergrund passen, faktisch aber knapp unter 4,5:1 liegen. Der exakte Variablenname und Standardwert hängt vom Theme und seiner Version ab und muss direkt in der entsprechenden CSS-Datei geprüft werden.
WCAG 1.4.11 betrifft Bedienelemente und bedeutungstragende grafische Objekte. Formularfeld-Umrandungen, Fokusindikatoren, Icons mit Funktion und Diagramme müssen ein Kontrastverhältnis von 3:1 gegen die angrenzenden Farben aufweisen.
In Shopify-Themes scheitern besonders häufig: Hover-Zustände sekundärer Buttons (Helligkeitssprung unter 3:1), Eingabefeldrahmen in Newsletter-Anmeldungen (häufig #e5e5e5 auf Weiß, ergibt 1,3:1) und ausgegraute Buttons im inaktiven Zustand.
Nach WCAG 1.1.1 muss jedes Bild, das Information transportiert, einen textlichen Alternativtext besitzen. In Shopify wird das Alt-Feld pro Produktbild im Admin-Bereich gepflegt unter "Produkte > Medien > Alt-Text bearbeiten". Banner und Lookbook-Bilder erhalten ihren Alt-Text in den Section-Einstellungen des Themes.
Dekorative Bilder erhalten ein leeres alt="". Das ist die korrekte Auszeichnung nach WCAG. Ein fehlendes Alt-Attribut ist ein Verstoß, ein leeres Alt-Attribut ist konform.
Fehlende oder leere Alt-Texte gehören laut WebAIM Million zu den über die Jahre stabilsten Treffern bei automatisierten Audits. Im Shopify-Kontext entstehen sie typischerweise dort, wo Produktbilder per CSV-Import übernommen wurden, weil das CSV-Format das Alt-Feld optional führt.
WCAG 2.1.1 verlangt, dass alle Funktionen einer Website ohne Maus, ausschließlich mit der Tastatur, bedienbar sein müssen. Das umfasst Navigationsmenüs, Filter in Kollektionen, das Hinzufügen in den Warenkorb, Modal-Dialoge und die Kasse.
Prüfschritt: Setzen Sie die Maus zur Seite. Navigieren Sie ausschließlich mit der Tabulatortaste und der Eingabetaste durch Ihren Store. Sie müssen jeden Link erreichen, jedes Formularfeld ausfüllen, jeden Button auslösen und jedes Modal schließen können. Wenn der Fokus in einem Modal "gefangen" wird oder hinter einem geöffneten Menü verschwindet, liegt ein Verstoß vor.
Megamenüs in Premium-Themes scheitern hier besonders häufig. Wenn sich das Untermenü nur beim Überfahren mit der Maus öffnet und keine aria-expanded-Logik enthält, ist die Navigation für Tastaturnutzer unerreichbar.
WCAG 2.4.7 verlangt einen visuell sichtbaren Fokusindikator für jedes interaktive Element. Das ist die Linie oder der Schatten, der erscheint, wenn ein Element mit der Tabulatortaste fokussiert wird.
Der häufigste Verstoß in Shopify-Themes ist die globale CSS-Regel *:focus { outline: none; }. Diese Anweisung entfernt den nativen Browser-Fokusring und ersetzt ihn nicht durch eine Alternative. Prüfen Sie Ihr eigenes Theme (und alle von Apps eingespielten CSS-Dateien) auf diese Regel oder ihre Varianten.
Korrektur: Entweder die Anweisung entfernen oder durch *:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } ersetzen.
WCAG 2.5.8 (neu in WCAG 2.2) verlangt eine Mindestgröße von 24×24 CSS-Pixeln für interaktive Bedienelemente. Davon ausgenommen sind Elemente in Fließtexten (Links) und Elemente, deren Größe der User Agent vorgibt.
In Shopify scheitern hier nahezu alle Themes: Paginierungspunkte in Karussells (typisch 8×8 px), Social-Media-Icons im Footer (typisch 20×20 px) und Schließen-Symbole in Mini-Warenkörben (typisch 16×16 px).
WCAG 3.3.2 verlangt, dass jedes Eingabefeld eine programmatisch zugeordnete Beschriftung besitzt. Das bedeutet in HTML ein <label for="id"> mit korrespondierendem id am Eingabefeld, oder eine aria-label-Auszeichnung.
Placeholder-Text allein erfüllt diese Anforderung nicht. Ein Eingabefeld mit placeholder="Ihre E-Mail-Adresse" und ohne sichtbare Beschriftung ist nicht konform. Fehlende oder leere Formularbeschriftungen gehören laut WebAIM Million zu den über die Jahre stabilsten automatisierten Trefferarten im Web insgesamt.
WCAG 3.1.1 verlangt, dass die Hauptsprache jeder Seite programmatisch deklariert ist. Das <html>-Element muss ein lang-Attribut besitzen, also <html lang="de"> für deutschsprachige Seiten.
In Shopify wird diese Auszeichnung über die Theme-Variable in theme.liquid gesetzt. Die Standardvariable {{ request.locale.iso_code }} liefert den korrekten Wert, sofern der Store im Admin auf Deutsch als Hauptsprache konfiguriert ist.
WCAG 3.2.3 verlangt, dass wiederkehrende Navigationsmechanismen auf jeder Seite an derselben relativen Position erscheinen. In Shopify bedeutet das: Header und Footer müssen auf der Startseite, auf Produktseiten, auf Kollektionsseiten und im Checkout identisch positioniert sein.
Die Standardisierung des Themes löst dieses Problem in den meisten Fällen automatisch. Probleme entstehen, wenn einzelne Templates (product.json, collection.json) eine abweichende Header-Section eingebunden haben.
WCAG 4.1.2 verlangt, dass für eigene Bedienelemente Name, Rolle und Wert programmatisch ermittelbar sind. Das betrifft jede Custom-Section, die nicht auf native HTML-Elemente (Button, Input, A) zurückgreift.
Typischer Verstoß: ein <div onclick=""> als Quasi-Button. Korrekt ist entweder ein <button> oder ein <div role="button" tabindex="0" aria-label="Beschreibung"> mit zusätzlicher Tastatur-Event-Logik.
WCAG 3.3.1 verlangt, dass Fehler im Formular eindeutig identifiziert und beschrieben werden. Die Adresseingabe und Zahlungsfelder im Shopify-Checkout sind standardmäßig konform, da Shopify selbst die Kasse pflegt. Eigene Felder, die Sie über Checkout Extensibility hinzufügen, fallen in Ihre Verantwortung nach § 8 BFSG.
§ 14 Abs. 1 Nr. 2 BFSG verpflichtet den Diensteanbieter, die Informationen nach Anlage 3 Nr. 1 BFSG zu erstellen und barrierefrei zugänglich zu machen. Anlage 3 Nr. 1 BFSG nennt vier inhaltliche Bausteine:
- Eine allgemeine Beschreibung der Dienstleistung in einem barrierefreien Format
- Beschreibungen und Erläuterungen, die zum Verständnis der Durchführung der Dienstleistung erforderlich sind
- Eine Beschreibung, wie die Dienstleistung die einschlägigen Barrierefreiheitsanforderungen erfüllt
- Die Angabe der zuständigen Marktüberwachungsbehörde
Ergänzend verlangt Art. 7 Abs. 1 lit. b der EU-Richtlinie 2019/882 einen Mechanismus, über den Verbraucher Barrieren melden können. In der Praxis wird dieser Feedback-Kanal gemeinsam mit der Erklärung veröffentlicht, auch wenn er nicht in Anlage 3 Nr. 1 BFSG aufgeführt ist.
In Shopify wird diese Seite als eigene Seite unter /pages/erklaerung-zur-barrierefreiheit angelegt und im Footer verlinkt. Eine veröffentlichte Erklärung, auch wenn sie laufende Arbeiten dokumentiert, demonstriert in der Marktüberwachungspraxis guten Willen und reduziert die Eskalationswahrscheinlichkeit im Beschwerdefall erheblich.
Art. 7 Abs. 1 lit. b der EU-Richtlinie 2019/882, parallel zu § 14 BFSG i.V.m. Anlage 3 Nr. 1 BFSG, verlangt einen Mechanismus, über den Nutzer Barrieren melden können. Eine reine Kontakt-E-Mail-Adresse genügt, sofern diese aktiv überwacht und beantwortet wird.
§ 8 BFSG verpflichtet den Diensteanbieter zur Dokumentation, wie die Anforderungen erfüllt werden. Die Marktüberwachungsbehörde kann diese Dokumentation nach § 32 BFSG anfordern. In der Praxis genügt eine interne Akte mit den Ergebnissen der letzten Überprüfung, den durchgeführten Korrekturen und einem Nachweis der wiederkehrenden Prüfung.
§ 37 BFSG regelt Ordnungswidrigkeiten. Die wichtigsten Tatbestände:
| Verstoß |
Bußgeldrahmen |
| Nichteinhaltung der Barrierefreiheitsanforderungen |
bis 100.000 EUR |
| Inverkehrbringen nicht konformer Produkte |
bis 100.000 EUR |
| Verstoß gegen Auskunftspflichten |
bis 10.000 EUR |
| Verstoß gegen Mitwirkungspflichten |
bis 10.000 EUR |
Das BFSG ist am 28. Juni 2025 in Kraft getreten. Die Marktüberwachungsbehörden der Länder haben mit der Vollzugsarbeit begonnen, eine konsolidierte öffentliche Sammlung verhängter Bußgelder existiert zum Zeitpunkt dieses Beitrags nicht. Aktuelle Hinweise zu Vollzugsschwerpunkten und Bußgeldbescheiden veröffentlichen die jeweilige Landesbehörde sowie die Bundesfachstelle Barrierefreiheit. Zusätzlich relevant ist das Abmahnrisiko über das Wettbewerbsrecht (UWG): Mitbewerber und Wirtschaftsverbände können Verstöße gegen das BFSG als wettbewerbswidrige Handlung abmahnen lassen, oft mit kürzerer Reaktionsfrist als eine behördliche Anhörung.
- Bestimmen Sie, ob Ihr Unternehmen die Kleinstunternehmen-Schwelle nach § 3 Abs. 3 BFSG überschreitet.
- Führen Sie eine automatisierte Überprüfung auf Startseite, einer Kollektion, einer Produktseite und im Warenkorb durch. AccessifyAI bietet eine Shopify-spezifische Überprüfung im Shopify App Store.
- Veröffentlichen Sie eine Erklärung zur Barrierefreiheit, auch wenn diese laufende Arbeiten dokumentiert.
- Beheben Sie zuerst die Punkte mit höchster Beschwerdewahrscheinlichkeit: Bildalternativen, Formularbeschriftungen, Farbkontrast.
- Planen Sie eine quartalsweise Wiederholungsüberprüfung. Theme-Updates und neue App-Installationen führen regelmäßig zu neuen Verstößen.
Weitere fachliche Vertiefung finden Sie in unserem Beitrag zu BFSG, WCAG und EAA im Vergleich.
Ja. Nach § 1 BFSG und Art. 2 der EU-Richtlinie 2019/882 ist die Niederlassung des Anbieters unerheblich. Maßgeblich ist der Ort des Verbrauchers. Ein US-amerikanischer Shopify-Händler, der nach Deutschland verkauft, fällt in den Anwendungsbereich, sofern die Kleinstunternehmen-Schwelle überschritten ist.
Nach § 32 BFSG sind die Marktüberwachungsbehörden der Bundesländer zuständig. Als gemeinsamer zentraler Ansprechpartner aller 16 Länder fungiert die MLBF (Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen) mit Sitz in Magdeburg. Welche Landesbehörde im Einzelfall zuständig ist, richtet sich nach dem Sitz des Diensteanbieters oder dem Ort der mutmaßlichen Beschwerde.
Eine seriöse Quote lässt sich aus der bisher veröffentlichten Vollzugspraxis nicht ableiten. Erfahrungsgemäß folgt bei Marktüberwachungsverfahren zunächst eine Beanstandung mit Fristsetzung zur Behebung, bevor Bußgelder festgesetzt werden. Wirtschaftlich relevanter als das behördliche Bußgeld kann die wettbewerbsrechtliche Abmahnung über das UWG sein, deren Aufwand und Reaktionsfristen unmittelbar zu Buche schlagen.
Das BFSG verweist über die EU-Richtlinie 2019/882 auf die harmonisierte Norm EN 301 549 v3.2.1. Diese Version referenziert WCAG 2.1 AA. WCAG 2.2 ist nicht direkt zwingend, gilt jedoch als anerkannter Stand der Technik. Eine spätere Aktualisierung der EN 301 549 auf WCAG 2.2 ist zu erwarten.
Nein. Overlays beheben die Verstöße nicht im Quellcode, sondern überlagern die Seite mit einer Hilfsoberfläche. Die Bundesfachstelle Barrierefreiheit und die Aktion Mensch raten explizit von Overlay-Lösungen ab. Eine Marktüberwachungsbehörde wird im Beschwerdefall den Quellcode der Seite prüfen, nicht das Overlay.
Nein. § 8 BFSG benennt den Diensteanbieter als verantwortlich. Das ist der Händler, nicht der Theme-Entwickler. Der Einsatz eines Themes Dritter überträgt keine Haftung. Sie können vertraglich Regress nehmen, müssen aber gegenüber der Behörde selbst einstehen.
§ 8 BFSG verlangt fortlaufende Konformität, nicht eine einmalige Prüfung. Die Bundesfachstelle Barrierefreiheit empfiehlt eine vollständige Überprüfung pro Quartal sowie eine erneute Überprüfung nach jedem Theme-Update und nach jeder neuen App-Installation.
Das BFSG schreibt für alle nicht-Kleinstunternehmen mit Shopify-Store eine Einhaltung der WCAG-2.1-AA-Kriterien über die harmonisierte Norm EN 301 549 vor. Die 14 Pflichtpunkte dieser Checkliste decken die Kategorien ab, auf die Marktüberwachungsbehörden und automatisierte Audits in der Praxis am häufigsten schauen. Die drei Quick-Wins für jeden Shopify-Store sind Bildalternativen, Formularbeschriftungen und Farbkontrast, weil sie regelmäßig in WebAIM-Million-Auswertungen die Spitze der wiederkehrenden Treffer bilden.