Barrierefreiheit im Shopify-Shop: BFSG-Pflicht seit 2025 — Was Sie jetzt tun müssen

Die meisten deutschen Online-Shops brechen gerade das Gesetz

Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Es betrifft alle B2C-Online-Shops in Deutschland — ohne Übergangsfrist, ohne Vorwarnung, ohne Ausreden. Und trotzdem sind laut einer Analyse von Aktion Mensch und Google nur 3% aller deutschen Online-Shops vollständig barrierefrei.

Das bedeutet: 97% aller deutschen Online-Shops verstoßen aktuell gegen geltendes Recht.

Vielleicht denken Sie: "Barrierefreiheit betrifft doch nur eine kleine Zielgruppe." Falsch. In Deutschland leben 9,4 Millionen Menschen mit einer anerkannten Schwerbehinderung. Dazu kommen Millionen mit leichteren Einschränkungen: Sehschwäche, motorische Einschränkungen, temporäre Verletzungen, oder einfach das Alter. Insgesamt profitieren bis zu 30% der Bevölkerung von barrierefreien Websites.

Und selbst wenn Ihnen die ethische Dimension egal wäre — was sie nicht sein sollte — sprechen wir hier über eine Kaufkraft von über 78 Milliarden Euro jährlich allein durch Menschen mit Behinderung in Deutschland. Dazu kommen Bußgelder von bis zu 100.000 Euro und potenzielle Abmahnungen durch Wettbewerber und Verbände.

Dieser Guide erklärt, was das BFSG konkret für Ihren Shopify-Shop bedeutet, was Sie umsetzen müssen und wie Sie es priorisieren.

Was ist das BFSG — und wen betrifft es?

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung des European Accessibility Act (EAA), einer EU-weiten Richtlinie. Ziel: Produkte und Dienstleistungen im digitalen Raum müssen für Menschen mit Behinderungen zugänglich sein. Seit dem 28. Juni 2025 ist es für E-Commerce verbindlich.

Wer ist betroffen?

Wichtig: Die Ausnahme für Kleinstunternehmen gilt nur, wenn BEIDE Kriterien erfüllt sind — weniger als 10 Mitarbeiter UND weniger als 2 Millionen Euro Jahresumsatz. Sobald Sie eines der beiden Kriterien überschreiten, sind Sie verpflichtet.

Welche Bußgelder drohen?

Die Marktüberwachungsbehörden der Bundesländer sind für die Durchsetzung zuständig. Die Sanktionen:

• Bis zu 10.000 EUR für einfache Verstöße
• Bis zu 100.000 EUR für schwerwiegende oder wiederholte Verstöße
• Abmahnungen durch Wettbewerber und Verbände sind ebenfalls möglich (vergleichbar mit DSGVO-Abmahnungen)
• Vertriebsverbote für nicht-konforme Produkte und Dienstleistungen

Die Behörden können anlasslos prüfen oder auf Beschwerden reagieren. Die ersten Prüfrunden laufen bereits.

Was WCAG 2.1 AA konkret bedeutet

Das BFSG verweist auf die EN 301 549, die wiederum auf die Web Content Accessibility Guidelines (WCAG) 2.1 Level AA verweist. Das ist der Standard, den Ihr Shop erfüllen muss.

WCAG basiert auf vier Grundprinzipien — kurz POUR (Perceivable, Operable, Understandable, Robust). Jedes Prinzip enthält konkrete Kriterien. Hier die wichtigsten für E-Commerce:

1. Wahrnehmbar (Perceivable)

Alle Informationen müssen so präsentiert werden, dass jeder Nutzer sie wahrnehmen kann — auch ohne Sehen, Hören oder mit eingeschränkter Wahrnehmung.

2. Bedienbar (Operable)

Die gesamte Website muss mit verschiedenen Eingabemethoden bedienbar sein — insbesondere nur mit der Tastatur.

3. Verständlich (Understandable)

Die Inhalte und die Bedienung müssen vorhersehbar und verständlich sein.

4. Robust

Die Website muss mit verschiedenen Technologien funktionieren — insbesondere mit Screenreadern und anderen assistiven Technologien.

Die Shopify-spezifische Barrierefreiheits-Checkliste

Nicht jedes Shopify-Theme ist gleich. Manche sind von Haus aus besser aufgestellt als andere. Hier ist Ihre konkrete Checkliste:

