Barrierefreiheit im Online-Shop: BFSG Checkliste

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) — und es betrifft praktisch jeden Online-Shop in Deutschland. Was viele Händler lange ignoriert oder unterschätzt haben, ist jetzt Pflicht: digitale Barrierefreiheit nach den Vorgaben der EU-Richtlinie 2019/882 (European Accessibility Act). Verstöße können Bußgelder bis zu 100.000 Euro nach sich ziehen.

Doch Barrierefreiheit ist weit mehr als eine lästige Pflicht. sie ist ein Wettbewerbsvorteil: 15 % der Weltbevölkerung leben mit einer Behinderung, und barrierefreie Shops haben nachweislich bessere Conversion-Rates, bessere SEO-Rankings und eine breitere Zielgruppe. In diesem Leitfaden erfährst du alles, was du wissen musst — von den rechtlichen Grundlagen bis zur technischen Umsetzung.

Was ist das BFSG?

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie 2019/882 in deutsches Recht um. Es verpflichtet Unternehmen, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten — einschließlich Online-Shops und E-Commerce-Plattformen.

Wen betrifft das BFSG?

Das Gesetz gilt für alle Unternehmen, die Produkte oder Dienstleistungen für Verbraucher anbieten — mit einer Ausnahme: Kleinstunternehmen mit weniger als 10 Beschäftigten und maximal 2 Millionen Euro Jahresumsatz sind ausgenommen. Für alle anderen gilt: Barrierefreiheit ist Pflicht.

Betroffen sind insbesondere:

• Online-Shops und E-Commerce-Plattformen
• Zahlungsdienstleistungen und Banking-Apps
• Telekommunikationsdienste
• E-Books und digitale Medien
• Ticket- und Check-in-Systeme

Welche Strafen drohen?

WCAG 2.2: Der technische Standard

Das BFSG verweist auf die harmonisierte europäische Norm EN 301 549, die wiederum auf den Web Content Accessibility Guidelines (WCAG) 2.2 basiert. WCAG 2.2 Level AA ist der Maßstab, den dein Online-Shop erfüllen muss.

WCAG basiert auf vier Prinzipien, die sich mit dem Akronym POUR zusammenfassen lassen:

1. Wahrnehmbar (Perceivable)

Alle Inhalte müssen für alle Sinne zugänglich sein — nicht nur visuell.

• Alternativtexte für Bilder: Jedes Produktbild braucht einen beschreibenden Alt-Text. Nicht "IMG_4532.jpg", sondern "Rotes Lederportemonnaie mit Reißverschluss, geöffnet".
• Untertitel für Videos: Produktvideos und Tutorials benötigen Untertitel oder Transkripte.
• Farbkontraste: Text muss einen Kontrastmindestwert von 4,5:1 (normaler Text) bzw. 3:1 (großer Text) zum Hintergrund haben.
• Skalierbare Texte: Nutzer müssen Text auf 200 % vergrößern können, ohne dass Inhalte abgeschnitten werden oder die Bedienbarkeit leidet.

2. Bedienbar (Operable)

Alle Funktionen müssen über verschiedene Eingabemethoden nutzbar sein.

• Tastaturnavigation: Jedes Element im Shop muss per Tastatur erreichbar und bedienbar sein — Menüs, Produktfilter, Warenkorb, Checkout.
• Fokus-Indikatoren: Aktuell fokussierte Elemente müssen visuell hervorgehoben werden (kein outline: none ohne Alternative).
• Keine Zeitlimits: Nutzer dürfen nicht unter Zeitdruck gesetzt werden (z.B. automatisch ablaufende Warenkörbe ohne Verlängerungsoption).
• Keine Bewegungsfallen: Animationen müssen pausierbar sein; prefers-reduced-motion muss respektiert werden.

3. Verständlich (Understandable)

Inhalte und Bedienung müssen klar und nachvollziehbar sein.

