Was ist neu in WCAG 2.2?
WCAG 2.2 ist kein kompletter Neustart, sondern baut auf WCAG 2.1 auf. Think of it wie ein Software-Update: Alle alten Funktionen bleiben, aber es kommen neue dazu.
Die Zahlen im Überblick:
- WCAG 2.1: 78 Erfolgskriterien
- WCAG 2.2: 86 Erfolgskriterien (77 alte + 9 neue)
- 1 Kriterium wurde entfernt (4.1.1 Parsing – war veraltet)
Wichtig zu wissen
Websites, die WCAG 2.2 erfüllen, sind automatisch auch WCAG 2.1 und 2.0 konform. Du musst also nicht von vorne anfangen, sondern nur die 9 neuen Kriterien umsetzen.
Die 9 neuen Erfolgskriterien im Detail
Die neuen Regeln teilen sich auf drei Bereiche auf: Level A (2 Kriterien), Level AA (4 Kriterien) und Level AAA (3 Kriterien). Für die meisten Websites sind Level A und AA relevant.
Level A:
2.4.11 Focus Not Obscured (Minimum) Stell dir vor, du navigierst mit der Tastatur durch eine Website. Plötzlich verschwindet der Focus-Punkt hinter einem Cookie-Banner oder Sticky-Header. Genau das verhindert dieses Kriterium.
So setzt du es um:
- Cookie-Banner dürfen Focus nicht vollständig verdecken
- Sticky-Header müssen Platz für Focus-Indikatoren lassen
- Mindestens ein Teil des fokussierten Elements muss sichtbar bleiben
2.5.7 Dragging Movements Drag-and-Drop ist praktisch, aber nicht alle können es nutzen. Menschen mit Handzittern oder Touch-Problemen brauchen Alternativen.
Praktische Lösungen:
- Sortierbare Listen: Zusätzliche Pfeiltasten zum Verschieben
- Slider: Klick auf die Leiste oder Eingabefeld für Werte
- Drag-Upload: Zusätzlicher „Datei auswählen“-Button
Level AA:
2.5.8 Target Size (Minimum) Touch-Ziele müssen mindestens 24×24 Pixel groß sein. Das klingt klein, ist aber ein großer Unterschied zu den bisherigen 44×44 Pixeln bei Level AAA.
Warum 24 Pixel? Es ist ein Kompromiss: Groß genug für die meisten Menschen, klein genug für moderne UI-Designs. Denk an kleine X-Buttons oder Icon-Links.
Ausnahmen gibt es für:
- Inline-Links im Fließtext
- Browser-eigene Elemente
- Essenzielle Designs (z.B. Karten-Apps)
3.2.6 Consistent Help Wenn du Hilfe anbietest, muss sie immer am gleichen Ort stehen. Klingt logisch, wird aber oft vergessen.
Beispiele für konsistente Hilfe:
- Kontakt-Link immer im Footer
- FAQ-Button immer rechts oben
- Live-Chat immer unten rechts
- Support-Nummer immer im Header
3.3.7 Redundant Entry Frag nicht zweimal nach denselben Daten in einer Session. Menschen mit kognitiven Beeinträchtigungen vergessen schnell, was sie schon eingegeben haben.
Praktische Umsetzung:
- Shipping = Billing Address: Checkbox zum Kopieren
- Formulare über mehrere Seiten: Daten vorausfüllen
- Checkout-Prozess: Bereits eingegebene Daten merken
Level AAA:
2.4.13 Focus Appearance Definiert genau, wie ein Focus-Indikator aussehen muss:
- Mindestens 2 Pixel dicker Rahmen um das Element
- Kontrast von 3:1 zwischen fokussiert und unfokussiert
- Groß genug, um gesehen zu werden
3.3.8 & 3.3.9 Accessible Authentication Schluss mit unlösbaren CAPTCHAs! Authentication muss barrierefrei werden.
Was ist erlaubt:
- Passwort-Manager
- Biometrische Authentifizierung
- Login-Links per E-Mail
- Zwei-Faktor per SMS
Was ist verboten:
- „Klicke alle Ampeln“ CAPTCHAs
- Mathematische Aufgaben
- Buchstaben-Wirrwarr erkennen
