WCAG 2.2 AA: Die praktische Checkliste

Was ist WCAG 2.2?

Die Web Content Accessibility Guidelines (WCAG) sind Richtlinien des W3C für zugängliche Webinhalte. Version 2.2 ist seit dem 5. Oktober 2023 eine W3C-Empfehlung. Sie ordnet ihre Anforderungen vier Prinzipien zu: wahrnehmbar, bedienbar, verständlich und robust.

Unter den Prinzipien stehen Richtlinien und darunter prüfbare Erfolgskriterien mit den Stufen A, AA und AAA. WCAG 2.2 übernimmt die Kriterien aus WCAG 2.1 bis auf eines: 4.1.1 Syntaxanalyse (Parsing) ist als veraltet entfallen. Neu sind neun Kriterien, sechs davon auf den Stufen A und AA.

Zu jedem Kriterium gibt es ein Understanding-Dokument mit Zweck, Beispielen und Techniken. Die Quick Reference lässt sich nach Stufe und Thema filtern und eignet sich gut als Arbeitsliste für dein Team.

Was bedeutet Konformität auf Stufe AA?

Für AA müssen alle Kriterien der Stufen A und AA erfüllt sein. WCAG nennt dafür fünf Konformitätsanforderungen: die Stufe selbst, vollständige Seiten, vollständige Prozesse, nur barrierefreiheitsunterstützte Techniken und keine Störung durch andere Inhalte.

Die Prozessregel ist in der Praxis besonders wichtig. Gehört eine Seite zu einem mehrstufigen Ablauf wie einem Checkout, müssen alle Seiten dieses Ablaufs die Stufe erfüllen. Ein unbedienbarer Zahlungsschritt verhindert also die Konformität des ganzen Bestellprozesses. AAA als allgemeine Vorgabe für eine ganze Website empfiehlt das W3C ausdrücklich nicht, weil manche Inhalte nicht alle AAA-Kriterien erfüllen können.

Ist WCAG 2.2 gesetzlich vorgeschrieben?

WCAG ist eine technische Richtlinie und kein deutsches Gesetz. BFSG und BITV 2.0 verlangen, dass digitale Angebote wahrnehmbar, bedienbar, verständlich und robust sind. Beide verknüpfen eine Vermutung der Konformität mit harmonisierten Normen, deren Fundstellen im Amtsblatt der EU veröffentlicht sind.

Welche Norm und welche WCAG-Fassung für dein Vorhaben maßgeblich sind, ergibt sich aus dem jeweiligen Rechts- oder Vertragsrahmen. WCAG 2.2 AA ist als Projektziel trotzdem sinnvoll: Wer sie erfüllt, deckt die Kriterien der Vorgängerversion bis auf das entfallene Parsing-Kriterium mit ab. Halte dein Ziel mit Fassung und Stufe schriftlich fest. Für öffentliche Stellen des Bundes veröffentlicht die Überwachungsstelle nach § 3 Absatz 5 BITV 2.0 aktuelle Informationen zu den zu beachtenden Standards.

Welche Punkte gehören auf die WCAG-Checkliste?

