Barrierefreie Websites: Praxisleitfaden zu WCAG 2.2 und BFSG

Barrierefreiheit wird oft am Ende eines Projekts geprüft und nachgerüstet. Das ist teuer und gelingt nur teilweise, denn viele Probleme entstehen schon durch Gestaltungs- und Strukturentscheidungen. Dabei ist guter Zugang meist keine Hexerei: Mit sauberem, semantischem HTML und bewusstem Design sind viele Anforderungen schon erfüllt. Dieser Artikel zeigt, worauf es ankommt, was sich mit WCAG 2.2 geändert hat, was das Barrierefreiheitsstärkungsgesetz (BFSG) bedeutet und wie du testest. Er ersetzt keine Rechtsberatung.

Warum es sich lohnt

Barrierefreie Seiten erreichen mehr Menschen: Nutzerinnen und Nutzer mit Seh-, Hör-, Bewegungs- oder Konzentrationseinschränkungen, ältere Menschen, Personen mit gebrochenem Arm oder grellem Sonnenlicht auf dem Display. Dazu kommen Vorteile für alle: bessere Bedienbarkeit, saubere Struktur für Suchmaschinen und einfachere Wartung. Außerdem gibt es rechtliche Vorgaben (siehe unten).

Semantisches HTML als Fundament

Der wichtigste Schritt ist zugleich der einfachste: das passende HTML-Element für den Zweck verwenden. <button> für Aktionen, <a> für Verweise, <label> für Formularfelder, <nav> für Navigation, <main> für den Hauptinhalt, Überschriften in sinnvoller Reihenfolge. Diese Elemente bringen Bedeutung und Tastaturbedienung mit. ARIA-Attribute ergänzen das, wo HTML nicht ausreicht, sie ersetzen kein schlechtes HTML. Ein häufiger Grundsatz: Kein ARIA ist besser als falsches ARIA.

Ein Beispiel von unserer eigenen Seite: Eine Bildergalerie (eine Liste von Screenshots) hatte am Listenelement eine ARIA-Rolle, die die Listenbedeutung aufhob. Dadurch waren die Einträge formal ungültig. Ein automatisches Prüfwerkzeug hat das gefunden, die Korrektur bestand darin, die überflüssige Rolle zu entfernen.

Worauf du achten solltest

• Tastatur: Alles Interaktive muss ohne Maus erreichbar und bedienbar sein, in sinnvoller Reihenfolge. Ein „Zum Inhalt springen“-Link hilft.
• Sichtbarer Fokus: Der Fokusrahmen darf nie entfernt werden und muss gut erkennbar sein.
• Kontraste: Text braucht ausreichenden Kontrast zum Hintergrund (mindestens 4,5:1, bei großer Schrift 3:1). Das gilt auch im Dunkelmodus.
• Alternativtexte: Bilder mit Bedeutung bekommen eine kurze, aussagekräftige Beschreibung, rein dekorative Bilder ein leeres alt.
• Formulare: Jedes Feld hat ein sichtbares Label, Fehlermeldungen sind verständlich und werden der Hilfstechnik mitgeteilt.
• Überschriften und Sprache: Eine logische Überschriftenstruktur und die richtige Seitensprache (lang).
• Bewegung: Animationen sollten sich reduzieren lassen (prefers-reduced-motion).
• Zoom und Größe: Inhalte bleiben bei 200 % Vergrößerung nutzbar. Klickflächen sind groß genug.

Was WCAG 2.2 ergänzt hat

Die Web Content Accessibility Guidelines 2.2 bauen auf früheren Versionen auf und ergänzen unter anderem: Der Fokus darf nicht von anderen Elementen verdeckt werden, Klick- und Tippflächen sollen mindestens 24 × 24 Pixel groß sein (oder ausreichend Abstand haben), Ziehbewegungen brauchen Alternativen, Hilfe-Angebote stehen konsistent an gleicher Stelle, Nutzer müssen bekannte Angaben nicht erneut eintippen, und die Anmeldung darf nicht von einem Gedächtnis- oder Rätseltest abhängen. Konformitätsstufe AA ist der übliche Maßstab.

Das Barrierefreiheitsstärkungsgesetz (BFSG)

Das BFSG setzt die europäische Richtlinie über Barrierefreiheitsanforderungen um und gilt in Deutschland seit dem 28. Juni 2025. Es betrifft bestimmte Produkte und Dienstleistungen für Verbraucherinnen und Verbraucher, darunter Online-Shops (Dienstleistungen im elektronischen Geschäftsverkehr), Bankdienstleistungen und E-Books. Für Kleinstunternehmen, die Dienstleistungen erbringen (weniger als 10 Beschäftigte und höchstens 2 Mio. Euro Umsatz oder Bilanzsumme), gibt es Ausnahmen. Ob du betroffen bist und welche Pflichten (zum Beispiel eine Barrierefreiheitserklärung) gelten, solltest du im Einzelfall prüfen oder prüfen lassen. Unabhängig davon ist Barrierefreiheit ein Qualitätsmerkmal.

Testen, nicht nur prüfen

Automatische Werkzeuge wie axe oder Lighthouse finden einen Teil der Probleme, je nach Untersuchung grob ein Drittel bis etwa die Hälfte. Wir prüfen unsere eigene Website zusätzlich automatisiert, das ersetzt aber keinen manuellen Test. Den Rest findest du nur durch:

1. Tastatur-Test: Bediene die Seite nur mit Tab, Leertaste, Enter und Pfeiltasten.
2. Screenreader-Test: mindestens ein Durchlauf mit VoiceOver (Mac/iOS) oder NVDA (Windows).
3. Zoom und Kontrast: 200 % vergrößern, Farben und Dunkelmodus prüfen.
4. Echte Nutzerinnen und Nutzer: wenn möglich, Menschen mit Einschränkungen einbeziehen.

Checkliste

1. Semantische Elemente statt generischer divs und spans.
2. Tastaturbedienung und sichtbarer Fokus.
3. Kontraste in allen Farbmodi.
4. Alternativtexte und Beschriftungen.
5. Formulare mit Labels und klaren Fehlermeldungen.
6. Überschriftenstruktur, Seitensprache, „Zum Inhalt springen“.
7. Bewegung reduzierbar, Inhalte zoombar.
8. Automatische Prüfung im Build, manueller Test vor dem Start.

Kurz beantwortet

Was kostet Barrierefreiheit? Von Anfang an eingeplant, wenig. Nachträglich kann es deutlich aufwendiger werden.

Reicht ein automatischer Test? Nein, er deckt nur einen Teil ab.

Gilt das nur für große Unternehmen? Nein, die Ausnahmen betreffen vor allem Kleinstunternehmen bei Dienstleistungen. Prüfe deinen Fall.

Hilft das beim SEO? Indirekt: Saubere Struktur, Überschriften und Alternativtexte nützen auch Suchmaschinen.

Fazit

Barrierefreiheit ist eine Frage der Haltung und des Handwerks: semantisches HTML, bedienbare Elemente, gute Kontraste und regelmäßiges Testen. Wer es von Anfang an mitdenkt, erreicht mehr Menschen und baut robustere Websites. Wenn du bei einem Projekt Unterstützung möchtest, findest du unser Angebot unter Entwicklung.