WCAG 2.2 AA ist die Menge der Erfolgskriterien der Stufen A und AA aus den Web Content Accessibility Guidelines 2.2, der internationalen Richtlinie für barrierefreie Websites. Erfüllt deine Website sie, ist sie nutzbar für Menschen, die schlecht sehen, einen Screenreader verwenden, nur mit der Tastatur arbeiten oder Mühe mit Lesen und Erinnern haben. Europäische Normen und Gesetze wie der European Accessibility Act nutzen WCAG als technischen Maßstab.
Dieser Artikel erklärt, was WCAG ist, wie Versionen und Stufen funktionieren und was in 2.2 neu ist. Der Schwerpunkt liegt auf den Kriterien, die du im Marketing oder als Content-Ersteller selbst beeinflusst, unabhängig davon, was dein Entwickler regelt. Er gehört zu unserem vollständigen Leitfaden zur Barrierefreiheit von Websites.
Was ist WCAG und wer erstellt es?
WCAG ist eine technische Richtlinie des World Wide Web Consortium (W3C), die beschreibt, wann Webinhalte barrierefrei sind. Geschrieben wird die Richtlinie von der Accessibility Guidelines Working Group, die zur Web Accessibility Initiative (WAI) des W3C gehört. Das steht in der WCAG-Übersicht des W3C.
WCAG ist kein Gesetz. Es ist ein offener Standard, den Gesetzgeber und Normungsgremien übernehmen. Deshalb begegnen dir dieselben Kriterien in europäischen Regeln, in der amerikanischen Praxis und bei der Prüfung von Behördenwebsites.
Die Richtlinie besteht aus Erfolgskriterien: prüfbaren Anforderungen mit einer Nummer, einem Namen und einer Stufe. Jedes Kriterium beschreibt ein Ergebnis, keine Technik. Kriterium 1.1.1 sagt zum Beispiel, dass Nicht-Text-Inhalte eine Textalternative haben. Wie du das umsetzt, steht in separaten Erläuterungsdokumenten des W3C.
Welche WCAG-Versionen gibt es?
Es sind drei Versionen von WCAG 2 in Gebrauch, und jede neue Version baut auf der vorherigen auf. Laut W3C erschien WCAG 2.0 im Dezember 2008, WCAG 2.1 im Juni 2018 und WCAG 2.2 im Oktober 2023.
| Version | Veröffentlicht | Was dazukam |
|---|---|---|
| WCAG 2.0 | Dezember 2008 | Die Basis: Textalternativen, Tastatur, Kontrast, Formulare |
| WCAG 2.1 | Juni 2018 | Vor allem Mobilgeräte und Sehbehinderung, etwa Reflow und Kontrast von Nicht-Text-Elementen |
| WCAG 2.2 | Oktober 2023 | Neun neue Kriterien zu Fokus, Zielgrößen, Hilfe und Anmeldung; 4.1.1 Parsing gestrichen |
Die Versionen sind abwärtskompatibel. Das W3C schreibt, dass Inhalte, die WCAG 2.2 erfüllen, auch WCAG 2.1 und 2.0 erfüllen, und empfiehlt, die neueste Version zu verwenden. Die Spezifikation von WCAG 2.2 hat den Status W3C Recommendation; die aktuelle Ausgabe ist auf den 12. Dezember 2024 datiert. WCAG 2.2 ist außerdem als ISO-Norm festgelegt, ISO/IEC 40500:2025.
Was bedeuten die Stufen A, AA und AAA?
Jedes Erfolgskriterium hat eine Konformitätsstufe, und AA ist die Stufe, die Gesetze und Normen in der Praxis verlangen. Die Stufen bauen aufeinander auf: Für AA erfüllst du alle A- und AA-Kriterien, für AAA alle drei.
- Stufe A ist das Minimum. Ohne diese Kriterien ist eine Website für manche Menschen unbenutzbar, zum Beispiel weil ein Button nicht mit der Tastatur funktioniert.
- Stufe AA ergänzt Anforderungen, die die Nutzung für viel mehr Menschen praktikabel machen, etwa ausreichenden Farbkontrast und sichtbaren Fokus.
- Stufe AAA ist die höchste Stufe, mit strengeren Anforderungen wie einem noch höheren Kontrast.
Warum AA der Standard ist und nicht AAA: Das W3C schreibt in den Konformitätsregeln von WCAG 2.2, dass es nicht empfohlen wird, AAA als allgemeine Anforderung für ganze Websites festzulegen. Für manche Inhalte sind nicht alle AAA-Kriterien erreichbar. AA ist damit die höchste Stufe, die du für eine komplette Website vernünftigerweise verlangen kannst.
Beachte auch: Konformität gilt für ganze Seiten und vollständige Prozesse. Eine barrierefreie Produktseite mit einem nicht barrierefreien Bezahlschritt erfüllt die Anforderungen nicht, weil der Bestellprozess als Ganzes funktionieren muss.
Die vier Prinzipien von WCAG
Alle Erfolgskriterien fallen unter vier Prinzipien, die zusammen als POUR bekannt sind. Die WCAG-2.2-Spezifikation ordnet die Richtlinien so:
- Wahrnehmbar (Perceivable). Informationen und Bestandteile der Benutzeroberfläche müssen so dargestellt werden, dass Nutzer sie wahrnehmen können. Denk an Alt-Text bei Bildern, Untertitel bei Videos und ausreichenden Kontrast.
- Bedienbar (Operable). Bestandteile der Benutzeroberfläche und die Navigation müssen bedienbar sein. Alles funktioniert mit der Tastatur, der Fokus ist sichtbar und Klickziele sind groß genug.
- Verständlich (Understandable). Informationen und die Bedienung müssen verständlich sein. Die Sprache der Seite ist festgelegt, Formulare haben Beschriftungen und Fehlermeldungen erklären, was falsch ist.
- Robust (Robust). Inhalte müssen robust genug sein, um von unterschiedlicher Software interpretiert zu werden, auch von assistiven Technologien. Buttons und Felder haben einen Namen und eine Rolle, die ein Screenreader auslesen kann.
Die Nummerierung folgt diesen Prinzipien. Ein Kriterium, das mit 1 beginnt, gehört zu wahrnehmbar; eines, das mit 3 beginnt, zu verständlich.
Was ist neu in WCAG 2.2?
WCAG 2.2 fügt neun Erfolgskriterien hinzu und streicht eines. Die Übersicht des W3C zu den Neuerungen in WCAG 2.2 nennt diese neuen Kriterien:
| Nummer | Kriterium | Stufe | In einfachen Worten |
|---|---|---|---|
| 2.4.11 | Focus Not Obscured (Minimum) | AA | Das Element mit Tastaturfokus wird nicht vollständig verdeckt, etwa durch einen Sticky Header oder ein Cookie-Banner |
| 2.4.12 | Focus Not Obscured (Enhanced) | AAA | Das Element mit Fokus wird überhaupt nicht verdeckt |
| 2.4.13 | Focus Appearance | AAA | Der Fokusindikator ist groß und kontrastreich genug |
| 2.5.7 | Dragging Movements | AA | Was du per Ziehen erledigst, geht auch mit einem einzelnen Klick oder Tippen |
| 2.5.8 | Target Size (Minimum) | AA | Klickziele sind mindestens 24 mal 24 CSS-Pixel groß, mit einigen Ausnahmen |
| 3.2.6 | Consistent Help | A | Hilfe wie Kontaktdaten oder ein Chat steht auf jeder Seite an derselben Stelle in der Reihenfolge |
| 3.3.7 | Redundant Entry | A | Informationen, die du im selben Prozess schon angegeben hast, musst du nicht erneut eintippen |
| 3.3.8 | Accessible Authentication (Minimum) | AA | Die Anmeldung verlangt keinen Gedächtnis- oder Rätseltest ohne Alternative |
| 3.3.9 | Accessible Authentication (Enhanced) | AAA | Strengere Variante von 3.3.8, mit weniger Ausnahmen |
Wer AA anstrebt, hat es also mit sechs neuen Kriterien zu tun: 2.4.11, 2.5.7, 2.5.8, 3.2.6, 3.3.7 und 3.3.8.
Gestrichen wurde 4.1.1 Parsing. Das W3C bezeichnet das Kriterium als veraltet: Es war für assistive Technologien gedacht, die HTML selbst parsen mussten, und das ist nicht mehr nötig. Die Probleme, die es abdeckte, gibt es laut W3C nicht mehr oder sie fallen unter andere Kriterien. Die übrigen Kriterien aus 2.0 und 2.1 sind laut W3C im Wesentlichen unverändert.
Welche WCAG-Kriterien betreffen dich im Marketing selbst?
Ein großer Teil von WCAG steckt in Design und Code, aber einen beachtlichen Teil bestimmst du täglich selbst in deinem CMS. Jedes Bild, jede Überschrift, jeder Link und jedes Formular, das du veröffentlichst, fällt unter ein Erfolgskriterium. Die Nummern und Stufen unten stammen aus der WCAG-2.2-Spezifikation.
| Nummer | Kriterium | Stufe | Was du tust |
|---|---|---|---|
| 1.1.1 | Non-text Content | A | Gib informativen Bildern einen Alt-Text; gib dekorativen Bildern ein leeres alt |
| 1.2.2 | Captions (Prerecorded) | A | Versieh Videos mit gesprochenem Text mit Untertiteln |
| 1.3.1 | Info and Relationships | A | Verwende echte Überschriften (H2, H3) und Listen, keinen fett gedruckten Text, der wie eine Überschrift aussieht |
| 1.4.3 | Contrast (Minimum) | AA | Halte den Textkontrast bei mindestens 4,5:1, und 3:1 für großen Text (18 Punkt, oder 14 Punkt fett) |
| 1.4.11 | Non-text Contrast | AA | Sorge dafür, dass Buttons, Eingabefelder und Icons genug Kontrast zum Hintergrund haben |
| 2.4.2 | Page Titled | A | Gib jeder Seite einen Titel, der das Thema beschreibt |
| 2.4.4 | Link Purpose (In Context) | A | Schreib Linktexte, die sagen, wohin der Link führt, kein "hier klicken" |
| 2.4.6 | Headings and Labels | AA | Lass Überschriften und Beschriftungen das Thema oder den Zweck beschreiben |
| 2.4.7 | Focus Visible | AA | Lass den Fokusrahmen in deinem Theme oder Corporate Design nicht entfernen |
| 2.4.11 | Focus Not Obscured (Minimum) | AA | Prüfe, dass Cookie-Banner, Chat-Buttons und Sticky Header den Fokus nicht vollständig verdecken |
| 2.5.8 | Target Size (Minimum) | AA | Mach Buttons und Icons in Kampagnen und auf Landingpages mindestens 24 mal 24 CSS-Pixel groß |
| 3.1.1 | Language of Page | A | Stell die richtige Sprache der Seite ein, gerade auf mehrsprachigen Websites |
| 3.1.2 | Language of Parts | AA | Kennzeichne Passagen in einer anderen Sprache, etwa ein englisches Zitat |
| 3.2.6 | Consistent Help | A | Platziere Kontaktdaten, Chat oder Helpcenter auf jeder Seite an derselben Stelle |
| 3.3.2 | Labels or Instructions | A | Gib jedem Formularfeld eine sichtbare Beschriftung, nicht nur Platzhaltertext |
| 3.3.7 | Redundant Entry | A | Frag in einem Registrierungs- oder Bestellprozess nicht zweimal nach derselben Angabe |
| 3.3.8 | Accessible Authentication (Minimum) | AA | Wähle beim Login Optionen ohne Rätsel-Captcha oder biete eine Alternative an |
Einige dieser Kriterien verdienen besondere Aufmerksamkeit, weil sie bei der Marketingarbeit oft schiefgehen.
Kontrast in Kampagnen. Hellgrauer Text, Text über einem Foto und Markenfarben mit wenig Unterschied sind die Klassiker. Ein Kontrastverhältnis von 4,5:1 klingt technisch, aber jeder Farbwähler oder Kontrastchecker rechnet es dir aus.
Alt-Text, der etwas aussagt. Ein Alt-Text wie "Bild" oder der Dateiname hilft niemandem. Beschreib, was das Bild in diesem Zusammenhang aussagt. Das hilft gleich auch Suchmaschinen und KI-Systemen, die Bilder über diesen Text verstehen, siehe Inhalte, die KI zitiert.
Konsistente Hilfe und redundante Eingaben. Diese beiden neuen Kriterien der Stufe A betreffen Landingpages und Anmeldestrecken. Ein Chat-Button, der auf jeder Seite woanders sitzt, oder ein Formular, das in Schritt drei erneut nach deiner E-Mail-Adresse fragt, erfüllt die Anforderungen nicht.
In der Übersicht der häufigsten Barrierefreiheitsfehler findest du für jeden Fehler die HTML-Lösung.
Wie verhält sich WCAG zu EN 301 549 und dem EAA?
Der European Accessibility Act nennt das Ergebnis, und die europäische Norm EN 301 549 übersetzt das für Websites in WCAG. Der EAA (Richtlinie (EU) 2019/882) beschreibt, welche Produkte und Dienstleistungen barrierefrei sein müssen. Harmonisierte Normen begründen eine Konformitätsvermutung: Erfüllst du sie, wird angenommen, dass du die gesetzlichen Anforderungen erfüllst.
Welche WCAG-Version zählt, hängt von der Version der EN 301 549 ab:
- EN 301 549 V3.2.1 (2021) verweist für Webinhalte auf WCAG 2.1. Das steht in der Norm selbst bei ETSI.
- EN 301 549 V4.1.1 verweist auf WCAG 2.2. Der Text von V4.1.1 bei ETSI enthält die neuen Kriterien, etwa 3.3.8 zur barrierefreien Anmeldung.
Laut der irischen National Disability Authority wurde V4.1.1 am 2. September 2026 veröffentlicht, ist aber erst rechtlich maßgeblich, sobald die Europäische Kommission die Norm im Amtsblatt nennt. Das wird für den 16. Dezember 2026 erwartet. Bis dahin bleibt V3.2.1 mit WCAG 2.1 die geltende Norm.
Praktisch heißt das: Wer jetzt an WCAG 2.2 AA arbeitet, erfüllt auch WCAG 2.1 AA und ist für die neue Norm gerüstet. Was der EAA darüber hinaus von deinem Unternehmen verlangt, liest du im Artikel zum European Accessibility Act. Dies ist eine Erklärung der Regeln und keine Rechtsberatung; bei Zweifeln zu deiner eigenen Situation wendest du dich an einen Juristen oder die Aufsichtsbehörde.
Was ist WCAG 3.0?
WCAG 3.0 ist ein Arbeitsentwurf des W3C und noch kein geltender Standard. Das W3C nennt es in der Einführung zu WCAG 3 einen unvollständigen Entwurf, der sich noch ändern wird. Im September 2026 erschien ein aktualisierter Working Draft.
Laut W3C dauert es noch einige Jahre, bis WCAG 3 ein fertiger Standard ist. WCAG 3 ersetzt WCAG 2 auch nicht sofort: Das W3C schreibt, dass WCAG 2 nach der Fertigstellung von WCAG 3 noch jahrelang nicht abgeschafft wird. Der Rat des W3C ist klar: Die beste Vorbereitung auf WCAG 3 ist, jetzt WCAG 2.2 zu erfüllen.
So prüfst du das auf deiner eigenen Website
Mit diesen Schritten findest du heraus, wo deine Website bei WCAG 2.2 AA steht:
- Wähle deine wichtigsten Seiten. Nimm die Startseite, eine Landingpage, eine Produkt- oder Leistungsseite, ein Formular und, falls vorhanden, den Bestellprozess.
- Lass einen automatischen Test laufen. Ein Tool auf Basis von axe-core findet fehlende Alt-Texte, Felder ohne Beschriftung, leere Links und Buttons und ein fehlendes Sprachattribut.
- Prüfe den Kontrast manuell. Miss Text über Bildern, Buttons und helle Farbtöne mit einem Kontrastchecker, denn Kontrast erfordert eine echte Darstellung der Seite.
- Navigiere nur mit der Tastatur. Drück Tab durch die Seite und achte darauf, ob du immer siehst, wo der Fokus steht, und ob ein Cookie-Banner oder Chat-Button ihn nicht verdeckt.
- Geh deine Inhalte durch. Prüfe Überschriften, Linktexte, Alt-Texte, Untertitel und ob die Hilfe auf jeder Seite an derselben Stelle steht.
- Halte fest, was du gefunden hast. Nutze deine Ergebnisse für einen Verbesserungsplan und für deine Barrierefreiheitserklärung.
Mehr zur Aufteilung zwischen automatischer und manueller Arbeit liest du in Barrierefreiheit von Websites testen. Die Barrierefreiheitsprüfung von Flowproof ist in den kostenpflichtigen Tarifen Pro und Business enthalten. Sie testet deine Seiten mit axe-core auf WCAG 2.0, 2.1 und 2.2 Stufe A und AA, zeigt für jeden Befund das Erfolgskriterium und die Stufe und meldet Farbkontrast ehrlich als manuell zu prüfen. Sieh dir die Tarife auf der Preisseite an.