Theme-Wahl: Wo Sie starten

Unsere Empfehlung: Wenn Sie noch kein Theme gewählt haben oder einen Relaunch planen, starten Sie mit Dawn. Es ist Shopifys am besten gewartetes Theme und hat die stärkste Accessibility-Basis. Alles andere baut darauf auf.

Vollständige Checkliste

Die 6 häufigsten Barrierefreiheits-Probleme in Shopify-Shops

Aus unserer Erfahrung mit dutzenden Shopify-Shops sehen wir immer wieder die gleichen Probleme. Hier sind die Top 6 — mit konkreten Lösungen.

1. Slider und Karussells ohne Tastatursteuerung

Das Problem: Die meisten Slider-Apps und custom Karussells sind nur mit der Maus bedienbar. Tastaturnutzer können weder zwischen Slides navigieren noch den Slider pausieren. Screenreader lesen oft alle Slides gleichzeitig vor oder ignorieren sie komplett.

Die Lösung:

• Verwenden Sie Slider, die nativ ARIA-Attribute unterstützen (role="region", aria-roledescription="carousel", aria-label)
• Jeder Slide braucht role="group" und aria-roledescription="slide"
• Vor- und Zurück-Buttons müssen per Tastatur (Tab + Enter) erreichbar sein
• Ein Pause/Play-Button ist Pflicht für automatisch rotierende Slider
• Besser: Verzichten Sie auf automatisch rotierende Slider. Die Conversion-Daten sprechen ohnehin dagegen — statische Hero-Bilder performen in A/B-Tests fast immer besser

2. Custom Dropdown-Menüs und Filter

Das Problem: Shopifys Produktfilter und custom Dropdown-Menüs verwenden oft <div>-Elemente statt nativer HTML-Selects. Ohne korrekte ARIA-Rollen erkennen Screenreader diese nicht als interaktive Elemente. Tastaturnutzer können sie oft nicht öffnen oder darin navigieren.

Die Lösung:

• Verwenden Sie native <select>-Elemente wo möglich
• Bei custom Dropdowns: role="listbox", role="option", aria-expanded, aria-haspopup
• Pfeiltasten (hoch/runter) müssen innerhalb des Dropdowns navigieren
• Escape schließt das Dropdown und setzt den Fokus zurück
• Der aktuelle Zustand muss per aria-selected kommuniziert werden

3. Modale Dialoge — insbesondere Cookie-Banner

Das Problem: Cookie-Banner sind oft das erste Element, das Nutzer sehen — und das letzte, das barrierefrei umgesetzt wird. Typische Fehler: kein Fokus-Trapping (Tastaturnutzer können hinter dem Modal navigieren), keine Escape-Taste zum Schließen, Buttons ohne Labels, zu niedriger Kontrast.

Die Lösung:

• Cookie-Banner braucht role="dialog" und aria-modal="true"
• Beim Öffnen: Fokus auf den Dialog setzen
• Fokus-Trapping: Tab-Reihenfolge bleibt innerhalb des Dialogs
• Escape-Taste schließt den Dialog
• Alle Buttons ("Akzeptieren", "Ablehnen", "Einstellungen") müssen per Tastatur bedienbar sein
• Tipp: Prüfen Sie Ihren Cookie-Consent-Anbieter. Viele beliebte Lösungen (Cookiebot, Borlabs) bieten barrierefreie Versionen — aber Sie müssen diese aktiv konfigurieren

4. Produkt-Bildergalerien

Das Problem: Produktseiten haben oft Bildergalerien mit Thumbnails, Zoom-Funktion und Lightbox. Diese sind selten mit der Tastatur bedienbar. Screenreader erhalten keine Information darüber, welches Bild gerade angezeigt wird oder wie viele Bilder existieren.

Die Lösung:

• Jedes Produktbild braucht einen beschreibenden Alt-Text (nicht "Bild 1", sondern "Blaues Baumwoll-T-Shirt, Vorderansicht")
• Thumbnails brauchen aria-label mit Beschreibung
• Das aktuelle Bild wird per aria-current="true" markiert
• Zoom-Funktion muss per Tastatur aktivierbar sein
• Lightbox braucht Fokus-Trapping und Escape zum Schließen
• Gesamtanzahl der Bilder kommunizieren: "Bild 2 von 5"

