# BFSG-CHECKLISTE: Barrierefreie Website nach Barrierefreiheitsstärkungsgesetz

Stand: Mai 2026 — basierend auf BFSG (gültig seit 28.06.2025) und WCAG 2.2 AA

Diese Checkliste hilft Ihnen, Ihre Website systematisch auf BFSG-Konformität
zu prüfen. Pro Punkt: kurze Erklärung + konkreter Prüf-Schritt.

Vorlage erstellt von Webfeinschliff — https://www.webfeinschliff.de
Volltext-Ratgeber: https://www.webfeinschliff.de/ratgeber/website-barrierefreiheit/

================================================================
1. TEXTALTERNATIVEN FÜR BILDER UND GRAFIKEN
================================================================

[ ] Jedes inhaltsrelevante Bild hat ein aussagekräftiges alt-Attribut
[ ] Rein dekorative Bilder haben alt="" (leeres Attribut, nicht weglassen)
[ ] Icons mit Bedeutung haben aria-label oder eingebetteten Text
[ ] Komplexe Grafiken (Infografiken, Diagramme) haben Langbeschreibung
[ ] SVG-Logos mit Text-Inhalt nutzen <title>-Tag oder aria-label

Prüf-Tipp: Browser-Konsole → document.querySelectorAll('img:not([alt])')
sollte leer sein.

================================================================
2. FARBKONTRASTE NACH WCAG 2.2 AA
================================================================

[ ] Normalschrift: mindestens 4.5:1 Kontrast (Text zu Hintergrund)
[ ] Großschrift (ab 18pt oder 14pt bold): mindestens 3:1
[ ] UI-Komponenten und grafische Elemente: mindestens 3:1
[ ] Informationen werden nicht ausschließlich über Farbe vermittelt
    (z.B. Pflichtfelder nicht nur rot markieren — auch mit Text)
[ ] Hover- und Focus-Zustände haben ausreichenden Kontrast

Tool: contrastchecker.com oder Browser-Devtools (Lighthouse / axe)

================================================================
3. STRUKTURIERTE UND ZUGÄNGLICHE ÜBERSCHRIFTEN
================================================================

[ ] Genau ein <h1> pro Seite
[ ] H2 bis H6 in logischer Hierarchie (keine Sprünge: nicht h1 → h4)
[ ] Überschriften beschreiben Inhalt der folgenden Sektion
[ ] Visuell wie Überschrift gestaltete Texte sind auch als
    <h_>-Tag markiert (nicht nur per CSS)
[ ] Screen-Reader-Test: "Liste der Überschriften" zeigt sinnvolle Struktur

================================================================
4. VOLLSTÄNDIGE TASTATUR-NAVIGATION
================================================================

[ ] Alle interaktiven Elemente (Links, Buttons, Formulare) sind per
    Tab-Taste erreichbar
[ ] Tab-Reihenfolge ist logisch (links nach rechts, oben nach unten)
[ ] Focus-Zustand ist visuell deutlich sichtbar (Outline / Border)
[ ] Keine Tastatur-Fallen (man kommt überall wieder raus)
[ ] Skip-Link "Zum Hauptinhalt springen" am Anfang der Seite
[ ] Custom-Components (Dropdowns, Modals, Slider) bedienbar per
    Pfeiltasten, Enter, Escape

Prüf-Tipp: Maus wegklemmen, nur mit Tab/Shift+Tab/Enter/Pfeiltasten
durch die ganze Seite navigieren.

================================================================
5. FORMULARE — LABELS, FEHLERMELDUNGEN, ANWEISUNGEN
================================================================

[ ] Jedes Formularfeld hat ein zugehöriges <label>
    (entweder umschließend oder via for="id" verknüpft)
[ ] Pflichtfelder sind im Label markiert (nicht nur visuell mit *)
[ ] Eingabe-Format ist erklärt (z.B. "TT.MM.JJJJ" bei Datumsfeldern)
[ ] Fehlermeldungen sind klar formuliert UND mit dem Feld verknüpft
    (aria-describedby oder aria-invalid)
[ ] Submit-Button hat aussagekräftige Beschriftung
    (NICHT nur "OK" oder "Senden")