1. 1Bilder (1.1.1): Beschreibe informative Bilder passend zu ihrem Zweck. Dekorative Bilder erhalten einen leeren Alternativtext.
2. 2Struktur (1.3.1): Nutze echte Überschriften, Listen, Tabellen und semantisches HTML. Stelle eine sinnvolle Lesereihenfolge sicher.
3. 3Kontrast (1.4.3, 1.4.11): Normaler Text braucht mindestens 4,5:1, großer Text ab 18 Punkt oder 14 Punkt fett mindestens 3:1. Bedienelemente und wichtige Grafiken brauchen mindestens 3:1 zur Umgebung.
4. 4Medien (1.2.2, 1.2.5): Aufgezeichnete Videos mit Ton brauchen Untertitel. Für wichtige visuelle Informationen sieht Stufe AA eine Audiodeskription vor.
5. 5Vergrößerung (1.4.4, 1.4.10): Text muss sich auf 200 Prozent vergrößern lassen. Bei einer Breite von 320 CSS-Pixeln soll der Inhalt ohne horizontales Scrollen lesbar bleiben.
6. 6Tastatur (2.1.1, 2.1.2, 2.4.7): Alle Funktionen sind per Tastatur bedienbar, der Fokus ist sichtbar und bleibt in keinem Element hängen.
7. 7Orientierung (2.4.2, 2.4.4): Jede Seite hat einen aussagekräftigen Titel, und das Ziel eines Links geht aus dem Linktext oder seinem Kontext hervor.
8. 8Sprache (3.1.1): Die Hauptsprache der Seite ist im lang-Attribut angegeben, damit Screenreader richtig aussprechen.
9. 9Formulare (3.3.1, 3.3.2): Verbinde sichtbare Beschriftungen mit Feldern. Erkläre Eingabefehler und mögliche Korrekturen.
10. 10Technik (4.1.2): Eigene Bedienelemente geben Name, Rolle und Zustand an unterstützende Technologien weiter.

Was ist neu in WCAG 2.2?

1. 12.4.11 Fokus nicht verdeckt (AA): Ein fokussiertes Element darf nicht vollständig von eigenen Inhalten wie einem fixierten Header oder Cookie-Banner verdeckt sein.
2. 22.5.7 Ziehbewegungen (AA): Alles, was per Ziehen funktioniert, braucht eine Alternative mit einfachem Klicken oder Tippen.
3. 32.5.8 Zielgröße (AA): Klickziele sind mindestens 24 × 24 CSS-Pixel groß oder haben genug Abstand. Es gibt Ausnahmen, etwa für Links im Fließtext.
4. 43.2.6 Konsistente Hilfe (A): Wiederkehrende Hilfeangebote wie Kontakt oder Chat stehen auf allen Seiten an derselben relativen Stelle.
5. 53.3.7 Redundante Eingabe (A): Angaben, die im selben Ablauf schon gemacht wurden, werden automatisch übernommen oder zur Auswahl angeboten.
6. 63.3.8 Barrierefreie Authentifizierung (AA): Die Anmeldung verlangt keinen kognitiven Funktionstest wie ein Rätsel, außer es gibt eine Alternative oder Hilfe.

Welche WCAG-Kriterien kann ein Tool automatisch prüfen?

Automatische Werkzeuge erkennen zuverlässig, wenn etwas technisch fehlt: ein Alt-Attribut, die Sprache der Seite, ein Name für ein Formularfeld oder ausreichender Kontrast bei einfachem Text. Ob ein Alternativtext die richtige Aussage trifft, die Fokusreihenfolge sinnvoll ist oder eine Fehlermeldung verständlich bleibt, können sie nicht beurteilen.

Der Accessonaut-Check prüft mit axe-core automatisch prüfbare Regeln und zeigt Fundstellen nach Wichtigkeit. Sein Score beschreibt die geprüften Regeln und Seiten zum Prüfzeitpunkt. Er beantwortet nicht, ob alle WCAG-Kriterien erfüllt sind. Plane für Seiten mit Bildern, Formularen oder Medien deshalb immer eine manuelle Durchsicht ein.

Wie arbeitest du die Checkliste im Team ab?

Beginne mit den Kriterien der Stufe A, denn sie betreffen die grundlegendsten Barrieren. Prüfe neue Komponenten schon im Design, etwa Kontraste, Fokusdarstellung und Zielgrößen. Was im Entwurf passt, musst du nach dem Livegang nicht mehr umbauen.

1. 1Wähle einen realen Ablauf, zum Beispiel Produkt auswählen und bestellen.
2. 2Sammle automatische Findings und ordne sie dem betroffenen Schritt zu.
3. 3Ergänze manuelle Prüfungen und notiere Gerät, Browser und Ergebnis.
4. 4Behebe das Problem in der gemeinsamen Komponente, wenn es mehrere Seiten betrifft.
5. 5Prüfe denselben Ablauf nach der Änderung erneut und dokumentiere das Ergebnis.