5. Mega-Menüs

Das Problem: Große Navigations-Menüs mit mehreren Ebenen und Spalten sind für Tastaturnutzer oft ein Albtraum. Der Fokus springt unvorhersehbar, Untermenüs öffnen sich nicht oder schließen zu früh, und Screenreader verlieren die Orientierung.

Die Lösung:

• Hauptnavigation: <nav> mit aria-label="Hauptnavigation"
• Untermenüs: aria-expanded="true/false" auf dem übergeordneten Link
• Pfeiltasten für Navigation innerhalb des Menüs
• Escape schließt das aktuelle Untermenü
• Klare visuelle Hierarchie, die auch im Code abgebildet ist
• Tipp: Testen Sie Ihre Navigation einmal komplett nur mit der Tastatur. Wenn Sie nicht jeden Link erreichen oder nicht zurück können, hat Ihr Kunde das gleiche Problem

6. Hamburger-Menüs auf Mobile

Das Problem: Das mobile Hamburger-Menü (die drei Striche) ist oft ein <div> statt eines <button>, hat keinen zugänglichen Namen und das ausgeklappte Menü hat kein Fokus-Management.

Die Lösung:

• Hamburger-Icon als <button> mit aria-label="Menü öffnen" (bzw. "Menü schließen")
• aria-expanded="true/false" je nach Zustand
• Beim Öffnen: Fokus ins Menü setzen
• Beim Schließen: Fokus zurück auf den Hamburger-Button
• Alle Menü-Punkte per Tab erreichbar
• Escape schließt das Menü

Barrierefreiheit testen: Die richtigen Tools

Sie können Barrierefreiheit nicht rein visuell beurteilen. Sie brauchen Tools. Hier sind die besten — von kostenlos bis professionell:

Automatisierte Tests

Wichtiger Hinweis: Automatisierte Tools finden nur 30-40% aller Barrierefreiheits-Probleme. Ob ein Alt-Text sinnvoll ist, ob die Tab-Reihenfolge logisch ist, ob ein Screenreader-Nutzer den Checkout versteht — das kann kein automatisiertes Tool prüfen. Manuelle Tests sind unverzichtbar.

Manuelle Tests

1. Tastatur-Navigation-Test: Navigieren Sie Ihren gesamten Shop nur mit Tab, Enter, Escape und Pfeiltasten. Können Sie alles erreichen? Sehen Sie immer, wo der Fokus ist? Können Sie den Checkout abschließen?

2. Screenreader-Test: Installieren Sie NVDA (kostenlos für Windows) oder nutzen Sie VoiceOver (eingebaut in macOS/iOS). Navigieren Sie durch Ihren Shop und hören Sie, was vorgelesen wird. Ergibt es Sinn? Fehlen Informationen?

3. Zoom-Test: Zoomen Sie im Browser auf 200%. Bricht das Layout? Verschwinden Inhalte? Überlagern sich Elemente?

4. Farbkontrast-Test: Nutzen Sie den Colour Contrast Analyser oder die WAVE Extension. Prüfen Sie besonders: Buttons, Links, Placeholder-Texte in Formularen, Text auf Bildern.

5. Mobile Test: Testen Sie Touch-Targets. Sind alle Buttons und Links groß genug (mindestens 44x44px)? Können Sie alles problemlos antippen?

Umsetzungspriorität: Von Quick-Wins bis Entwickler-Aufgaben

Nicht alles muss gleichzeitig passieren. Hier ist eine realistische Priorisierung:

Quick-Wins (1-2 Stunden, ohne Entwickler)

Diese Änderungen können Sie sofort im Shopify-Admin umsetzen:

1. HTML-Sprache prüfen: Unter Online Store > Themes > Sprache sicherstellen, dass die Sprache auf Deutsch gesetzt ist
2. Alt-Texte für alle Produktbilder hinzufügen: Unter Produkte > Bearbeiten > Medien > Alt-Text. Beschreiben Sie, was auf dem Bild zu sehen ist — nicht "Produktbild", sondern "Schwarzer Lederrucksack mit Reißverschluss, Frontalansicht"
3. Alt-Texte für alle anderen Bilder: Slider, Banner, Kategorie-Bilder, Blog-Bilder
4. Link-Texte prüfen: "Hier klicken" und "Mehr erfahren" durch beschreibende Texte ersetzen ("Versandinformationen ansehen", "Alle T-Shirts anzeigen")
5. Seitentitel prüfen: Jede Seite braucht einen eindeutigen, beschreibenden Titel