[ ] CAPTCHAs haben Audio-Alternative oder sind durch
    moderne Methoden (Honeypot) ersetzt

================================================================
6. BARRIEREFREIE MULTIMEDIA-INHALTE
================================================================

[ ] Videos haben Untertitel (closed captions)
[ ] Audio-Inhalte haben Transkript oder Untertitel
[ ] Videos mit reiner Sprache: Volltext-Transkript verfügbar
[ ] Wichtige Inhalte aus Videos auch als Text dargestellt
[ ] Audio startet NICHT automatisch beim Seitenaufruf
[ ] Videos haben aussagekräftigen Titel und Beschreibung

================================================================
7. PDF-DOKUMENTE
================================================================

[ ] PDFs sind getaggt (PDF/UA-konform)
[ ] Logische Lesereihenfolge ist gesetzt
[ ] Bilder im PDF haben Alt-Texte
[ ] Überschriften sind als Headings markiert
[ ] Tabellen haben korrekte Spalten-/Zeilen-Köpfe
[ ] Formulare im PDF sind beschriftet und tastatur-bedienbar
[ ] Sprache des Dokuments ist im PDF-Metadaten gesetzt

Mehr: https://www.webfeinschliff.de/ratgeber/pdf-beschreibbar-machen/

================================================================
8. VERZICHT AUF BLITZE UND FLACKERN
================================================================

[ ] Keine Inhalte blitzen mehr als 3 Mal pro Sekunde
    (Anfallsrisiko bei Epilepsie)
[ ] Animationen können vom Nutzer gestoppt werden
[ ] Auto-Play-Animationen über 5 Sekunden sind vermeidbar
[ ] Respektiert "prefers-reduced-motion"-Einstellung des Nutzers

================================================================
9. KLARE UND EINFACHE SPRACHE
================================================================

[ ] Komplizierte Fachbegriffe sind erklärt
[ ] Abkürzungen werden bei erster Verwendung ausgeschrieben
[ ] Sätze sind möglichst kurz (max. 15–20 Wörter pro Satz)
[ ] Inhalte in "Leichter Sprache" oder mindestens "Einfacher
    Sprache" wo passend
[ ] Sprache des Dokuments im HTML-Tag gesetzt: <html lang="de">

================================================================
10. RESPONSIVES DESIGN UND ZOOM-FUNKTION
================================================================

[ ] Website funktioniert bei 200 % Zoom ohne horizontales Scrollen
[ ] Inhalt passt sich an Bildschirmgrößen 320px–1920px an
    (Responsive Design)
[ ] Touch-Targets mindestens 44x44 px (Mobil-Bedienbarkeit)
[ ] Text bleibt bei Zoom lesbar (keine abgeschnittenen Inhalte)
[ ] Wichtige Funktionen sind auf Touch- UND Desktop-Geräten gleich
    nutzbar

================================================================
PFLICHT-DOKUMENT: BARRIEREFREIHEITSERKLÄRUNG
================================================================

Für BFSG-pflichtige Websites zusätzlich erforderlich:

[ ] Barrierefreiheitserklärung im Footer/Impressum verlinkt
[ ] Inhalt: Konformitätsstatus der Website
[ ] Inhalt: ggf. bekannte nicht-barrierefreie Inhalte mit Begründung
[ ] Inhalt: Kontaktmöglichkeit zur Meldung von Barrieren
[ ] Inhalt: Verweis auf zuständige Schlichtungsstelle

================================================================

WEITERE PRÜF-TOOLS:
- WAVE: wave.webaim.org
- axe DevTools: deque.com/axe
- Lighthouse Accessibility-Audit (im Chrome DevTools)
- BIK BITV-Test: bitvtest.de

WICHTIG: Eine Checkliste ersetzt keinen professionellen Audit.
Wenn Sie Rechtssicherheit brauchen, lassen Sie einen vollständigen
BFSG-Audit von Profis durchführen — typischer Aufwand 800–2.500 €,
inklusive priorisiertem Maßnahmenplan.

Mehr im Ratgeber:
https://www.webfeinschliff.de/ratgeber/website-barrierefreiheit/

Beratung:
https://www.webfeinschliff.de/kontakt/
mail@webfeinschliff.de | 09365 8882310