Die neuen WCAG-2.2-Kriterien im Detail

WCAG 2.2 bringt neun neue Erfolgskriterien (und entfernt 4.1.1 „Parsing“). Der Überblick nennt sie kurz – hier nehme ich die praktisch wichtigsten einzeln auseinander, mit dem, was sie konkret von dir verlangen.

2.5.8 Zielgröße (Minimum) – AA

Bedienelemente müssen mindestens 24 × 24 px groß sein – oder genug Abstand zu Nachbarn haben, sodass ein 24-px-Kreis nicht zwei Ziele trifft. Das hilft allen mit motorischen Einschränkungen und am Touchscreen.

.icon-button {
  min-width: 24px;
  min-height: 24px;
}

Ausnahmen gibt es für Links im Fließtext und für Elemente, deren Größe vom Browser bestimmt wird.

2.4.11 Fokus nicht verdeckt (Minimum) – AA

Das gerade fokussierte Element darf nicht vollständig verdeckt werden – etwa von einem Sticky-Header oder einem Cookie-Banner. Häufige Ursache ist scroll-margin, das fehlt:

:target,
:focus {
  scroll-margin-top: 6rem; /* Platz unter dem Sticky-Header */
}

Die Schwester 2.4.12 (Fokus nicht verdeckt, Enhanced) verlangt auf AAA, dass gar nichts verdeckt wird.

2.4.13 Fokus-Aussehen – AAA

Der Fokusindikator muss ausreichend groß und kontrastreich sein. Das ist ein AAA-Kriterium – Pflicht ist es für AA nicht, aber ein deutlich sichtbarer Fokus ist ohnehin gute Praxis.

2.5.7 Ziehbewegungen – AA

Alles, was per Ziehen (Drag & Drop) funktioniert, muss auch mit einem einfachen Tippen oder Klicken gehen – etwa ein Schieberegler zusätzlich über Plus/Minus-Knöpfe, eine sortierbare Liste zusätzlich über „nach oben/unten“-Buttons. Ziehen darf eine Option sein, nie die einzige.

3.3.8 Zugängliche Authentifizierung (Minimum) – AA

Eine Anmeldung darf nicht an einem kognitiven Test scheitern: kein Abtippen aus dem Gedächtnis, keine Rätsel-CAPTCHAs als einziger Weg. Erlaubt sind u. a. Passwort-Manager (kein Kopierverbot!), das Einfügen von Codes und biometrische Verfahren.

<!-- Hilft Passwort-Managern und erfüllt das Kriterium -->
<input type="password" autocomplete="current-password" />

3.2.6 Konsistente Hilfe – A & 3.3.7 Redundante Eingabe – A

• Konsistente Hilfe (A): Hilfsangebote (Kontakt, Suche, Chat) stehen über Seiten hinweg an derselben Stelle in derselben Reihenfolge.
• Redundante Eingabe (A): Bereits gemachte Angaben werden im selben Vorgang nicht erneut abgefragt (oder sind vorausgewählt) – wichtig etwa im Checkout.

Randnotiz – das Muster dahinter. Auffällig viele der Neuzugänge zielen auf Tastatur, Fokus und kognitive Last statt auf reine Wahrnehmung. WCAG 2.2 macht damit explizit, was bedienbar und verständlich in der Praxis bedeutet.

Häufige Fehler

• Icon-Buttons unter 24 px ohne ausreichenden Abstand.
• Sticky-Header ohne scroll-margin, der den Fokus verdeckt.
• Drag & Drop ohne Klick-Alternative.
• Rätsel-CAPTCHA als einziger Anmeldeweg.
• Kopier-Verbot im Passwortfeld, das Passwort-Manager aussperrt.

Häufige Fragen

Muss ich für das BFSG schon WCAG 2.2 erfüllen?

Der verbindliche Verweis lautet auf 2.1 AA. Fachlich empfehle ich 2.2 AA – die neuen Kriterien sind günstig umzusetzen und lösen reale Probleme.

Sind alle neun Kriterien Pflicht für AA?

Nein. Auf AA kommen 2.5.8, 2.4.11, 2.5.7 und 3.3.8 hinzu, dazu zwei auf A (3.2.6, 3.3.7). Die übrigen sind AAA.

Gilt 24 px auch für Links im Text?

Inline-Links im Fließtext sind ausgenommen. Gemeint sind eigenständige Bedienelemente wie Buttons und Icons.

Fazit

WCAG 2.2 schärft vor allem Tastatur, Fokus und kognitive Last: Zielgröße (24 px), Fokus nicht verdeckt, Ziehbewegungen mit Alternative und zugängliche Anmeldung sind die AA-Punkte, die du kennen musst. Keiner davon ist teuer – die meisten löst gutes Handwerk an Tastatur und Fokus ohnehin mit.