Barrierefreiheit & BFSG

Barrierefreiheit im Online-Shop: BFSG und Umsetzung

Seit dem 28. Juni 2025 gilt das BFSG — und macht Barrierefreiheit im Online-Shop zur Pflicht. Wir erklären die Anforderungen aus der Beratungspraxis und zeigen, wie Sie Ihren Shop Schritt für Schritt barrierefrei machen.

Illustration eines barrierefreien Online-Shops mit Tastaturfokus und Alternativtext
28.06.2025 BFSG-Pflicht AA WCAG 2.1 14 Min. Lesezeit

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (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.

1. 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
Vergleich zweier Shop-Formularfelder: links ein nicht barrierefreies Feld mit zu schwachem Kontrast, rechts ein barrierefreies Feld mit klarem Label, hohem Kontrast und sichtbarem Tastaturfokus
Barrierefrei vs. nicht barrierefrei: Erst hoher Kontrast (mindestens 4,5:1), ein klares Label und ein sichtbarer Tastaturfokus machen ein Shop-Formularfeld WCAG-konform.

2. 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

3. Die 7 kritischen Bereiche im Shop

Sieben Bereiche entscheiden über die Barrierefreiheit Ihres Shops. Wir gehen sie der Reihe nach durch:

01

Produktseiten

Jedes Produktbild braucht einen Alt-Text. Er beschreibt das Produkt. Farben, Material und Größe gehören dazu. Produktvideos brauchen Untertitel.

02

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.

03

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.

04

Warenkorb

Artikel hinzufügen und entfernen muss ohne Maus funktionieren. Mengenänderungen brauchen klare Labels. Der Gesamtpreis muss immer zugänglich sein.

05

Checkout

Der kritischste Bereich. Formularfelder brauchen Labels. Fehler müssen klar benannt werden. Zahlungsmethoden müssen tastaturzugänglich sein. Captchas sind oft eine Barriere.

06

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.

07

Mobile Ansicht

Der Shop muss bei 200 % Zoom nutzbar bleiben. Touch-Ziele brauchen mindestens 44×44 Pixel. Gesten wie Wischen brauchen Alternativen.

4. Schritt-für-Schritt-Umsetzung

Gehen Sie strukturiert vor. Diese Reihenfolge hat sich in unseren Projekten bewährt:

  1. Audit durchführen: Testen Sie den aktuellen Stand mit WAVE und Lighthouse.
  2. Probleme priorisieren: Checkout und Navigation zuerst. Dann Produktseiten.
  3. Alt-Texte ergänzen: Jedes Bild braucht einen beschreibenden Text.
  4. Tastaturnavigation prüfen: Tabben Sie durch den gesamten Shop.
  5. Kontraste anpassen: Nutzen Sie den WebAIM Contrast Checker.
  6. Formulare verbessern: Labels, Fehlermeldungen und ARIA-Attribute.
  7. Screenreader-Test: Testen Sie mit NVDA oder VoiceOver.
  8. Barrierefreiheitserklärung: Veröffentlichen Sie eine Erklärung auf Ihrer Seite.

Tipp: Automatische Tools finden nur etwa 30 % der Probleme. Planen Sie immer einen manuellen Test mit Tastatur und Screenreader ein — gerade im Checkout, dem kritischsten Bereich Ihres Shops.

5. Test-Tools für Ihren Shop

Mit diesen Tools prüfen Sie Ihren Shop auf Barrierefreiheit — von der schnellen Browser-Prüfung bis zum echten Screenreader-Test:

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

6. Fazit: Jetzt handeln statt abwarten

Das BFSG ist seit dem 28. Juni 2025 verbindlich. Barrierefreiheit ist damit keine Kür mehr, sondern Pflicht — und sie zahlt sich aus: Ein barrierefreier Shop ist für mehr Menschen nutzbar, rankt besser und schützt Sie vor Bußgeldern und Abmahnungen. Beginnen Sie beim Checkout und der Navigation, dann arbeiten Sie sich zu Produktseiten und Kontrasten vor.

Sie wissen nicht, wo Ihr Shop steht? Wir prüfen ihn in einer WCAG-Analyse und Barrierefreiheits-Beratung und zeigen konkrete Maßnahmen. Für eine schnelle erste Einordnung eignet sich unser Online-Shop Assessment. Wer eine technische Sofortlösung sucht, findet sie in unserer Eye-Able BFSG-Beratung — die Erstberatung ist kostenfrei.

7. Häufige Fragen zur Shop-Barrierefreiheit

Ist Barrierefreiheit im Online-Shop Pflicht?

Ja. Seit dem 28. Juni 2025 gilt das BFSG. Es verpflichtet Online-Shops zur Barrierefreiheit. Ausnahmen gibt es nur für Kleinstunternehmen mit unter 10 Mitarbeitern und unter 2 Mio. Euro Umsatz.

Was passiert bei Verstößen gegen das BFSG?

Marktüberwachungsbehörden können Bußgelder bis zu 100.000 Euro verhängen. Zusätzlich drohen Abmahnungen durch Verbände. Das Risiko steigt mit der Sichtbarkeit Ihres Shops.

Welche WCAG-Stufe muss mein Shop erfüllen?

Das BFSG fordert WCAG 2.1 Level AA. Das umfasst Farbkontraste von mindestens 4,5:1, Tastaturnavigation und Alternativtexte für Bilder.

Wie teste ich meinen Shop auf Barrierefreiheit?

Nutzen Sie Tools wie WAVE, axe DevTools oder Lighthouse. Testen Sie zusätzlich manuell mit Tastatur und Screenreader. Automatische Tools finden nur etwa 30 % der Probleme.

Was kostet die Umsetzung der Barrierefreiheit?

Das hängt vom Umfang ab. Einfache Anpassungen wie Kontraste und Alt-Texte kosten wenige Stunden. Ein kompletter Umbau kann mehrere Wochen dauern. In einem kostenfreien Erstgespräch schätzen wir den Aufwand für Ihren Shop ein.

Shop-Barrierefreiheit umsetzen? Wir prüfen Ihren Shop und zeigen konkrete Maßnahmen — kostenfrei.

Jetzt Beratung anfragen

Weiterlesen

Weitere Artikel zur Barrierefreiheit