Seit dem 28. Juni 2025 gilt das BFSG. Es macht Barrierefreiheit im Online-Shop zur Pflicht. Viele Händler sind unsicher: Was genau muss ich tun? Welche Strafen drohen? In diesem Artikel erklären wir die Anforderungen. Und zeigen, wie Sie Ihren Shop Schritt für Schritt barrierefrei machen.
⚖️ BFSG: Was das Gesetz fordert
Das Barrierefreiheitsstärkungsgesetz setzt die EU-Richtlinie 2019/882 um. Es betrifft alle Online-Shops, die Produkte oder Dienste an Verbraucher verkaufen. Die Frist lief am 28. Juni 2025 ab.
Wer ist betroffen? Alle Unternehmen mit mehr als 10 Mitarbeitern oder mehr als 2 Mio. Euro Umsatz. Kleinstunternehmen sind ausgenommen — aber nur vorerst.
Was droht bei Verstößen?
- Bußgelder bis zu 100.000 Euro
- Abmahnungen durch Verbraucherschützer
- Ausschluss von öffentlichen Aufträgen
- Reputationsschäden
📋 WCAG 2.1 AA: Die wichtigsten Kriterien
Das BFSG verweist auf die EN 301 549. Diese Norm basiert auf WCAG 2.1 Level AA. Die vier Prinzipien:
| Prinzip | Bedeutung | Beispiel im Shop |
|---|---|---|
| Wahrnehmbar | Inhalte für alle Sinne zugänglich | Alt-Texte für Produktbilder |
| Bedienbar | Navigation ohne Maus möglich | Checkout per Tastatur |
| Verständlich | Klare Sprache und Struktur | Fehlermeldungen im Formular |
| Robust | Kompatibel mit Hilfstechnologien | Korrektes HTML, ARIA-Labels |
🎯 Die 7 kritischen Bereiche im Shop
1. Produktseiten
Jedes Produktbild braucht einen Alt-Text. Er beschreibt das Produkt. Farben, Material und Größe gehören dazu. Produktvideos brauchen Untertitel.
2. Navigation
Die Menüführung muss per Tastatur bedienbar sein. Tab-Reihenfolge muss logisch sein. Dropdown-Menüs brauchen ARIA-Attribute. Ein Skip-Link ist Pflicht.
3. Suche und Filter
Die Suchfunktion muss per Tastatur erreichbar sein. Filter-Ergebnisse müssen live vorgelesen werden. Nutzen Sie aria-live für dynamische Inhalte.
4. Warenkorb
Artikel hinzufügen und entfernen muss ohne Maus funktionieren. Mengenänderungen brauchen klare Labels. Der Gesamtpreis muss immer zugänglich sein.
5. Checkout
Der kritischste Bereich. Formularfelder brauchen Labels. Fehler müssen klar benannt werden. Zahlungsmethoden müssen tastaturzugänglich sein. Captchas sind oft eine Barriere.
6. Kontraste und Farben
Text braucht mindestens 4,5:1 Kontrast. Große Schrift ab 18pt braucht 3:1. Informationen dürfen nicht nur durch Farbe vermittelt werden. „Rot = Fehler" reicht nicht.
7. Mobile Ansicht
Der Shop muss bei 200 % Zoom nutzbar bleiben. Touch-Ziele brauchen mindestens 44×44 Pixel. Gesten wie Wischen brauchen Alternativen.
🔧 Schritt-für-Schritt-Umsetzung
- Audit durchführen: Testen Sie den aktuellen Stand mit WAVE und Lighthouse.
- Probleme priorisieren: Checkout und Navigation zuerst. Dann Produktseiten.
- Alt-Texte ergänzen: Jedes Bild braucht einen beschreibenden Text.
- Tastaturnavigation prüfen: Tabben Sie durch den gesamten Shop.
- Kontraste anpassen: Nutzen Sie den WebAIM Contrast Checker.
- Formulare verbessern: Labels, Fehlermeldungen und ARIA-Attribute.
- Screenreader-Test: Testen Sie mit NVDA oder VoiceOver.
- Barrierefreiheitserklärung: Veröffentlichen Sie eine Erklärung auf Ihrer Seite.
🛠️ Test-Tools für Ihren Shop
| Tool | Art | Kosten |
|---|---|---|
| WAVE | Browser-Extension | Kostenlos |
| axe DevTools | Browser-Extension | Free-Plan |
| Lighthouse | Chrome integriert | Kostenlos |
| Pa11y | CLI-Tool | Open Source |
| NVDA | Screenreader (Windows) | Kostenlos |