Barrierefreie Website.
42 Prüfpunkte.

Wer ist verpflichtet — und wer nicht?

Das BFSG betrifft Wirtschaftsakteure, die bestimmte Produkte und Dienstleistungen für Verbraucher anbieten. Für Websites heißt das vor allem: alles, worüber Verbraucher online kaufen, buchen oder Verträge abschließen.

Unabhängig von der Pflicht gibt es zwei gute Gründe, es trotzdem zu tun. Erstens: Rund 10 Prozent der Bevölkerung haben eine Einschränkung, die die Nutzung einer Website beeinflusst — das sind Kunden, die ihr sonst verliert. Zweitens: Fast alles, was Barrierefreiheit verlangt, verbessert auch SEO und Bedienbarkeit für alle anderen.

WCAG, BITV, EN 301 549 — was gilt wofür?

• WCAG 2.2 (Web Content Accessibility Guidelines): der internationale Standard, gegliedert in die Stufen A, AA und AAA
• EN 301 549: die europäische Norm, die für digitale Produkte auf die WCAG verweist — Zielniveau ist AA
• BITV 2.0: die deutsche Verordnung für öffentliche Stellen, ebenfalls auf WCAG-Basis
• BFSG: das deutsche Gesetz für private Wirtschaftsakteure, seit 28. Juni 2025 in Kraft

Praktisch heißt das für euch: Ihr zielt auf WCAG 2.2 Stufe AA. Die Stufe AAA ist für die meisten Websites weder gefordert noch sinnvoll umsetzbar. Die folgende Checkliste orientiert sich an den vier WCAG-Prinzipien — wahrnehmbar, bedienbar, verständlich, robust.

Checkliste 1: Wahrnehmbar (12 Punkte)

1. 1Jedes inhaltstragende Bild hat einen aussagekräftigen Alternativtext, der die Information beschreibt, nicht das Bild
2. 2Rein dekorative Bilder haben ein leeres alt-Attribut (alt="") und werden nicht vorgelesen
3. 3Videos haben Untertitel; bei rein visuellen Informationen zusätzlich eine Audiodeskription oder ein Transkript
4. 4Audioinhalte haben ein Transkript
5. 5Kontrast bei normalem Text mindestens 4,5:1 gegenüber dem Hintergrund
6. 6Kontrast bei großem Text (ab 24 px, oder 18,5 px fett) mindestens 3:1
7. 7Kontrast bei Bedienelementen und Grafiken, die Information tragen, mindestens 3:1
8. 8Information wird nie allein über Farbe vermittelt — Fehlermeldungen brauchen Text oder Symbol, nicht nur Rot
9. 9Text lässt sich auf 200 Prozent vergrößern, ohne dass Inhalt verloren geht oder überlappt
10. 10Bei 400 Prozent Zoom bleibt der Inhalt einspaltig lesbar, ohne horizontales Scrollen
11. 11Inhalte funktionieren im Hoch- und Querformat, keine erzwungene Ausrichtung
12. 12Text ist echter Text, keine Grafik mit eingebettetem Text (Ausnahme: Logos)

Checkliste 2: Bedienbar (12 Punkte)

1. 1Alle Funktionen sind vollständig per Tastatur bedienbar — testet mit Tab, Enter, Leertaste, Pfeiltasten
2. 2Es gibt keine Tastaturfallen: Aus jedem Element kommt man per Tab wieder heraus
3. 3Der Fokus ist immer deutlich sichtbar — Outline nie ersatzlos entfernen
4. 4Die Fokusreihenfolge folgt der visuellen Leserichtung
5. 5Ein Sprunglink „Zum Inhalt springen“ steht am Seitenanfang zur Verfügung
6. 6Automatisch startende Inhalte länger als 5 Sekunden lassen sich pausieren oder stoppen
7. 7Keine Inhalte blinken mehr als dreimal pro Sekunde
8. 8Zeitlimits sind abschaltbar oder verlängerbar (relevant bei Buchungsstrecken)
9. 9Klickflächen sind mindestens 24 × 24 CSS-Pixel groß, besser 44 × 44
10. 10Jede Seite hat einen eindeutigen, aussagekräftigen title
11. 11Überschriften sind hierarchisch korrekt: eine H1, darunter H2, keine Ebene übersprungen
12. 12Linktexte sind aus sich heraus verständlich — „Mehr erfahren“ zwanzigmal auf einer Seite ist ein Verstoß