• Klare Sprache: Vermeide unnötigen Fachjargon. Fehlermeldungen müssen erklären, was schiefgegangen ist und wie man es behebt.
• Konsistente Navigation: Menüs und Navigationselemente müssen auf allen Seiten einheitlich sein.
• Formular-Labels: Jedes Eingabefeld braucht ein sichtbares Label — nicht nur Placeholder-Text.
• Fehleridentifikation: Bei Formularen müssen Fehler klar markiert und beschrieben werden.

4. Robust (Robust)

Inhalte müssen von assistiven Technologien interpretiert werden können.

• Valides HTML: Semantisch korrektes HTML mit korrekter Heading-Hierarchie (h1 > h2 > h3).
• ARIA-Labels: Interaktive Elemente ohne sichtbaren Text benötigen ARIA-Attribute.
• Kompatibilität: Der Shop muss mit gängigen Screenreadern (NVDA, JAWS, VoiceOver) funktionieren.

Checkliste für Online-Shops

Diese Checkliste deckt die kritischsten Barrierefreiheitsanforderungen für E-Commerce ab. Geh jeden Punkt systematisch durch.

Navigation & Struktur

• Alle Seiten haben eine korrekte Heading-Hierarchie (h1 > h2 > h3)
• Skip-Links ermöglichen das Überspringen der Navigation
• Breadcrumbs sind auf allen Unterseiten vorhanden
• Die Hauptnavigation ist per Tastatur vollständig bedienbar
• Mega-Menüs können mit Escape geschlossen werden
• Der aktuelle Standort ist visuell und programmatisch erkennbar
• Die Sprache der Seite ist im HTML-Tag deklariert (lang="de")

Produktseiten

• Alle Produktbilder haben beschreibende Alt-Texte
• Bildergalerien sind per Tastatur navigierbar
• Produktvarianten (Größe, Farbe) sind per Tastatur auswählbar
• Preise werden als Text dargestellt (nicht nur als Bild)
• Grundpreise sind korrekt ausgezeichnet
• Verfügbarkeitsinformationen sind für Screenreader zugänglich
• Zoom-Funktionen haben eine Tastatur-Alternative

Warenkorb & Checkout

• Der Warenkorb-Status wird bei Änderungen per ARIA-Live-Region kommuniziert
• Mengenänderungen sind per Tastatur möglich
• Der Checkout-Prozess ist vollständig per Tastatur durchführbar
• Fortschrittsanzeigen im Checkout sind für Screenreader zugänglich
• Formulare haben sichtbare Labels (nicht nur Placeholder)
• Fehler werden inline markiert und beschrieben
• Die Bestellbestätigung ist barrierefrei zugänglich

Visuelle Gestaltung

• Farbkontraste erfüllen WCAG AA (4,5:1 für Text, 3:1 für große Text)
• Informationen werden nie ausschließlich über Farbe kommuniziert
• Fokus-Indikatoren sind sichtbar und haben ausreichend Kontrast
• Text ist auf 200 % skalierbar ohne Informationsverlust
• Animationen respektieren prefers-reduced-motion
• Klickbare Elemente sind mindestens 24x24 Pixel groß

Formulare & Interaktionen

• Alle Formularfelder haben programmatisch zugeordnete Labels
• Pflichtfelder sind als solche markiert (nicht nur durch Farbe)
• Fehlermeldungen sind spezifisch und hilfreich
• Autocomplete-Attribute sind gesetzt (name, email, address)
• Custom-Dropdowns und -Slider sind ARIA-konform implementiert
• Modale Dialoge fangen den Fokus (Focus Trap)
• Cookie-Banner ist per Tastatur bedienbar und verdeckt keine Inhalte

Technische Umsetzung

Shopify

Shopify-Themes bieten eine solide Barrierefreiheits-Basis — besonders das kostenlose Theme "Dawn", das von Shopify als Referenz für Barrierefreiheit entwickelt wurde. Typische Anpassungen:

