WCAG 2.2 AA: die Checkliste für Ihre Website

Was WCAG, Level A/AA und POUR bedeuten

Die Web Content Accessibility Guidelines (WCAG) des W3C sind der internationale Standard für barrierefreie Webinhalte. Sie sind um vier Prinzipien gebaut — wahrnehmbar, bedienbar, verständlich, robust (englisch POUR) — und untergliedern sich in Erfolgskriterien auf drei Stufen: A, AA und AAA. Rechtlich relevant ist Level AA, das alle A-Kriterien einschließt. AAA ist die höchste Stufe und wird nicht flächendeckend verlangt.

Neu in WCAG 2.2

WCAG 2.2 (seit Oktober 2023) baut auf 2.1 auf und ergänzt einige Erfolgskriterien. Auf Level A/AA sind das:

• 2.4.11 Fokus nicht verdeckt (Minimum): das fokussierte Element darf nicht vollständig von anderen Inhalten (z. B. Cookie-Banner, Sticky-Header) verdeckt sein.
• 2.5.7 Ziehbewegungen: was per Ziehen geht, muss auch mit einem einfachen Tippen/Klicken bedienbar sein.
• 2.5.8 Zielgröße (Minimum): interaktive Ziele mindestens 24×24 CSS-Pixel (oder ausreichend Abstand).
• 3.2.6 Konsistente Hilfe: Hilfe- und Kontaktmöglichkeiten stehen über die Seiten hinweg an gleicher Stelle.
• 3.3.7 Redundante Eingabe: bereits eingegebene Informationen nicht unnötig erneut abfragen.
• 3.3.8 Zugängliche Authentifizierung (Minimum): Login ohne kognitiven Test; Einfügen und Passwort-Manager erlauben.

1. Wahrnehmbar

• Textalternativen (1.1.1): jedes informative Bild hat einen sinnvollen Alt-Text; dekorative Bilder sind leer ausgezeichnet.
• Zeitbasierte Medien (1.2.x): Videos mit Untertiteln, Audio mit Transkript.
• Info und Beziehungen (1.3.1): Struktur über echtes HTML — Überschriften, Listen, Tabellen-Header, Formular-Labels — nicht nur optisch.
• Sinnvolle Reihenfolge (1.3.2): die Lese-/DOM-Reihenfolge ergibt auch ohne CSS Sinn.
• Nicht nur über die Sinne (1.3.3) / nicht nur Farbe (1.4.1): Anweisungen und Bedeutungen nicht allein über Farbe, Form oder Position vermitteln.
• Zweck von Eingabefeldern (1.3.5): Felder wie Name, E-Mail, Adresse maschinenlesbar auszeichnen (autocomplete).
• Kontrast (1.4.3): Text mindestens 4,5:1 (großer Text 3:1) gegen den Hintergrund.
• Textgröße und Reflow (1.4.4 / 1.4.10): Text auf 200 % vergrößerbar; Inhalt bei 320 px Breite (entspricht 400 % Zoom) ohne horizontales Scrollen nutzbar.
• Kontrast von Nicht-Text (1.4.11): Bedienelemente, Icons und Diagramme mindestens 3:1.

2. Bedienbar

• Tastatur (2.1.1 / 2.1.2): alles ist mit der Tastatur erreichbar und bedienbar, ohne Tastaturfalle.
• Genügend Zeit (2.2.1): Zeitlimits lassen sich abschalten, verlängern oder anpassen.
• Blitzen (2.3.1): nichts blitzt mehr als dreimal pro Sekunde.
• Navigierbarkeit (2.4.1 / 2.4.2): Blöcke überspringbar (Skip-Link); aussagekräftige Seitentitel.
• Linktexte (2.4.4): der Linktext sagt aus sich heraus, wohin er führt — kein „hier klicken“.
• Sichtbarer Fokus (2.4.7) und nicht verdeckt (2.4.11): der Tastaturfokus ist deutlich sichtbar und wird nicht von anderen Elementen überdeckt.
• Zeigergesten (2.5.7 / 2.5.8): Ziehbewegungen haben eine einfache Alternative; Klickziele sind mindestens 24×24 px.

3. Verständlich

• Seitensprache (3.1.1): die Sprache der Seite ist im HTML gesetzt (lang-Attribut).
• Konsistenz (3.2.3 / 3.2.4 / 3.2.6): Navigation, Benennung und Hilfe sind über die Seiten hinweg konsistent.
• Fehler erkennen und beheben (3.3.1 / 3.3.3): Fehler werden in Textform benannt und mit einem Korrekturhinweis versehen.
• Labels und Anweisungen (3.3.2): jedes Formularfeld hat ein sichtbares, verknüpftes Label.
• Redundante Eingabe (3.3.7): bereits erfasste Angaben werden nicht unnötig erneut verlangt.
• Zugängliche Authentifizierung (3.3.8): kein kognitiver Test als einzige Login-Hürde; Passwort-Manager und Einfügen sind erlaubt.

4. Robust

• Name, Rolle, Wert (4.1.2): Bedienelemente sind für assistive Technik als das erkennbar, was sie sind — besonders bei eigenen (ARIA-)Komponenten.
• Statusmeldungen (4.1.3): dynamische Meldungen (z. B. „In den Warenkorb gelegt“) werden für Screenreader angekündigt, ohne den Fokus zu stehlen (aria-live).

Was diese Checkliste nicht ersetzt

Diese Liste ist eine Orientierung, kein vollständiges Audit. Automatische Tests decken davon zuverlässig nur einen Teil ab (etwa Kontrast oder fehlende Alt-Attribute). Ob ein Alternativtext inhaltlich passt, ob die Vorlesereihenfolge sinnvoll ist oder ob ein Checkout End-to-End mit der Tastatur funktioniert, lässt sich nicht rein maschinell entscheiden — das braucht eine menschliche Prüfung. Was ein belastbares Audit umfasst und was es kostet, steht in „Was kostet ein Accessibility-Audit?“.

Warum diese Kriterien überhaupt verbindlich sind, ordnet „EAA und EN 301 549 erklärt“ ein. Wo im Shop die meisten dieser Punkte gleichzeitig brechen, zeigt „Barrierefreier Checkout: 7 häufige Fehler“.