TL;DR: WCAG 2.2 bringt 6 neue Erfolgskriterien die vor allem mobile Bedienbarkeit, Fokus-Sichtbarkeit und kognitive Zugänglichkeit verbessern. Wir erklären jedes Kriterium mit Praxisbeispielen und zeigen, wie du es umsetzt.
Was ist WCAG 2.2?
Die Web Content Accessibility Guidelines (WCAG) 2.2 wurden im Oktober 2023 als W3C-Empfehlung veröffentlicht. Sie erweitern WCAG 2.1 um sechs neue Erfolgskriterien und entfernen eines (4.1.1 Parsing — ist durch moderne Browser obsolet geworden).
Für österreichische Unternehmen, die das Barrierefreiheitsgesetz einhalten müssen, sind die WCAG 2.2 Kriterien zwar noch nicht verpflichtend (das BaFG referenziert WCAG 2.1), aber sie werden es voraussichtlich in der nächsten Aktualisierung. Wer jetzt schon darauf achtet, ist vorbereitet.
Die 6 neuen Kriterien im Detail
1. Focus Not Obscured (Minimum) — Level AA
Was es bedeutet: Wenn ein Element den Tastaturfokus erhält, darf es nicht vollständig von anderen Inhalten verdeckt werden. Mindestens ein Teil des fokussierten Elements muss sichtbar sein.
Praxis-Beispiel: Cookie-Banner. Der Klassiker. Ein Cookie-Banner am unteren Bildschirmrand verdeckt oft den Fokus auf Buttons oder Links darunter. Nutzer, die mit der Tastatur navigieren, sehen nicht, wo sie sich befinden.
Umsetzung:
- Cookie-Banner und Sticky-Header mit ausreichendem Scroll-Padding versehen
- CSS:
scroll-padding-bottommindestens so hoch wie das fixierte Element - Oder: Fokussierte Elemente automatisch in den sichtbaren Bereich scrollen
2. Focus Not Obscured (Enhanced) — Level AAA
Was es bedeutet: Die strengere Variante: Das fokussierte Element darf überhaupt nicht verdeckt werden — nicht mal teilweise.
Praxis-Tipp: Für Level AAA müssen alle Overlays, Sticky-Elemente und Popover so gestaltet sein, dass sie den Fokus nie verdecken. Das erfordert sorgfältiges Z-Index-Management und intelligentes Scrolling.
3. Dragging Movements — Level AA
Was es bedeutet: Wenn eine Funktion per Drag & Drop bedienbar ist, muss es eine Alternative geben, die nur einen einzelnen Klick/Tap erfordert.
Praxis-Beispiel: Slider und Karussells. Ein Bild-Slider, der nur per Wischen/Ziehen funktioniert, ist für Nutzer mit motorischen Einschränkungen nicht bedienbar. Es braucht Pfeil-Buttons als Alternative.
Weitere Beispiele:
- Sortierbare Listen (Drag to Reorder) → Brauchen "Nach oben/unten"-Buttons
- Karten mit verschiebbaren Pins → Brauchen Koordinaten-Eingabe
- Datei-Upload per Drag & Drop → Braucht "Datei auswählen"-Button
4. Target Size (Minimum) — Level AA
Was es bedeutet: Interaktive Elemente müssen eine Mindestgröße von 24×24 CSS-Pixeln haben — oder einen ausreichenden Abstand zu benachbarten Targets.
Warum das wichtig ist: Auf Smartphones tippen Menschen mit dem Daumen. Ein 16×16px Link ist quasi nicht treffbar. Apple empfiehlt 44×44pt, Google 48×48dp. WCAG 2.2 sagt: mindestens 24×24px.
Ausnahmen:
- Inline-Links in Fließtext (die werden durch den Zeilenabstand ausreichend groß)
- Elemente, deren Größe durch den User Agent bestimmt wird
- Elemente, die für die Funktion eine bestimmte Größe haben müssen
Quick Fix: In deinem CSS: min-height: 24px; min-width: 24px; für alle Buttons, Links und interaktive Elemente. Besser: 44px für Touch-Targets.
5. Consistent Help — Level A
Was es bedeutet: Hilfefunktionen (Kontaktformulare, Chat, FAQ, Telefonnummer) müssen über alle Seiten hinweg an der gleichen relativen Position zu finden sein.
Praxis-Beispiel: Wenn dein Chat-Widget auf der Startseite unten rechts ist, darf es auf der Produktseite nicht plötzlich oben links sein. Konsistenz ist der Schlüssel.
Was zählt als "Hilfe":
- Kontaktdaten (Telefon, E-Mail)
- Kontaktformular
- Chat/Chatbot
- FAQ oder Hilfeseite
- Self-Service-Portal
6. Accessible Authentication (Minimum) — Level AA
Was es bedeutet: Authentifizierung darf keinen kognitiven Funktionstest erfordern — wie das Merken eines Passworts, das Lösen eines Rätsels oder das Erkennen von Bildern (CAPTCHA).
Was erlaubt ist:
- Copy-Paste eines Passworts (aus dem Passwort-Manager)
- Biometrische Authentifizierung (Fingerabdruck, Face ID)
- OAuth/SSO ("Mit Google anmelden")
- Magic Links per E-Mail
- Object Recognition CAPTCHA, wenn es eine Alternative gibt
Was NICHT erlaubt ist:
- CAPTCHAs ohne Alternative (vor allem Text-CAPTCHAs)
- Sicherheitsfragen ("Name deines ersten Haustiers?")
- Transkription (Audiocode abtippen)
Tools zum Testen
Diese Tools helfen dir, WCAG 2.2 Konformität zu prüfen:
- WAVE Browser Extension — Visuelle Überlagerung von Accessibility-Problemen direkt auf der Seite
- axe DevTools — Chrome Extension für automatisierte Tests, findet ca. 57% aller WCAG-Probleme
- Google Lighthouse — In Chrome DevTools integriert, Accessibility Score 0-100
- Pa11y — Command-Line Tool für CI/CD Integration
- Manueller Test — Tab durch die Seite, Screenreader ausprobieren (VoiceOver auf Mac, NVDA auf Windows)
Fazit
WCAG 2.2 macht das Web besser — nicht nur für Menschen mit Behinderungen, sondern für alle. Größere Touch-Targets, keine CAPTCHA-Qual, konsistente Hilfe und sichtbarer Fokus verbessern die UX für jeden.
Bei r.digital bauen wir Websites, die WCAG 2.2 von Anfang an berücksichtigen. Semantisches HTML, richtige ARIA-Attribute, getestete Tastaturbedienung — kein Nachgedanke, sondern Teil des Prozesses.
Häufige Fragen
Muss ich WCAG 2.2 einhalten?
Das österreichische BaFG referenziert aktuell WCAG 2.1 Level AA. WCAG 2.2 ist noch nicht verpflichtend, wird aber voraussichtlich in der nächsten EU-Aktualisierung aufgenommen. Wer jetzt schon 2.2 umsetzt, ist auf der sicheren Seite.
Was ist der Unterschied zwischen Level A, AA und AAA?
Level A = Minimum, Level AA = empfohlen (und vom BaFG gefordert), Level AAA = Ideal. Die meisten Websites sollten Level AA anstreben. Level AAA ist für spezifische Anwendungen (z.B. Regierungswebsites).
Wie teste ich Focus Not Obscured?
Drücke Tab und navigiere durch deine Seite. Wird der Fokus-Indikator jemals von einem Cookie-Banner, Sticky-Header oder Popup verdeckt? Dann hast du ein Problem.
Sind meine bestehenden CAPTCHAs noch erlaubt?
Klassische Text-CAPTCHAs und reCAPTCHA v2 ("Klicke alle Ampeln") sind problematisch. Besser: reCAPTCHA v3 (unsichtbar), hCaptcha mit Accessibility-Modus, oder Honeypot-Felder als Alternative.
