BFSG-Checkliste für Websites

Eine Checkliste ersetzt kein gründliches Audit – aber sie ist ein verlässlicher roter Faden, um die wichtigsten Baustellen abzugehen. Die folgende Liste fasst zusammen, worauf ich bei einer Seite mit Blick auf das BFSG und WCAG 2.1/2.2 AA zuerst schaue. Jeder Punkt verlinkt auf die Seite, die ihn vertieft.

Arbeite sie ruhig von oben nach unten ab. Vieles hängt zusammen, und wenn die ersten Blöcke sitzen, fallen die späteren leichter.

Hinweis. Diese Liste deckt die häufigsten und wirkungsvollsten Punkte ab, ist aber keine vollständige Wiedergabe aller WCAG-Kriterien und kein Rechtsrat. Sie ist als Startpunkt gedacht, nicht als Konformitätsnachweis.

Struktur & Semantik

• Genau ein <main>, sinnvolle <header>/<nav>/<footer> – siehe Struktur-Elemente.
• Lückenlose Überschriften-Hierarchie (genau eine <h1>, keine Sprünge).
• Interaktive Elemente sind echte <button> und <a> – siehe Buttons vs. Links.
• So wenig ARIA wie möglich, natives HTML zuerst – die erste Regel von ARIA.

Tastatur & Fokus

• Alles per Tastatur bedienbar, keine Fokusfallen.
• Fokus immer sichtbar und in logischer Reihenfolge – siehe Tastaturbedienung & sichtbarer Fokus.
• Ein Skip-Link führt zum Inhalt.
• Overlays managen den Fokus korrekt – siehe Dialoge & Modals.

Kontraste & Farbe

• Text erreicht 4,5:1, große Schrift und UI-Elemente 3:1 – siehe Farbkontraste.
• Farbe ist nie das einzige Signal (Fehler, Status, Links erkennbar auch ohne Farbe).

Formulare

• Jedes Feld hat ein verknüpftes Label.
• Pflichtfelder sind gekennzeichnet, Eingaben werden fair geprüft – siehe Validierung & Pflichtfelder.
• Fehlermeldungen sind verständlich, zugeordnet und werden angekündigt.
• Zusammengehörige Felder sind mit fieldset & legend gruppiert.

Bilder & Medien

• Sinnvolle Alt-Texte, leeres alt="" für Deko.
• Icons & SVGs sind versteckt oder beschriftet; Icon-Buttons haben einen Namen.
• Videos haben Untertitel, Audios eine Transkription.

Bewegung & Zeit

• Automatische Bewegung lässt sich pausieren, prefers-reduced-motion wird respektiert – siehe Slider & Karussells.
• Zeitlimits sind abschaltbar oder verlängerbar (wichtig im Checkout).

Tabellen & Daten

• Datentabellen nutzen <th>, scope und <caption> – siehe komplexe Datentabellen.
• Keine Tabellen fürs Layout.

Dokumente

• Verlinkte PDFs sind ebenfalls barrierefrei (getaggt, lesbar, mit Struktur) – das wird gern vergessen, gehört aber dazu.

Erklärung & Feedback

• Eine Barrierefreiheitserklärung ist vorhanden und aktuell.
• Es gibt einen Feedback-Weg, um Barrieren zu melden.

Geprüft?

• Automatisch mit axe/Lighthouse und manuell (Tastatur, Screenreader, Zoom) – siehe Barrierefreiheit selbst testen.
• Stichprobe mit echten Hilfsmitteln, nicht nur mit Tools.

Häufige Fragen

Bin ich nach dieser Liste „BFSG-konform“?

Sie bringt dich ein großes Stück weit und deckt die häufigsten Mängel ab. Ein belastbarer Konformitätsnachweis braucht aber ein vollständiges Audit gegen alle relevanten WCAG-Kriterien – idealerweise mit externer Prüfung.

In welcher Reihenfolge sollte ich vorgehen?

Von oben nach unten. Struktur, Tastatur und Kontraste sind das Fundament; sitzen sie, lösen sich viele Folgeprobleme fast von selbst.

Gibt es das auch zum Mitnehmen?

Eine kompakte Variante wandert in die Cheat-Sheets & Checklisten – praktisch fürs Abhaken im Team.

Fazit

Diese Checkliste ist mein roter Faden für eine BFSG-orientierte Prüfung: erst Struktur, Tastatur und Kontraste, dann Formulare, Medien und das Drumherum, am Ende das Testen mit echten Hilfsmitteln. Sie ersetzt kein vollständiges Audit – aber sie sorgt dafür, dass die großen Brocken nicht übersehen werden.