Mittlerer Aufwand (1-2 Tage, mit Theme-Anpassungen)

Diese Änderungen erfordern Zugriff auf den Theme-Code (Liquid/CSS):

1. Farbkontraste korrigieren: CSS-Anpassungen für Texte, Buttons und Links, die den 4.5:1-Standard nicht erfüllen. Besonders kritisch: Placeholder-Texte in Formularen (oft hellgrau auf weiß), Buttons mit geringem Kontrast, Links, die sich nur durch Farbe vom Fließtext unterscheiden
2. Fokus-Indikatoren sichtbar machen: Viele Themes entfernen den Standard-Fokus-Ring per CSS (outline: none). Fügen Sie einen deutlich sichtbaren Fokus-Indikator hinzu — mindestens 2px solid in einer kontraststarken Farbe
3. Skip-to-Content-Link hinzufügen: Ein versteckter Link am Seitenanfang, der beim Fokus sichtbar wird und direkt zum Hauptinhalt springt
4. Formulare überarbeiten: Sichtbare Labels statt nur Placeholder-Texte, beschreibende Fehlermeldungen ("Bitte geben Sie eine gültige E-Mail-Adresse ein" statt "Ungültige Eingabe")
5. Überschriften-Hierarchie korrigieren: H1 nur einmal pro Seite, danach H2, H3 in logischer Reihenfolge — keine Lücken

Komplex (Entwickler erforderlich)

Diese Änderungen erfordern Shopify-Entwickler-Expertise:

1. ARIA-Labels für Custom Components: Alle Slider, Dropdowns, Mega-Menüs, Filter, Modals und Tabs mit korrekten ARIA-Attributen versehen
2. Fokus-Management für interaktive Elemente: Modale Dialoge, mobile Navigation, Produktgalerien — korrektes Fokus-Trapping und Fokus-Rücksetzung
3. Checkout-Optimierung: Obwohl Shopifys Standard-Checkout relativ gut ist, müssen Custom-Checkout-Erweiterungen (Shopify Plus) separat geprüft werden
4. Barrierefreie PDF-Dokumente: AGBs, Datenschutzerklärungen und Produktdatenblätter als barrierefreie PDFs neu erstellen — getaggt, strukturiert, mit Lesezeichen
5. Video-Untertitel: Alle Produktvideos und Erklärvideos mit synchronisierten Untertiteln versehen
6. Automatisierte Accessibility-Tests in der CI/CD-Pipeline: Mit Pa11y oder axe-core sicherstellen, dass neue Deployments keine Regressionen einführen

Was kostet es, einen Shopify-Shop barrierefrei zu machen?

Die ehrliche Antwort: Es kommt darauf an. Aber hier sind realistische Richtwerte basierend auf unserer Erfahrung:

Gesamtkosten: Realistische Szenarien

Zum Vergleich: Ein einziges Bußgeld kann bis zu 100.000 EUR betragen. Eine Abmahnung kostet schnell 5.000 - 15.000 EUR mit Anwaltskosten. Die Investition in Barrierefreiheit ist nicht nur rechtlich notwendig — sie ist wirtschaftlich sinnvoll.

Nicht vergessen: Barrierefreiheit verbessert auch die allgemeine Usability. Klare Formulare, gute Kontraste, saubere Navigation — davon profitieren alle Nutzer. Studien zeigen, dass barrierefreie Websites eine bis zu 15% höhere Conversion Rate haben als nicht-barrierefreie Shops.

Die häufigsten Irrtümer über Barrierefreiheit

Bevor wir zum Abschluss kommen, räumen wir mit den gängigsten Missverständnissen auf:

"Mein Shop ist doch schon responsiv — das reicht."

Nein. Responsives Design ist ein Aspekt von Barrierefreiheit, aber bei weitem nicht alles. Ein responsiver Shop kann trotzdem komplett unbedienbar sein, wenn Tastaturnavigation fehlt, Kontraste zu niedrig sind oder Screenreader nichts Sinnvolles vorlesen.

"Wir haben ein Accessibility-Overlay installiert — Problem gelöst."

