WCAG 2.2 Checkliste: Barrierefreie Website Schritt für Schritt

WCAG 2.2: Der aktuelle Standard für Barrierefreiheit

Die **Web Content Accessibility Guidelines (WCAG) 2.2** wurden im Oktober 2023 veröffentlicht und sind der aktuelle internationale Standard für barrierefreie Webinhalte. Mit dem BFSG wird die Einhaltung ab Juni 2025 für viele Unternehmen zur Pflicht.

Neue Kriterien in WCAG 2.2

WCAG 2.2 baut auf WCAG 2.1 auf und ergänzt **neun neue Erfolgskriterien**. Die wichtigsten für Webentwickler:

**Focus Not Obscured (Minimum) – Level AA**

•Interaktive Elemente dürfen beim Fokus nicht vollständig von anderen Elementen verdeckt werden

•Häufiges Problem: Sticky Headers oder Cookie-Banner verdecken fokussierte Elemente

**Dragging Movements – Level AA**

•Funktionen, die Ziehen erfordern, müssen auch per Klick/Tap bedienbar sein

•Beispiel: Slider müssen auch über Plus/Minus-Buttons steuerbar sein

**Target Size (Minimum) – Level AA**

•Interaktive Elemente müssen mindestens **24x24 CSS-Pixel** groß sein

•Ausnahmen: Inline-Links im Fließtext, browsereigene Elemente

Die praktische Checkliste

#### Struktur und Semantik

•[ ] Korrekte Überschriftenhierarchie (h1 → h2 → h3, keine Ebene überspringen)

•[ ] Semantische HTML-Elemente verwenden (`<nav>`, `<main>`, `<article>`, `<aside>`)

•[ ] Landmarks für Seitenbereiche definiert

•[ ] Sprache der Seite im `<html lang="de">` angegeben

•[ ] Sprachwechsel im Text mit `lang`-Attribut markiert

#### Bilder und Medien

•[ ] Alle informativen Bilder haben aussagekräftige Alt-Texte

•[ ] Dekorative Bilder haben `alt=""` und `role="presentation"`

•[ ] Videos haben Untertitel (Captions)

•[ ] Komplexe Grafiken haben eine Langbeschreibung

•[ ] Keine Informationen nur über Farbe vermittelt

#### Navigation und Interaktion

•[ ] Vollständige Tastaturnavigation möglich (Tab, Enter, Escape, Pfeiltasten)

•[ ] Sichtbarer Fokusindikator für alle interaktiven Elemente

•[ ] Skip-Link zum Hauptinhalt vorhanden

•[ ] Konsistente Navigation über alle Seiten

•[ ] Keine Tastaturfallen (Nutzer kann jedes Element verlassen)

#### Formulare

•[ ] Alle Formularfelder haben zugeordnete `<label>`-Elemente

•[ ] Pflichtfelder sind gekennzeichnet (nicht nur durch Farbe)

•[ ] Fehlermeldungen sind beschreibend und hilfreich

•[ ] Fehlererkennung erfolgt in Echtzeit, nicht erst nach Absenden

•[ ] Autovervollständigung über `autocomplete`-Attribute aktiviert

#### Farben und Kontraste

•[ ] Text-Kontrastverhältnis mindestens **4,5:1** (normaler Text)

•[ ] Großer Text (ab 18pt/14pt bold) mindestens **3:1**

•[ ] UI-Komponenten und Grafiken mindestens **3:1**

•[ ] Fokusindikatoren haben ausreichenden Kontrast

**Tool-Tipp:** Nutzen Sie den **axe DevTools Browser-Extension** für automatisierte Tests. Damit finden Sie ca. 30–40 % aller Barrieren. Manuelle Tests bleiben unverzichtbar.

Testen mit Screenreadern

•Windows:: NVDA (kostenlos) oder JAWS

•macOS:: VoiceOver (integriert)

•Mobile:: TalkBack (Android) oder VoiceOver (iOS)

Fazit