Was ist das BFSG und warum betrifft es deine Website?
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft und verpflichtet Unternehmen, digitale Produkte und Dienstleistungen barrierefrei zu gestalten. Das Gesetz setzt die EU-Richtlinie 2019/882 (European Accessibility Act) in deutsches Recht um. Wer nicht handelt, riskiert Bußgelder bis zu 100.000 EUR und Abmahnungen durch Wettbewerber oder Verbraucherverbände.
Barrierefreiheit bedeutet: Deine Website muss für alle Menschen nutzbar sein. Für die rund 10% der Bevölkerung mit Sehbehinderung, Hörbeeinträchtigung, motorischer Einschränkung oder kognitiver Beeinträchtigung. Aber auch für ältere Menschen, Nutzer mit temporären Einschränkungen (gebrochener Arm) oder situativen Barrieren (grelles Sonnenlicht auf dem Handy). Der technische Standard dahinter heißt WCAG 2.1 Level AA.
Gut zu wissen: Der Barrierefreiheit-Check läuft komplett in deinem Browser. Es werden keine Daten an einen Server gesendet, keine Cookies gesetzt und keine Anmeldung benötigt.
Wen betrifft das BFSG?
Das BFSG betrifft alle Unternehmen, die digitale Dienstleistungen anbieten oder Produkte online verkaufen. Betroffen sind Online-Shops, Buchungsportale, Bank- und Finanzdienstleistungen, Telekommunikationsdienste und E-Book-Plattformen. Reine Informationsseiten ohne Transaktionsmöglichkeit sind aktuell nicht direkt betroffen.
Es gibt eine Ausnahme für Kleinstunternehmen: Firmen mit weniger als 10 Mitarbeitern und unter 2 Millionen Euro Jahresumsatz, die ausschließlich Dienstleistungen anbieten, sind vom BFSG ausgenommen. Für den Online-Verkauf von Produkten gilt diese Ausnahme nicht.
Wichtig: Auch wenn du aktuell vom BFSG ausgenommen bist: Barrierefreiheit verbessert die Nutzererfahrung für alle Besucher und wird von Google als Ranking-Signal gewertet. Eine barrierefreie Website ist keine Last, sondern ein Wettbewerbsvorteil.
Die 8 wichtigsten Barrierefreiheits-Anforderungen (WCAG 2.1 AA)
Die technischen Anforderungen des BFSG basieren auf der EN 301 549, die wiederum auf den Web Content Accessibility Guidelines (WCAG 2.1, Level AA) aufbaut. Hier sind die 8 Punkte, die unser Check prüft, mit den jeweiligen WCAG-Referenzen.
1. Alt-Texte für Bilder (WCAG 1.1.1)
Jedes Bild auf deiner Website braucht eine beschreibende Textalternative im alt-Attribut. Screenreader lesen diesen Text vor, damit blinde Nutzer den Bildinhalt verstehen. Dekorative Bilder (Hintergründe, Schmuckelemente) bekommen ein leeres alt="", damit der Screenreader sie überspringt. Ohne Alt-Texte ist deine Website für blinde und sehbehinderte Menschen nicht nutzbar.
2. Tastatur-Bedienbarkeit (WCAG 2.1.1)
Alle Funktionen deiner Website müssen ohne Maus erreichbar sein. Nutzer müssen mit der Tab-Taste durch Links, Buttons und Formulare navigieren können. Das betrifft auch Dropdown-Menüs, modale Dialoge und interaktive Elemente. Viele Menschen mit motorischen Einschränkungen können keine Maus bedienen und sind auf Tastatur-Navigation angewiesen.
3. Ausreichende Kontraste (WCAG 1.4.3)
Text muss sich deutlich vom Hintergrund abheben. Der Mindestkontrast beträgt 4.5:1 für normalen Text und 3:1 für großen Text (ab 18px fett oder 24px normal). Hellgrauer Text auf weißem Hintergrund ist ein häufiger Verstoß. Du kannst den Kontrast mit dem kostenlosen WebAIM Contrast Checker prüfen.
4. Skalierbare Schriftgröße (WCAG 1.4.4)
Die Basis-Schriftgröße sollte mindestens 16px betragen. Noch wichtiger: Der Text muss sich per Browser-Zoom vergrößern lassen, ohne dass Inhalte verschwinden oder sich überlappen. Verwende relative Einheiten (rem, em) statt fixer Pixel-Werte. So kann der Browser den Text korrekt skalieren.
Klingt kompliziert? Bei KI-WebSichtbar ist Barrierefreiheit ab Werk Standard. WCAG 2.1 AA, semantisches HTML, korrekte Kontraste. Alles inklusive.
Jetzt anfragen5. Sichtbare Formular-Labels (WCAG 1.3.1)
Jedes Eingabefeld braucht ein sichtbares Label, das mit dem Feld verknüpft ist. Placeholder-Text (der graue Text im Feld) verschwindet beim Tippen und ist kein Ersatz für ein Label. Screenreader können unverknüpfte Felder nicht korrekt zuordnen. Ohne Labels wissen Nutzer mit Sehbehinderung nicht, welche Eingabe erwartet wird.
6. Überschriften-Hierarchie (WCAG 1.3.1)
Überschriften müssen in einer logischen Reihenfolge stehen: Eine H1 pro Seite, darunter H2-Sektionen, darunter H3-Untersektionen. Keine Ebenen überspringen (z.B. von H1 direkt zu H3). Screenreader-Nutzer navigieren oft über Überschriften, um schnell den gewünschten Abschnitt zu finden. Eine kaputte Hierarchie macht die Seite unübersichtlich.
7. Sichtbare Fokus-Indikatoren (WCAG 2.4.7)
Wenn ein Nutzer per Tab durch die Website navigiert, muss immer klar erkennbar sein, welches Element gerade fokussiert ist. Ein sichtbarer Fokus-Indikator (z.B. ein farbiger Rahmen um Buttons und Links) ist Pflicht. Viele Websites entfernen den Standard-Fokus-Rahmen per CSS (outline: none), ohne einen besseren Ersatz zu bieten. Das macht die Tastatur-Navigation unmöglich.
8. Layout bei 200% Zoom (WCAG 1.4.10)
Die Website muss bei 200% Browser-Zoom weiterhin vollständig nutzbar sein. Kein Text darf abgeschnitten werden, kein Inhalt darf sich überlappen, und es darf kein horizontales Scrollen nötig sein. Teste es selbst: Drücke Strg + Plus (oder Cmd + Plus auf dem Mac) bis der Zoom bei 200% steht. Funktioniert alles noch?
Overlay-Plugins vs. echte Barrierefreiheit
Barrierefreiheit-Overlays wie AccessiBe, UserWay oder EqualWeb versprechen eine schnelle Lösung. Ein JavaScript-Widget wird eingebunden und die Website ist angeblich barrierefrei. Das stimmt nicht. Overlays legen eine Schicht über die bestehende Website, die Barrieren kaschiert, aber nicht beseitigt.
Die Probleme mit Overlays sind gut dokumentiert:
- Screenreader-Konflikte: Overlays erzeugen zusätzlichen DOM, der Screenreader verwirrt. Betroffene berichten, dass Websites mit Overlay schlechter bedienbar sind als ohne.
- Kein rechtlicher Schutz: In den USA wurden bereits mehrere Unternehmen mit AccessiBe-Overlay erfolgreich verklagt. Ein Overlay schützt nicht vor Abmahnungen.
- Falsche Sicherheit: Unternehmen glauben, das Problem gelöst zu haben, und kümmern sich nicht um echte Barrierefreiheit im Code.
- Performance-Kosten: Overlays laden zusätzliches JavaScript (oft 100 KB+), das die Seitengeschwindigkeit verschlechtert.
Die European Disability Forum (EDF) und zahlreiche Barrierefreiheits-Experten raten explizit von Overlays ab. Echte Barrierefreiheit muss im Code der Website verankert sein: semantisches HTML, korrekte ARIA-Attribute, saubere Überschriften-Hierarchie, ausreichende Kontraste.
| Kriterium | Overlay-Plugin | Echte Barrierefreiheit |
|---|---|---|
| Screenreader-Kompatibilität | Oft verschlechtert | Voll funktionsfähig |
| Rechtlicher Schutz | Keiner (Klagen belegt) | BFSG- und WCAG-konform |
| Performance | 100 KB+ extra JavaScript | Keine Zusatzlast |
| Umsetzungsdauer | 5 Minuten (aber wirkungslos) | Im Code verankert |
| Nutzererfahrung | Inkonsistent, fehleranfällig | Nahtlos für alle |
Deine Website ist nicht barrierefrei? Wir bauen dir eine, die von Anfang an für alle zugänglich ist. Agentur-Qualität zum Freelancer-Preis. Festpreis ab 1.499 EUR.
Kostenloses ErstgesprächBFSG-Verstöße: Diese Strafen drohen
Das BFSG sieht Bußgelder von bis zu 100.000 EUR vor. Die Marktüberwachungsbehörden der Bundesländer sind zuständig und können anordnen, dass nicht konforme Produkte und Dienstleistungen vom Markt genommen werden. Seit dem 28. Juni 2025 ist die Übergangsfrist abgelaufen. Behörden und Verbände können jetzt durchsetzen.
Zusätzlich besteht ein Abmahnrisiko durch Wettbewerber und Verbraucherverbände nach dem UWG (Gesetz gegen den unlauteren Wettbewerb). Barrierefreiheit wird zunehmend zum Streitpunkt. In den USA sind ADA-Klagen gegen Websites bereits Alltag. Deutschland zieht nach.
Die Konsequenzen im Überblick:
- Bußgelder: Bis zu 100.000 EUR pro Verstoß
- Marktentfernung: Behörden können nicht konforme Dienste vom Markt nehmen
- Abmahnungen: Wettbewerber und Verbraucherverbände können nach UWG abmahnen
- Reputationsschaden: Öffentliche Nennung durch Marktüberwachungsbehörden möglich