Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Webinhalte, herausgegeben von der Web Accessibility Initiative (WAI) des W3C. Die aktuelle Fassung WCAG 2.2 wurde am 5. Oktober 2023 offizielle W3C Recommendation. Sie enthält 86 prüfbare Erfolgskriterien, gegliedert in 4 Prinzipien und 13 Richtlinien, und jedes Kriterium ist einer von drei Konformitätsstufen zugeordnet: A, AA oder AAA. Level AA ist die Stufe, auf die es in der Praxis ankommt, denn Gesetze weltweit knüpfen ihre Anforderungen daran. In der EU verweist die harmonisierte Norm EN 301 549 auf WCAG 2.1 Level AA, womit das der technische Maßstab für den European Accessibility Act und das Barrierefreiheitsstärkungsgesetz ist. WCAG 2.2 ergänzt neun neue Erfolgskriterien gegenüber 2.1, unter anderem zu Mindestgrößen von Klickzielen, sichtbarem Tastaturfokus und Anmeldung ohne kognitive Rätsel, und streicht das überholte Parsing-Kriterium 4.1.1.
Wer gibt die Web Content Accessibility Guidelines heraus?
WCAG stammt vom World Wide Web Consortium (W3C), derselben Organisation, die HTML und CSS standardisiert, genauer aus dessen Web Accessibility Initiative. Die Richtlinien haben eine lange Geschichte: WCAG 1.0 erschien 1999, WCAG 2.0 folgte 2008 und blieb ein volles Jahrzehnt die Referenz, WCAG 2.1 kam 2018 mit Schwerpunkt auf mobiler Nutzung und Sehbeeinträchtigungen, und WCAG 2.2 wurde im Oktober 2023 veröffentlicht.
Die 2.x-Versionen sind bewusst abwärtskompatibel. Eine Seite, die WCAG 2.2 AA erfüllt, erfüllt auch 2.1 AA und 2.0 AA. Das ist wichtig, weil Gesetze der neuesten Version oft hinterherhinken, und wer gegen 2.2 baut, ist an beiden Fronten auf der sicheren Seite.
Die vier WCAG-Prinzipien: wahrnehmbar, bedienbar, verständlich, robust
Jedes Erfolgskriterium hängt an einem von vier Prinzipien, im Englischen mit dem Akronym POUR zusammengefasst:
- Wahrnehmbar (Perceivable): Nutzer müssen die Inhalte wahrnehmen können. Beispiele: Textalternativen für Bilder, Untertitel für Videos, ausreichender Farbkontrast.
- Bedienbar (Operable): Nutzer müssen die Oberfläche bedienen können. Beispiele: Alles funktioniert per Tastatur, es bleibt genug Zeit, nichts blinkt in einer Weise, die Anfälle auslösen kann, Ziele sind groß genug zum Treffen.
- Verständlich (Understandable): Inhalt und Bedienung müssen verständlich sein. Beispiele: lesbare Sprache, vorhersehbare Navigation, hilfreiche Fehlermeldungen in Formularen.
- Robust (Robust): Inhalte müssen zuverlässig mit aktuellen und künftigen User Agents funktionieren, Screenreader eingeschlossen. Beispiel: Statusmeldungen, die assistive Technik ansagen kann.
Die Prinzipien sind bewusst technologieneutral formuliert. Sie gelten für einen WordPress-Blog genauso wie für eine React-App oder ein PDF.
WCAG-Konformitätsstufen A, AA und AAA im Vergleich
| Stufe | Kriterien in WCAG 2.2 | Bedeutung | Typische Beispiele |
|---|---|---|---|
| A | 31 | Absolutes Minimum. Verstöße sperren ganze Nutzergruppen aus. | Alternativtexte für Bilder, Tastaturbedienbarkeit, keine Tastaturfallen |
| AA | 24 | Das übliche Ziel, auf das sich Gesetze weltweit beziehen. | Kontrast 4,5:1, sichtbarer Fokus, konsistente Navigation, Korrekturvorschläge bei Fehlern |
| AAA | 31 | Höchste Stufe, für die meisten Websites ein Idealziel. | Kontrast 7:1, Gebärdensprache für Videos, Anforderungen an das Sprachniveau |
Die Konformität ist kumulativ: AA bedeutet, dass Sie alle Kriterien der Stufe A und alle der Stufe AA erfüllen. Das W3C selbst sagt, dass vollständige AAA-Konformität nicht als generelle Vorgabe verlangt werden sollte, weil sich manche AAA-Kriterien schlicht nicht für jede Art von Inhalt erfüllen lassen. Niemand erwartet Gebärdensprachdolmetschung auf der Website einer Bäckerei. Einzelne AAA-Kriterien sind trotzdem eine Überlegung wert, wo sie passen, das erhöhte Kontrastverhältnis etwa ist ein beliebter Kandidat.
Wie viele Erfolgskriterien hat WCAG 2.2?
WCAG 2.2 enthält 86 Erfolgskriterien: 31 auf Level A, 24 auf Level AA und 31 auf Level AAA. Zum Vergleich: WCAG 2.1 hatte 78. Die Rechnung geht auf, weil 2.2 neun Kriterien ergänzt und eines streicht: 4.1.1 Parsing, ein Relikt aus der Zeit, in der kaputtes HTML Screenreader tatsächlich zum Absturz bringen konnte. Moderne Browser und assistive Technologien verarbeiten HTML einheitlich, das Kriterium war damit überflüssig geworden.
Was ist neu in WCAG 2.2? Die neun neuen Erfolgskriterien
Die Ergänzungen in 2.2 richten sich an Nutzer mit motorischen und kognitiven Einschränkungen, und ehrlich gesagt sind die meisten davon einfach gute UX:
- 2.4.11 Focus Not Obscured (Minimum), AA: Das fokussierte Element darf nicht vollständig hinter klebenden Kopfzeilen, Cookie-Bannern oder Chat-Widgets verschwinden.
- 2.4.12 Focus Not Obscured (Enhanced), AAA: Das fokussierte Element darf überhaupt nicht verdeckt sein, auch nicht teilweise.
- 2.4.13 Focus Appearance, AAA: Die Fokusanzeige muss Mindestanforderungen an Größe und Kontrast erfüllen.
- 2.5.7 Dragging Movements, AA: Alles, was per Drag-and-drop funktioniert, braucht eine Alternative mit einfachen Klicks oder Tipps.
- 2.5.8 Target Size (Minimum), AA: Klick- und Touchziele müssen mindestens 24 mal 24 CSS-Pixel groß sein oder ausreichend Abstand um sich herum haben.
- 3.2.6 Consistent Help, A: Hilfsangebote wie Kontaktlinks oder Chat müssen auf jeder Seite an derselben Stelle auftauchen.
- 3.3.7 Redundant Entry, A: Zwingen Sie Nutzer nicht, dieselbe Information innerhalb eines Vorgangs zweimal einzugeben. Lieferadresse gleich Rechnungsadresse gehört als Checkbox umgesetzt, nicht als zweites Formular.
- 3.3.8 Accessible Authentication (Minimum), AA: Die Anmeldung darf nicht von einem kognitiven Rätsel abhängen. Verzerrte Zeichen abtippen oder Memory-Spiele lösen fällt raus, Passwortmanager und Einfügen müssen funktionieren.
- 3.3.9 Accessible Authentication (Enhanced), AAA: Dieselbe Regel ohne die Ausnahmen, die 3.3.8 noch zulässt.
Welche WCAG-Stufe ist gesetzlich vorgeschrieben?
In der EU definiert die harmonisierte Norm EN 301 549 die technischen Anforderungen sowohl für den öffentlichen Sektor als auch für den European Accessibility Act, und sie verweist derzeit auf WCAG 2.1 Level AA. Damit ist 2.1 AA der formale rechtliche Maßstab für das BFSG und die BITV 2.0. Eine Aktualisierung der EN 301 549 auf WCAG 2.2 wird erwartet, und genau deshalb ist es heute die pragmatische Wahl, gegen 2.2 zu bauen: Sie erfüllen die aktuelle und die voraussichtlich künftige Anforderung in einem Aufwasch.
Anderswo sieht es ähnlich aus. In den USA hat das Justizministerium 2024 eine Regelung finalisiert, nach der Bundesstaaten und Kommunen unter ADA Title II WCAG 2.1 AA erfüllen müssen, und Gerichte ziehen WCAG in privaten ADA-Verfahren routinemäßig als Referenz heran. Wenn Sie sich aus diesem Abschnitt eine Sache merken, dann diese: WCAG AA ist die Stufe, die das Gesetz meint, wenn es barrierefrei sagt.
Wie sehen WCAG-Erfolgskriterien in der Praxis aus?
Drei Beispiele zeigen, wie konkret die Kriterien werden. Kriterium 1.4.3 Contrast (Minimum) verlangt ein Kontrastverhältnis von mindestens 4,5:1 zwischen normalem Text und seinem Hintergrund, bei großer Schrift 3:1. Der graue Fußzeilentext in #999999 auf #ffffff? Fällt mit 2,85:1 durch. Kriterium 2.1.1 Keyboard fordert, dass sich alle Funktionen ohne Maus bedienen lassen, und genau daran scheitern die meisten selbstgebauten Dropdowns und Bilderslider klammheimlich. Und Kriterium 1.1.1 Non-text Content ist die klassische Alternativtext-Regel:
<!-- Informatives Bild: beschreiben, was es zeigt -->
<img src="warehouse.jpg" alt="Mitarbeiterin scannt Pakete im Lager">
<!-- Dekoratives Bild: leeres alt, damit Screenreader es überspringen -->
<img src="divider.svg" alt="">Jedes Kriterium im offiziellen Dokument verlinkt auf Techniken und Fehlerbeispiele, und die WCAG-Kurzreferenz lässt Sie alle 86 Kriterien nach Stufe und Technologie filtern, was deutlich praktikabler ist, als die Spezifikation von vorn bis hinten zu lesen.
Wie teste ich die Einhaltung von WCAG 2.2?
Fangen Sie mit automatisierten Werkzeugen an: WAVE, axe DevTools, Lighthouse oder die Barrierefreiheitsprüfungen in InspectWP finden fehlende alt-Attribute, Kontrastprobleme, fehlende Labels und strukturelle Fehler in Sekunden. Behalten Sie aber die Grenzen im Blick. Automatisierte Prüfungen erkennen zuverlässig irgendwo zwischen einem Drittel und der Hälfte der WCAG-Verstöße, weil viele Kriterien menschliches Urteilsvermögen erfordern. Eine Maschine sieht, dass ein Bild einen Alternativtext hat, aber nicht, ob der Text das Bild auch tatsächlich beschreibt.
Vervollständigen Sie das Bild also manuell: Ziehen Sie die Maus ab und navigieren Sie die gesamte Website per Tastatur, machen Sie eine Sitzung mit einem Screenreader wie NVDA (kostenlos) oder VoiceOver, zoomen Sie die Seite auf 200 Prozent und gehen Sie Ihre wichtigste Nutzerreise, meistens Checkout oder Kontakt, von Anfang bis Ende durch. Wenn Sie die Möglichkeit haben, beziehen Sie Menschen mit Behinderungen in die Tests ein. Sie finden in zehn Minuten Probleme, die keine Audit-Checkliste zutage fördert.
Was kommt nach WCAG 2.2? Ein kurzer Blick auf WCAG 3.0
Das W3C arbeitet an WCAG 3.0, einer Neufassung von Grund auf mit einem neuen Bewertungsmodell, das sich von der binären Bestanden-oder-durchgefallen-Logik löst. Sie ist seit Jahren im Entwurfsstadium und wird es noch Jahre bleiben, und das W3C sagt ausdrücklich, dass sie 2.2 auf lange Sicht nicht ablösen wird. Für Ihre Planung heißt das: WCAG 2.2 AA ist das Ziel, und nichts an 3.0 sollte Ihre Roadmap heute verändern.
Wie prüft InspectWP WCAG-Kriterien?
InspectWP enthält automatisierte Barrierefreiheitsprüfungen in seinen Website-Berichten und ordnet typische Verstöße den zugrunde liegenden WCAG-Kriterien zu: fehlende Alternativtexte, zu geringe Farbkontraste, Formularfelder ohne Label, fehlende Dokumentsprache und eine kaputte Überschriften-Hierarchie, unter anderem. Jeder Befund kommt mit einer Bewertung des Schweregrads, damit Sie zuerst die Blocker auf Level A beheben und sich dann zu AA hocharbeiten können. In Kombination mit geplanten Berichten wird aus Barrierefreiheit so kein einmaliges Audit, sondern etwas, das Sie dauerhaft im Blick behalten, und genau das erwartet der European Accessibility Act ohnehin von Ihnen.