Punkt 1 bis 4 findet ihr in fünf Minuten selbst heraus: Klickt in die Adressleiste und navigiert nur mit der Tab-Taste durch eure Startseite. Wenn ihr nicht sehen könnt, wo ihr gerade seid, oder in einem Menü hängen bleibt, habt ihr euren ersten Befund.

Checkliste 3: Verständlich (10 Punkte)

1. 1Die Seitensprache ist im html-Element gesetzt (lang="de")
2. 2Fremdsprachige Passagen sind einzeln ausgezeichnet
3. 3Navigation und wiederkehrende Elemente sind auf allen Seiten an derselben Stelle
4. 4Gleiche Funktionen heißen überall gleich — nicht einmal „Senden“, einmal „Absenden“
5. 5Fokus oder Eingabe lösen keine unerwarteten Kontextwechsel aus (kein automatisches Absenden bei Auswahl)
6. 6Jedes Formularfeld hat ein sichtbares, verknüpftes Label — Platzhaltertext allein reicht nicht
7. 7Pflichtfelder sind als solche gekennzeichnet, nicht nur mit einem Sternchen ohne Erklärung
8. 8Fehlermeldungen benennen das betroffene Feld und sagen konkret, was zu tun ist
9. 9Eingabeformate werden vorab erklärt statt erst im Fehlerfall (z. B. Datumsformat)
10. 10Bei rechtlich bindenden Eingaben ist Prüfen, Korrigieren oder Widerrufen möglich

Checkliste 4: Robust (8 Punkte)

1. 1Valides HTML: keine doppelten IDs, korrekt geschlossene Elemente
2. 2Semantische Elemente statt div-Wüsten: header, nav, main, aside, footer, button, a
3. 3Interaktive Elemente sind echte Buttons und Links, keine klickbaren div-Container
4. 4ARIA nur wo nötig — falsches ARIA ist schlechter als kein ARIA
5. 5Statusmeldungen werden Screenreadern mitgeteilt (aria-live bei dynamischen Inhalten)
6. 6Modale Dialoge fangen den Fokus korrekt und geben ihn beim Schließen zurück
7. 7Eigene Bedienelemente haben Name, Rolle und Wert korrekt hinterlegt
8. 8Getestet mit mindestens einem echten Screenreader (NVDA unter Windows, VoiceOver unter macOS)

So testet ihr: Tools und Handprüfung

Wichtig: Automatisierte Tools finden je nach Studie nur 30 bis 40 Prozent der tatsächlichen Barrieren. Sie erkennen fehlende alt-Attribute und Kontrastfehler zuverlässig, können aber nicht beurteilen, ob ein Alternativtext sinnvoll ist oder die Fokusreihenfolge logisch. Plant für jede Website eine manuelle Prüfung ein — Tastaturtest, Screenreader-Test, Zoomtest.

Was Barrierefreiheit kostet

Die erste Zeile ist die Botschaft: Wenn Barrierefreiheit von Anfang an Teil des Projekts ist, kostet sie einen Bruchteil dessen, was Nachrüstung verschlingt. Bei jedem Relaunch, den ihr ohnehin plant, sollte sie deshalb ins Pflichtenheft — unabhängig davon, ob ihr aktuell unter die Pflicht fallt.

Die Barrierefreiheitserklärung

Betroffene Unternehmen müssen eine Erklärung zur Barrierefreiheit bereitstellen — leicht auffindbar, meist im Footer neben Impressum und Datenschutz. Sie enthält mindestens:

• Angabe, welche Anforderungen erfüllt werden und auf welcher Grundlage
• Auflistung nicht barrierefreier Inhalte mit Begründung
• Zeitplan, bis wann bekannte Mängel behoben werden
• Kontaktmöglichkeit für Rückmeldungen zu Barrieren, mit Reaktionsfrist
• Hinweis auf die zuständige Marktüberwachungsbehörde
• Datum der Erstellung und der letzten Überprüfung

Eine ehrliche Erklärung mit benannten Lücken und Zeitplan ist rechtlich deutlich besser als eine pauschale Konformitätsbehauptung, die einer Prüfung nicht standhält.