Definitiv nein. Accessibility-Overlays (AccessiBe, UserWay und ähnliche) sind keine rechtssichere Lösung. Sie werden von der Accessibility-Community weitgehend abgelehnt, weil sie die tatsächlichen Probleme im Code nicht beheben, sondern nur überlagern. Gerichte in den USA haben bereits mehrfach entschieden, dass Overlays keinen ausreichenden Schutz bieten. Die europäische Rechtsprechung wird voraussichtlich folgen. Investieren Sie in echte Barrierefreiheit, nicht in Pflaster.

"Das BFSG gilt doch erst für neue Shops."

Falsch. Das BFSG gilt seit dem 28. Juni 2025 für alle bestehenden B2C-Online-Shops. Es gibt keine Bestandsschutz-Regelung und keine Übergangsfrist für bereits existierende Shops.

"Unser Theme sagt, es ist 'Accessibility-ready'."

"Accessibility-ready" bedeutet, dass das Theme eine gute Grundlage bietet — nicht, dass Ihr konkreter Shop mit Ihren Inhalten, Bildern, Videos und Anpassungen barrierefrei ist. Sie müssen trotzdem alle Inhalte prüfen und gegebenenfalls anpassen.

Ihr Fahrplan: So gehen Sie jetzt vor

Hier ist Ihr konkreter Aktionsplan — priorisiert nach Dringlichkeit:

Woche 1: Bestandsaufnahme

1. Führen Sie einen Lighthouse-Accessibility-Test durch (kostenlos in Chrome DevTools)
2. Installieren Sie axe DevTools und prüfen Sie Ihre Startseite, eine Produktseite und den Warenkorb
3. Machen Sie einen kompletten Tastatur-Test Ihres Shops
4. Dokumentieren Sie alle gefundenen Probleme

Woche 2-3: Quick-Wins umsetzen

1. Alle Alt-Texte hinzufügen oder korrigieren
2. HTML-Sprache und Seitentitel prüfen
3. Link-Texte beschreibend machen
4. Formulare mit sichtbaren Labels versehen

Woche 3-6: Theme-Anpassungen

1. Farbkontraste aller Texte und Buttons prüfen und korrigieren
2. Fokus-Indikatoren sichtbar machen
3. Skip-to-Content-Link einbauen
4. Überschriften-Hierarchie korrigieren

Woche 6-12: Komplexe Anpassungen

1. ARIA-Labels für alle Custom Components
2. Fokus-Management für Modals, Menüs und Galerien
3. Video-Untertitel erstellen
4. PDFs barrierefrei machen

Laufend: Überwachung

1. Automatisierte Tests bei jedem Deployment
2. Quartalmäßiger manueller Audit
3. Screenreader-Tests bei neuen Features

TG-AI: Barrierefreiheits-Audits und Implementierung für Shopify

Barrierefreiheit ist kein einmaliges Projekt — es ist ein fortlaufender Prozess. Und es erfordert Expertise, die über Standard-Webentwicklung hinausgeht. Sie müssen WCAG-Kriterien verstehen, mit Screenreadern testen, ARIA korrekt einsetzen und die rechtlichen Anforderungen des BFSG kennen.

Was wir anbieten:

• BFSG-Compliance-Audit: Umfassende Prüfung Ihres Shopify-Shops gegen WCAG 2.1 AA mit detailliertem Bericht und priorisiertem Maßnahmenkatalog
• Implementierung: Umsetzung aller notwendigen Anpassungen — von Alt-Texten bis ARIA-Labels, von Theme-Anpassungen bis Custom-Entwicklung
• Laufende Überwachung: Monatliche automatisierte und quartalmäßige manuelle Prüfungen, damit Ihr Shop auch nach Updates und neuen Inhalten konform bleibt

Sie wissen nicht, wo Ihr Shop steht? Lassen Sie uns einen unverbindlichen Erstcheck machen. In 30 Minuten geben wir Ihnen eine ehrliche Einschätzung, welche Probleme bestehen und was die Behebung kosten würde.

Die Frage ist nicht, ob Sie Ihren Shop barrierefrei machen — sondern wann. Das Gesetz läuft bereits. Die Behörden prüfen. Und Ihre Kunden — alle Ihre Kunden — verdienen einen Shop, den sie nutzen können.