• Alt-Texte für alle Produktbilder pflegen (über das Admin-Panel)
• Theme-Code auf fehlende ARIA-Labels prüfen und ergänzen
• Focus-Styles überprüfen (viele Themes entfernen outline)
• Apps auf Barrierefreiheit testen (viele Third-Party-Apps sind nicht barrierefrei)
• Cookie-Banner-App durch barrierefreie Alternative ersetzen

WooCommerce

WooCommerce profitiert von der grundsätzlichen WordPress-Barrierefreiheit, erfordert aber aktive Optimierung:

• Theme auf WCAG-Konformität prüfen (AccessiBe Scanner oder axe DevTools)
• WooCommerce-Templates auf ARIA-Attribute und Keyboard-Navigation prüfen
• Barrierefreie Plugins bevorzugen (Qualität vor Quantität)
• Checkout-Formulare auf Label-Zuordnung und Fehlermeldungen prüfen

Die Barrierefreiheitserklärung

Das BFSG verlangt eine öffentlich zugängliche Barrierefreiheitserklärung auf deiner Website. Diese muss folgende Informationen enthalten:

• Stand der Barrierefreiheit: Vollständig, teilweise oder nicht konform mit EN 301 549
• Nicht barrierefreie Inhalte: Auflistung bekannter Barrieren mit Begründung
• Feedback-Mechanismus: Kontaktmöglichkeit für Nutzer, die auf Barrieren stoßen
• Durchsetzungsverfahren: Hinweis auf die zuständige Marktüberwachungsbehörde
• Erstellungsdatum: Wann die Erklärung erstellt/aktualisiert wurde

Die Erklärung sollte leicht auffindbar sein — idealerweise im Footer verlinkt, ähnlich wie Datenschutzerklärung und Impressum.

ROI von Barrierefreiheit

Barrierefreiheit ist keine reine Compliance-Maßnahme — sie liefert messbaren Business-Value.

Umsetzungsplan

Eine vollständige Barrierefreiheits-Optimierung ist ein Projekt, das je nach Shop-Komplexität 2–8 Wochen dauert. Wir empfehlen einen gestuften Ansatz:

Phase 1: Audit (Woche 1)

• Automatisierte Tests mit axe DevTools und Lighthouse
• Manuelle Tastatur-Navigation durch den gesamten Kaufprozess
• Screenreader-Test mit VoiceOver (Mac) oder NVDA (Windows)
• Dokumentation aller gefundenen Barrieren nach Schweregrad

Phase 2: Kritische Fixes (Woche 2–3)

• Farbkontraste korrigieren
• Alt-Texte für alle Bilder ergänzen
• Tastaturnavigation für Hauptprozesse sicherstellen
• Focus-Indikatoren implementieren
• Formular-Labels und Fehlermeldungen korrigieren

Phase 3: Erweiterte Optimierung (Woche 4–6)

• ARIA-Attribute für komplexe Widgets ergänzen
• Skip-Links und Landmark-Regionen implementieren
• Cookie-Banner barrierefrei gestalten
• Animationen und Bewegung prüfen (prefers-reduced-motion)
• Custom-Komponenten (Slider, Tabs, Modale) ARIA-konform machen

Phase 4: Dokumentation & Monitoring (Woche 7–8)

• Barrierefreiheitserklärung erstellen und veröffentlichen
• Monitoring-Prozess einrichten (vierteljährliche Re-Audits)
• Team-Schulung für barrierefreie Content-Erstellung
• Feedback-Kanal für Nutzer einrichten

Fazit

Barrierefreiheit im E-Commerce ist seit dem BFSG keine freiwillige Maßnahme mehr — sie ist gesetzliche Pflicht. Doch die gute Nachricht: Die meisten Anforderungen decken sich mit Best Practices für UX, SEO und Mobile-Optimierung. Ein barrierefreier Shop ist ein besserer Shop — für alle Nutzer.

Starte mit einem Audit, priorisiere die kritischsten Barrieren und arbeiten du dich systematisch durch die Checkliste. Die Investition amortisiert sich durch eine größere Zielgruppe, bessere Rankings und reduziertes Rechtsrisiko — und sie ist schlicht das Richtige.