BFSG Checkliste 2026: 12 Schritte zur barrierefreien Website
Stand: April 2026Lesezeit: 5 Minuten
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft. Unternehmen, die digitale Dienstleistungen für Verbraucher anbieten, müssen ihre Websites und Apps barrierefrei gestalten. Doch wo fängt man an? Diese Checkliste gibt Ihnen eine klare Schritt-für-Schritt-Anleitung.
Wer ist betroffen?
Das BFSG gilt für alle B2C-Unternehmen, die digitale Produkte oder Dienstleistungen anbieten. Online-Shops, Banken, Versicherungen, Reisebüros und SaaS-Anbieter sind typische Beispiele. Kleinstunternehmen (unter 10 Mitarbeiter, unter 2 Millionen Euro Umsatz) sind bei Dienstleistungen befreit.
Die 12-Punkte-Checkliste
1
Barrierefreiheits-Scan durchführen
Prüfen Sie Ihre Website mit einem WCAG 2.2 Scanner. BFSGuard bietet einen kostenlosen Erst-Scan.
2
ALT-Texte für alle Bilder
Jedes informative Bild braucht eine beschreibende Alternative. Dekorative Bilder: alt="".
3
Farbkontraste prüfen
Mindestens 4.5:1 für normalen Text, 3:1 für großen Text (WCAG AA).
4
Tastatur-Navigation testen
Alle Funktionen müssen ohne Maus erreichbar sein. Tab-Reihenfolge muss logisch sein.
5
Überschriften-Hierarchie
H1 → H2 → H3 ohne Sprünge. Screenreader nutzen Überschriften zur Navigation.
6
Formulare korrekt beschriften
Jedes Eingabefeld braucht ein sichtbares Label. Placeholder allein reicht nicht.
7
Links und Buttons beschreiben
"Mehr erfahren" ist schlecht. "BFSG-Checkliste herunterladen" ist gut.
8
Videos mit Untertiteln
Alle Videos brauchen Untertitel. Audiodeskription für wichtige visuelle Inhalte.
9
Sprach-Attribut setzen
Das HTML-Element braucht lang="de". Fremdsprachige Abschnitte einzeln markieren.
10
Mobile Barrierefreiheit
Touch-Ziele mindestens 44x44 Pixel. Inhalte müssen bei 200% Zoom nutzbar sein.
11
Barrierefreiheitserklärung veröffentlichen
Rechtlich vorgeschrieben nach § 14 BFSG. Muss den Konformitätsstatus und Kontaktdaten enthalten.
12
Monitoring einrichten
Barrierefreiheit ist kein Einmal-Projekt. Regelmäßige Scans erkennen neue Probleme frühzeitig.
Was passiert bei Verstößen?
Die Marktüberwachungsbehörden der Länder prüfen aktiv. Bei Verstößen drohen Bußgelder bis zu 100.000 Euro. Zusätzlich sind Abmahnungen durch Mitbewerber nach dem UWG möglich. Verbände und Behindertenorganisationen haben ein Klagerecht.
Automatische Lösung mit BFSGuard
BFSGuard automatisiert die meisten dieser Schritte: Der WCAG 2.2 Scanner identifiziert Probleme, die Auto-Fix Engine behebt sie automatisch, und der Erklärung Generator erstellt die rechtskonforme Barrierefreiheitserklärung. Das Monitoring sorgt für dauerhafte Compliance.
Häufige Fragen
Muss ich alle 12 Punkte sofort umsetzen?
Ja, das BFSG gilt seit Juni 2025 ohne Übergangsfrist für neue digitale Angebote. Bestehende Websites sollten schnellstmöglich angepasst werden.
Reicht ein Overlay-Widget?
Nein. Overlay-Tools wie AccessiBe oder UserWay werden von Experten und zunehmend auch von Gerichten als unzureichend bewertet. Sie reparieren nicht den Quellcode und lösen maximal 20-30% der WCAG-Probleme. BFSGuard setzt auf echte Code-Reparatur.
Was kostet Barrierefreiheit?
Mit BFSGuard ab 19,99 EUR/Monat. Ein professioneller BITV-Test kostet 3.000-6.000 EUR. Die Investition lohnt sich: 13 Millionen Menschen in Deutschland haben Einschränkungen — eine barrierefreie Website erreicht mehr Kunden.
Detaillierte Erläuterung der 12 Checklisten-Schritte
1. Bilder mit Alt-Texten versehen
Jedes <img>-Element braucht ein alt-Attribut. Inhalt bei dekorativen Bildern: alt="" (leer = wird übersprungen). Inhalt bei inhaltlichen Bildern: kurze Beschreibung dessen, was zu sehen ist und was die kommunikative Funktion ist. Häufiger Fehler: „Produktfoto" statt „Rote Wanduhr mit römischen Ziffern, 30 cm Durchmesser". Tipp: Notebook auf Bildlauf-Werkzeug schließen, durch jeden Screen scrollen, fragen: „Wenn ich dieses Bild jetzt nicht sähe — wäre ich verwirrt?"
2. Tastatur-Navigation sicherstellen
Vom Sprungmarken-Link am Anfang bis zum Footer-Cookie-Hinweis: alles per Tab erreichbar. Test: Maus abschalten, Cursor weglegen, mit Tab durch die Seite navigieren. Wenn Sie an einer Stelle hängen (Modal ohne Schließen-Button, Datepicker ohne Pfeiltasten, Bild-Slider ohne Tastatur-Befehle), haben Sie einen WCAG-2.1.1-Verstoß.
3. Kontrast prüfen (4,5:1 für Texte)
Werkzeug: WebAIM Contrast Checker. Mindestens 4,5:1 für normalen Text (12–18 px), 3:1 für größeren Text (≥18 px). Häufiges Problem: graue Hilfstexte (#999 auf #FFF = 2,8:1 — Verstoß).
4. Formulare mit Labels und Fehler-Indikatoren
Jedes <input> braucht ein <label> (verknüpft per for/id) oder ein aria-label. Fehlermeldungen in role="alert"-Container, damit Screenreader sie verkünden. Bei Pflichtfeldern aria-required="true" setzen.
5. Korrekte HTML-Semantik
Eine <h1> pro Seite, geordnete Überschriften-Hierarchie ohne Sprünge (nicht h1 → h3 ohne h2). Listen als <ul>/<ol>, nicht als <div>-Pseudolisten. Navigation in <nav>, Hauptinhalt in <main>, Footer in <footer>.
6. Skip-Links am Seitenanfang
Ein erster fokussierbarer Link <a href="#main-content">Zum Hauptinhalt springen</a>, der visuell ausgeblendet, aber per Tab sichtbar wird. Erspart blinden Nutzern, sich durch 30 Navigations-Links zu klicken.
7. Sprache deklarieren
<html lang="de"> auf der Wurzel. Bei eingestreuten fremdsprachigen Begriffen: <span lang="en">Customer Experience</span>. Screenreader nutzen das, um die Aussprache umzuschalten.
8. Fokus-Indikator nicht entfernen
Das berüchtigte outline:none; ohne Ersatz ist ein WCAG-2.4.7-Verstoß. Mindestens 2 px sichtbare Umrandung in einer kontrastreichen Farbe.
9. Tabellen korrekt strukturieren
Daten-Tabellen brauchen <th scope="col"> bzw. scope="row". Layout-Tabellen sind 2024 ohnehin obsolet — durch CSS-Grid/Flexbox zu ersetzen.
10. ARIA nur wo nötig
Erste WCAG-Regel: „Use semantic HTML." ARIA ist die letzte Wahl, wenn HTML-Semantik nicht ausreicht (z. B. selbst gebaute Komponenten wie Tab-Bars oder Autocomplete-Felder). Häufiger Fehler: role="button" auf einem <a>-Tag — überflüssig, ändert nichts.
11. Video- und Audio-Inhalte mit Alternativen
Videos brauchen Untertitel (WCAG 1.2.2 AA) und idealerweise eine Audiodeskription. Reine Audio-Inhalte brauchen ein Transkript. YouTube-Embeds: Caption-Track aktivieren und prüfen, ob automatische Untertitel sinnvoll sind.
12. § 14-Erklärung zur Barrierefreiheit veröffentlichen
Pflicht nach § 14 BFSG. Inhalt: Konformitätsstand, nicht barrierefreie Inhalte mit Begründung, Feedback-Mechanismus, Datum der letzten Überprüfung, Marktüberwachungsbehörde (MLBF Sachsen-Anhalt). Vorlage und Generator unter §14-Erklärung-Generator.
Schneller Selbst-Test
Anstatt diese Checkliste händisch durchzugehen, geben Sie Ihre URL bei bfsguard.de/#scan ein — Sie bekommen binnen 60 Sekunden einen automatisierten Bericht über alle 12 Punkte plus eine priorisierte Fix-Liste. Wenn Sie Hilfe brauchen, übernehmen wir die Umsetzung mit dem Komplett-Service für 499 € in 24 Stunden.
Verwandte Themen