Diese Checkliste deckt die wichtigsten Barrierefreiheits-Anforderungen für Webseiten und Online-Shops nach dem BFSG ab. Sie basiert auf WCAG 2.1 Level AA und der Europäischen Norm EN 301 549. Ein automatischer Scanner wie bf-check.de findet ca. 30–40% der Probleme sofort – die restlichen Punkte müssen manuell geprüft werden.
⚠ Rechtlicher Hinweis
Diese Checkliste dient als Orientierungshilfe und ersetzt keine Rechtsberatung. Für verbindliche Aussagen zur BFSG-Konformität konsultieren Sie einen spezialisierten Juristen. Die Checkliste erhebt keinen Anspruch auf Vollständigkeit aller WCAG-Kriterien.
1. Bilder & Medien
Nicht-Text-Inhalte müssen für alle zugänglich sein
Alle informativen Bilder haben aussagekräftige Alt-Texte
Alt-Texte beschreiben den Inhalt und Zweck des Bildes, nicht nur „Bild“ oder den Dateinamen.
WCAG 1.1.1 · Automatisch prüfbarDekorative Bilder haben
alt="" oder role="presentation"Rein visuelle Elemente (Trennlinien, Hintergrund-Grafiken) dürfen nicht vom Screenreader vorgelesen werden.
WCAG 1.1.1 · Manuell prüfenVideos haben Untertitel oder Transkript
Voraufgezeichnete Videos brauchen synchrone Untertitel. Live-Videos mindestens zeitnahe Untertitel.
WCAG 1.2.2 · Manuell prüfenAudio-Inhalte haben ein Transkript
Podcasts, Audio-Guides und Sprachnachrichten brauchen eine Textversion.
WCAG 1.2.1 · Manuell prüfen2. Struktur & Semantik
Korrekte HTML-Struktur ist das Fundament für assistive Technologien
Überschriften-Hierarchie ist korrekt (H1 → H2 → H3, keine Sprünge)
Genau eine H1 pro Seite. Keine Überschriften-Ebenen überspringen (z.B. H1 direkt zu H3).
WCAG 1.3.1 · Automatisch prüfbarLandmark-Regionen vorhanden (header, main, nav, footer)
Screenreader-Nutzer navigieren per Landmark. Ohne sie ist die Seitenstruktur unsichtbar.
WCAG 1.3.1 · Automatisch prüfbarSprache des Dokuments ist gesetzt (
lang="de")Ohne Sprach-Deklaration liest der Screenreader den Text mit falscher Aussprache vor.
WCAG 3.1.1 · Automatisch prüfbarListen, Tabellen und Zitate verwenden korrektes HTML
Echte Listen verwenden
<ul>/<ol>, Tabellen haben <th>-Header, Zitate verwenden <blockquote>.WCAG 1.3.1 · Manuell prüfen3. Kontraste & visuelles Design
Inhalte müssen für Menschen mit Sehschwäche erkennbar sein
Text hat mindestens 4,5:1 Kontrast zum Hintergrund
Normaler Text (<18pt): mindestens 4,5:1. Großer Text (≥18pt oder ≥14pt fett): mindestens 3:1.
WCAG 1.4.3 · Automatisch prüfbarInformationen werden nicht nur durch Farbe vermittelt
Fehlermeldungen nur in Rot? Links nur durch Farbe erkennbar? Zusätzlich Unterstreichung, Icon oder Text nutzen.
WCAG 1.4.1 · Manuell prüfenSeite ist bei 200% Zoom ohne Horizontal-Scroll nutzbar
Alle Inhalte müssen bei 200% Browser-Zoom vollständig sichtbar und bedienbar bleiben.
WCAG 1.4.4 · Manuell prüfenFokus-Indikator ist sichtbar
Bei Tastatur-Navigation muss der aktuell fokussierte Element klar erkennbar sein (Rahmen, Outline).
outline: none ohne Ersatz ist ein Verstoß.WCAG 2.4.7 · Manuell prüfen4. Tastatur & Navigation
Alles muss ohne Maus bedienbar sein
Komplette Seite ist per Tastatur navigierbar (Tab, Enter, Escape)
Jedes interaktive Element (Links, Buttons, Formulare, Menüs) muss per Tastatur erreichbar und bedienbar sein.
WCAG 2.1.1 · Manuell prüfenKeine Tastaturfallen (Fokus bleibt nirgends hängen)
Der Fokus darf nie in einem Element gefangen werden, aus dem man nicht per Tab oder Escape herauskommt.
WCAG 2.1.2 · Manuell prüfenSkip-Link vorhanden („Zum Inhalt springen“)
Am Seitenanfang muss ein Link stehen, der die Navigation überspringt und direkt zum Hauptinhalt führt.
WCAG 2.4.1 · Automatisch prüfbarTab-Reihenfolge ist logisch und folgt dem visuellen Layout
Die Reihenfolge der fokussierbaren Elemente muss dem visuellen Lesefluss entsprechen. Kein
tabindex > 0.WCAG 2.4.3 · Manuell prüfen5. Formulare & Eingaben
Formulare sind der kritischste Bereich – besonders im Checkout
Jedes Formularfeld hat ein sichtbares
<label>Placeholder allein reicht nicht – er verschwindet bei Eingabe. Jedes Feld braucht ein dauerhaft sichtbares Label.
WCAG 1.3.1 · Automatisch prüfbarFehlermeldungen sind klar, sichtbar und zugänglich
Fehler müssen per Text beschrieben werden (nicht nur rote Umrandung). Position: direkt am betroffenen Feld.
WCAG 3.3.1 · Manuell prüfenPflichtfelder sind gekennzeichnet (nicht nur visuell)
required-Attribut setzen und zusätzlich visuell markieren (z.B. Sternchen mit Erklärung).WCAG 3.3.2 · Manuell prüfenAutocomplete-Attribute für persönliche Daten gesetzt
Name, E-Mail, Adresse, Telefon, Kreditkarte:
autocomplete erleichtert die Eingabe für alle.WCAG 1.3.5 · Automatisch prüfbar6. ARIA & interaktive Elemente
Dynamische Inhalte müssen für Screenreader verständlich sein
ARIA-Attribute sind korrekt verwendet
Falsche ARIA-Rollen sind schlimmer als keine. Bevorzuge natives HTML (
<button> statt <div role="button">).WCAG 4.1.2 · Automatisch prüfbarModale Dialoge fangen den Fokus korrekt
Beim Öffnen eines Pop-ups/Modals muss der Fokus ins Modal wandern. Beim Schließen zurück zum Trigger.
WCAG 2.4.3 · Manuell prüfenDynamische Inhalte werden per Live-Region angekündigt
Warenkorb-Updates, Benachrichtigungen, Fehler:
aria-live="polite" oder role="alert" nutzen.WCAG 4.1.3 · Manuell prüfenBenutzerdefinierte Widgets haben Name, Rolle und Zustand
Tabs, Akkordeons, Dropdown-Menüs: korrekte ARIA-Rollen (
tablist, menu) und Zustände (aria-expanded, aria-selected).WCAG 4.1.2 · Manuell prüfen7. Links, Titel & Meta
Grundlegende Seiteninfos für Navigation und Orientierung
Jede Seite hat einen aussagekräftigen
<title>Der Seitentitel muss den Inhalt der Seite beschreiben – nicht nur „Home“ oder den Firmennamen.
WCAG 2.4.2 · Automatisch prüfbarLink-Texte sind aussagekräftig (kein „hier klicken“)
Jeder Link muss auch ohne umgebenden Text verständlich sein. „Mehr erfahren“ → besser: „BFSG-Leitfaden lesen“.
WCAG 2.4.4 · Automatisch prüfbarLinks zu externen Seiten sind erkennbar
Externe Links öffnen in neuem Tab? Dann kennzeichnen: visuell (Icon) und per
aria-label oder Hinweistext.WCAG 3.2.5 · Manuell prüfenSeitensprache wechselt korrekt bei fremdsprachigen Abschnitten
Englische Fachbegriffe oder fremdsprachige Absätze mit
lang="en" etc. auszeichnen.WCAG 3.1.2 · Manuell prüfenAutomatisch prüfen statt manuell abhaken
Unser Scanner prüft 15 dieser 28 Punkte automatisch in 30 Sekunden – kostenlos, ohne Anmeldung.
Jetzt kostenlos scannen →Voller PDF-Report mit Code-Fixes: einmalig 19 EUR
Quellen & Normen
- WCAG 2.1 – Web Content Accessibility Guidelines (W3C)
- EN 301 549 v3.2.1 – Europäische Norm für digitale Barrierefreiheit
- BFSG – Barrierefreiheitsstärkungsgesetz (BGBl. I 2021, S. 2970)
- BITV 2.0 – Barrierefreie-Informationstechnik-Verordnung
- BGG – Behindertengleichstellungsgesetz