Die WCAG 2.2 sind die internationalen Richtlinien für barrierefreie Websites, herausgegeben vom World Wide Web Consortium (W3C). Sie beschreiben in prüfbaren Kriterien, was eine Website erfüllen muss, damit Menschen mit Seh-, Hör-, Motorik- oder kognitiven Einschränkungen sie nutzen können. Version 2.2 erschien im Oktober 2023 und brachte neun neue Kriterien, sechs davon zählen für die übliche Stufe AA. Die meisten betreffen Dinge, die jeder kennt, der schon einmal mit dem Daumen einen winzigen Knopf verfehlt oder ein Passwort abgetippt hat. Wer Websites nach WCAG 2.1 gebaut hat, muss nicht von vorn anfangen, sollte aber gezielt nachprüfen.
Wie die WCAG aufgebaut sind
Die WCAG stehen auf vier Grundsätzen. Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. Darunter liegen Richtlinien und darunter die eigentlichen Erfolgskriterien, jeweils mit einer Nummer und einer Stufe:
- Stufe A: die Grundlagen, etwa Alternativtexte für Bilder und Bedienung per Tastatur.
- Stufe AA: der übliche Maßstab, auf den sich Gesetze und Normen beziehen, etwa ausreichende Kontraste.
- Stufe AAA: erhöhte Anforderungen, die selten vollständig verlangt werden.
Die WCAG 2.2 sind seit 2025 auch als internationale Norm ISO/IEC 40500:2025 veröffentlicht. In Europa verweist die Norm EN 301 549 auf die WCAG. Ihre aktuelle Fassung bezieht sich noch auf WCAG 2.1, eine neue Fassung mit WCAG 2.2 ist in Arbeit.
Die neun neuen Kriterien
| Nummer | Kriterium | Stufe | Worum es geht |
|---|---|---|---|
| 2.4.11 | Fokus nicht verdeckt (Minimum) | AA | Das Element mit dem Tastaturfokus darf nicht komplett hinter einer festen Kopfzeile oder einem Banner verschwinden. |
| 2.4.12 | Fokus nicht verdeckt (erweitert) | AAA | Der Fokus ist gar nicht verdeckt. |
| 2.4.13 | Aussehen des Fokus | AAA | Der Fokusrahmen ist groß und kontrastreich genug. |
| 2.5.7 | Ziehbewegungen | AA | Was sich ziehen lässt, etwa ein Schieberegler, geht auch mit einfachem Klicken. |
| 2.5.8 | Zielgröße (Minimum) | AA | Klickziele sind mindestens 24 mal 24 Pixel groß oder haben genug Abstand. |
| 3.2.6 | Einheitliche Hilfe | A | Hilfe, etwa Kontakt oder Chat, steht auf allen Seiten an derselben Stelle. |
| 3.3.7 | Keine doppelte Eingabe | A | Was schon eingegeben wurde, wird nicht noch einmal verlangt oder ist vorausgefüllt. |
| 3.3.8 | Barrierefreie Anmeldung (Minimum) | AA | Kein Gedächtnistest beim Anmelden: Einfügen von Passwörtern und Passwortmanager müssen funktionieren. |
| 3.3.9 | Barrierefreie Anmeldung (erweitert) | AAA | Auch keine Bilderrätsel zum Erkennen von Objekten. |
Gestrichen wurde das Kriterium 4.1.1 „Syntaxanalyse“. Moderne Browser und Hilfsmittel kommen mit kleinen Fehlern im Code gut zurecht, das Kriterium hatte seinen Zweck verloren.
Was Sie bei sich prüfen sollten
Für eine Website, die Stufe AA erreichen soll, sind vor allem diese Prüfungen neu:
- Feste Kopfzeilen und Cookie-Banner: Tabben Sie durch die Seite. Verschwindet das fokussierte Element irgendwann unter einer festen Kopfzeile oder einem Banner?
- Kleine Klickziele: Social-Media-Symbole, Schließen-Kreuze, Pfeile in Bildergalerien und Links im Fußbereich sind oft zu klein oder zu eng beieinander.
- Schieberegler und Karten: Lässt sich alles, was man ziehen kann, auch mit Klicks bedienen?
- Anmeldung: Funktioniert Einfügen im Passwortfeld? Wird ein Code zum Abtippen verlangt, der sich nicht kopieren lässt?
- Formulare über mehrere Schritte: Muss jemand seine Adresse zweimal eingeben?
Bei Lang Maschinenpark habe ich einen Befund gefunden, der genau in diese Richtung geht: Das Cookie-Banner war im Quelltext weit unten eingebunden, Tastaturnutzer kamen erst nach der ganzen Seite dorthin.
Der Klassiker: Kontrast
Der Kontrast gehört zu den Kriterien, die in Prüfungen am häufigsten auffallen, meist wegen hellgrauer Schrift auf weißem Grund. Die WCAG verlangen für normalen Text mindestens 4,5 zu 1, für große Schrift und für Bedienelemente mindestens 3 zu 1. Berechnet wird das über die relative Leuchtdichte beider Farben, nach einer Formel, die in den WCAG genau definiert ist.
Für diese Website habe ich die Farben so gewählt, dass sie die Anforderungen sicher erfüllen: Das Grün für Text auf Weiß erreicht 5,8 zu 1, das helle Logo-Grün auf Dunkel 7,4 zu 1. Probieren Sie Ihre eigenen Farben aus:
Ausprobieren
Kontrastprüfer: Reicht der Kontrast Ihrer Farben?
Wählen Sie Schriftfarbe und Hintergrund, zum Beispiel aus Ihrem Logo oder Ihrer Website. Hex-Codes wie #3f7229 können Sie auch eintippen.
Gerechnet nach den Definitionen der WCAG 2.2 (relative Leuchtdichte). Große Schrift heißt: ab 24 px, fett ab etwa 18,7 px.
Das vorausgewählte Grau #767676 ist ungefähr das hellste Grau, das auf Weiß für Fließtext gerade noch reicht. Tippen Sie zum Vergleich #999999 ein: Es sieht dezent aus und fällt durch.
Wo die WCAG an Grenzen stoßen
Die WCAG prüfen Kriterien, keine Erfahrungen. Eine Website kann alle Kriterien erfüllen und trotzdem mühsam zu bedienen sein, etwa weil die Navigation unlogisch ist. Umgekehrt finden automatische Werkzeuge nur einen Teil der Verstöße. Eine gute Prüfung verbindet beides: die Kriterien Punkt für Punkt und den Blick, ob Menschen damit zurechtkommen. Die nächste Generation, WCAG 3.0, ist noch ein Entwurf. Das W3C rechnet selbst damit, dass es noch einige Jahre dauert.
So fangen Sie an
Nehmen Sie Ihre Startseite und prüfen Sie die fünf Punkte oben, plus die Kontraste Ihrer wichtigsten Farben im Prüfer. Wenn Sie dabei mehr als zwei Befunde haben, lohnt sich ein genauerer Blick.
Ich prüfe Websites nach WCAG 2.2 und EN 301 549 und helfe bei der Umsetzung: Barrierefreiheit für Unternehmen.
