Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland. Für viele Unternehmen bedeutet das: Eure Website muss barrierefrei sein — oder ihr riskiert Abmahnungen und Bußgelder. Hier steht was du wissen musst, wen es betrifft und was konkret zu tun ist.
Das BFSG ist keine Empfehlung — es ist ein Gesetz. Seit dem 28. Juni 2025 drohen bei Verstößen Bußgelder bis zu 100.000 €.
Was das BFSG regelt
Das Barrierefreiheitsstärkungsgesetz setzt die EU-Richtlinie 'European Accessibility Act' (EAA) in deutsches Recht um. Es verpflichtet Unternehmen, digitale Produkte und Dienstleistungen barrierefrei zu gestalten. Websites und Online-Shops fallen explizit darunter.
Die technische Grundlage: WCAG 2.1 Level AA — die Web Content Accessibility Guidelines des W3C. Das ist der internationale Standard für barrierefreie Webinhalte. Wenn deine Website WCAG 2.1 AA erfüllt, erfüllst du auch das BFSG.
Wen betrifft es
Das BFSG betrifft alle Unternehmen die digitale Produkte oder Dienstleistungen anbieten — mit Ausnahmen für Kleinstunternehmen (unter 10 Mitarbeiter UND unter 2 Mio. € Jahresumsatz bei Dienstleistungen).
- Online-Shops und E-Commerce: Voll betroffen
- Bankdienstleistungen und Finanzprodukte: Voll betroffen
- Telekommunikation: Voll betroffen
- E-Books und E-Reader: Betroffen
- Dienstleistungen im elektronischen Geschäftsverkehr: Betroffen (= jede Firma die online verkauft oder Dienstleistungen online anbietet)
- Kleinstunternehmen (unter 10 MA + unter 2 Mio. €): Ausgenommen bei Dienstleistungen
- Reine Firmenwebsites ohne Verkauf/Buchung: Aktuell nicht direkt betroffen — aber Barrierefreiheit wird trotzdem erwartet
Auch wenn du als Kleinstunternehmen vom BFSG ausgenommen bist: Barrierefreiheit ist ein Qualitätsmerkmal. 15 % der Bevölkerung haben eine Behinderung. Das sind potenzielle Kunden die du verlierst.
WCAG 2.1 AA: Was das konkret bedeutet
WCAG 2.1 basiert auf vier Prinzipien: wahrnehmbar, bedienbar, verständlich, robust. Hier die wichtigsten konkreten Anforderungen:
Wahrnehmbar
- Bilder: Jedes Bild braucht einen Alt-Text der den Inhalt beschreibt. Dekorative Bilder: alt="" + aria-hidden="true"
- Videos: Untertitel für voraufgezeichnete Videos, Audiodeskription bei Bedarf
- Kontrast: Mindestens 4,5:1 für normalen Text, 3:1 für großen Text (über 18pt). Prüfbar mit WebAIM Contrast Checker
- Skalierbarkeit: Text muss auf 200 % vergrößerbar sein ohne Funktionsverlust
- Keine rein visuelle Information: Farbe allein darf nicht der einzige Informationsträger sein (z.B. rote Fehlermeldung nur in Rot → zusätzlich Text oder Icon)
Bedienbar
- Tastatur: Alle Funktionen müssen per Tastatur bedienbar sein — ohne Maus
- Focus-Indikatoren: Sichtbare Markierung welches Element gerade fokussiert ist (kein outline: none ohne Ersatz)
- Keine Tastaturfallen: Der Nutzer darf nicht in einem Element 'gefangen' werden
- Skip-Links: Link zum Hauptinhalt am Anfang der Seite (für Screenreader-Nutzer)
- Zeitlimits: Keine automatischen Timeouts ohne Warnung und Verlängerungsmöglichkeit
- Bewegung: Animationen müssen mit prefers-reduced-motion abschaltbar sein
Verständlich
- Sprache: html-Element braucht lang-Attribut (lang="de" für Deutsch)
- Konsistenz: Navigation an gleicher Stelle auf jeder Seite
- Formulare: Labels für jedes Eingabefeld, Fehlermeldungen klar und hilfreich
- Fehleridentifikation: Fehler werden benannt und Korrekturvorschläge gegeben
Robust
- Valides HTML: Semantisch korrekt — <button> für Aktionen, <a> für Links, <nav> für Navigation
- ARIA-Rollen: Nur wenn nötig, korrekt eingesetzt (aria-label auf Icon-Buttons, aria-live für dynamische Inhalte)
- Kompatibilität: Funktioniert mit aktuellen Browsern und Screenreadern (NVDA, VoiceOver, JAWS)
Die häufigsten Barrierefreiheits-Fehler
WebAIM analysiert jährlich die Top 1 Million Websites. Die häufigsten Fehler 2025:
- 01Zu geringer Kontrast (83 % aller Seiten) — hellgrauer Text auf weißem Grund
- 02Fehlende Alt-Texte bei Bildern (58 %) — Screenreader liest nur 'Bild' vor
- 03Fehlende Formular-Labels (46 %) — Input ohne <label> oder aria-label
- 04Leere Links (44 %) — Links ohne Text, nur ein Icon ohne Beschreibung
- 05Fehlende Dokumentsprache (28 %) — kein lang-Attribut im HTML
- 06Leere Buttons (27 %) — Buttons ohne zugänglichen Text
Wie du deine Website prüfst
Du brauchst keinen Experten um die gröbsten Probleme zu finden. Kostenlose Tools:
- WAVE (wave.webaim.org): Browser-Extension die Fehler direkt auf der Seite markiert
- Google Lighthouse: Im Chrome-Browser eingebaut, prüft Accessibility-Score
- axe DevTools: Browser-Extension für detaillierte Prüfung
- Manueller Test: Tab-Taste drücken und durch die ganze Seite navigieren — funktioniert alles?
- Screenreader-Test: VoiceOver (Mac) oder NVDA (Windows, kostenlos) aktivieren und die Seite 'hören'
Ein Lighthouse Accessibility-Score von 100 bedeutet nicht automatisch volle Barrierefreiheit. Automatische Tools finden nur ca. 30 % der Probleme. Manuelle Tests sind zusätzlich nötig.
Strafen und Konsequenzen
Bei Verstößen gegen das BFSG drohen:
- Bußgelder bis zu 100.000 €
- Marktüberwachungsbehörden können die Bereitstellung des Produkts/der Dienstleistung untersagen
- Abmahngefahr durch Verbraucherschutzverbände und Wettbewerber
- Reputationsschaden: Barrierefreiheit wird zunehmend öffentlich eingefordert
Die Durchsetzung startet nicht mit dem Strafzettel. Zuerst kommt eine Aufforderung zur Nachbesserung. Aber je früher du handelst, desto entspannter wird es.
Was 24HWEB standardmäßig liefert
Jede Website die wir bauen, erfüllt WCAG 2.1 AA als Standard — nicht als Aufpreis. Das umfasst:
- Semantisches HTML: Korrekte Heading-Hierarchie, <button>, <nav>, <main>, <footer>
- Alt-Texte auf allen Bildern
- Kontrast WCAG AA auf allen Text-Hintergrund-Kombinationen
- Vollständige Tastatur-Navigation mit sichtbarem Focus
- Skip-Link zum Hauptinhalt
- aria-label auf Icon-Buttons und Screenreader-relevanten Elementen
- prefers-reduced-motion: Animationen respektieren Nutzer-Einstellung
- Formular-Labels und Fehlerbehandlung nach WCAG-Standard
- lang-Attribut im HTML
Barrierefreiheit ist kein Feature — es ist die Grundlage guter Webentwicklung.