WCAG verständlich erklärt: Prinzipien, Stufen und Neuerungen

Wer sich mit digitaler Barrierefreiheit beschäftigt, landet früher oder später bei vier Buchstaben: WCAG. Die Web Content Accessibility Guidelines sind der internationale Maßstab dafür, wann Webinhalte als barrierefrei gelten. Gesetze verweisen auf sie, Prüfverfahren bauen auf ihnen auf, und in Ausschreibungen tauchen sie als Anforderung auf.

Beim ersten Blick in das Originaldokument wirken die WCAG allerdings sperrig: verschachtelte Nummern, englische Fachbegriffe, Ausnahmen in den Ausnahmen. Dabei ist die Grundidee erstaunlich klar. Wer das System einmal verstanden hat, findet sich schnell zurecht und kann die Anforderungen gezielt im Alltag nutzen.

In diesem Artikel bekommst du den Überblick: wie die WCAG aufgebaut sind, was hinter den vier Prinzipien steckt, was die Stufen A, AA und AAA bedeuten, was in WCAG 2.2 neu ist und was dich mit WCAG 3 erwartet.

Was die WCAG sind und woher sie kommen

Die WCAG werden von der Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C) entwickelt, also von derselben Organisation, die auch HTML- und CSS-Standards betreut. Die erste Version erschien 1999. WCAG 2.0 folgte 2008 und legte das Fundament, auf dem bis heute alles aufbaut. WCAG 2.1 kam 2018 dazu und ergänzte vor allem Anforderungen für mobile Nutzung, Sehbehinderungen und kognitive Einschränkungen. Die aktuelle Version WCAG 2.2 ist seit dem 5. Oktober 2023 eine offizielle W3C-Empfehlung.

Zwei Eigenschaften machen die WCAG so einflussreich. Erstens sind sie technologieneutral: Sie schreiben nicht vor, welches Framework oder welche Programmiersprache du nutzt, sondern beschreiben Ergebnisse, die erreicht werden müssen. Zweitens sind die Erfolgskriterien prüfbar. Man kann für jede Anforderung feststellen, ob eine Seite sie erfüllt oder nicht. Genau deshalb eignen sie sich als Grundlage für Gesetze und Normen.

In Europa ist das besonders relevant. Die harmonisierte Norm EN 301 549 verweist für Webinhalte auf WCAG 2.1 Level AA. Auf diese Norm beziehen sich sowohl die BITV 2.0 für öffentliche Stellen als auch das Barrierefreiheitsstärkungsgesetz (BFSG), das seit dem 28. Juni 2025 für viele Angebote der Privatwirtschaft gilt. Mehr zum Hintergrund liest du im Artikel Was digitale Barrierefreiheit bedeutet.

Der Aufbau: vom Prinzip zum Erfolgskriterium

Die WCAG sind wie ein Baum mit drei Ebenen aufgebaut:

• Vier Prinzipien bilden die oberste Ebene: wahrnehmbar, bedienbar, verständlich und robust.
• 13 Richtlinien darunter beschreiben Ziele, zum Beispiel „Tastaturbedienbar“ oder „Hilfestellung bei der Eingabe“. Sie sind selbst nicht prüfbar, geben aber die Richtung vor.
• 86 Erfolgskriterien bilden die konkrete, prüfbare Ebene. Jedes ist einer Konformitätsstufe zugeordnet: A, AA oder AAA.

Die Nummerierung folgt genau dieser Struktur. Nimm 1.4.3 Kontrast (Minimum): Die 1 steht für das erste Prinzip (wahrnehmbar), die 4 für die vierte Richtlinie darunter (unterscheidbar), die 3 für das dritte Erfolgskriterium in dieser Richtlinie. Wenn du die Nummer kennst, weißt du also sofort, in welchem Themenfeld du dich bewegst.

Neben dem eigentlichen Standard veröffentlicht das W3C zwei wichtige Begleitdokumente. „Understanding WCAG“ erklärt für jedes Kriterium, welches Ziel es verfolgt, wem es hilft und wie es gemeint ist. Die „Techniques“ zeigen konkrete Umsetzungswege und typische Fehler. Beide sind nicht verbindlich, aber in der Praxis unverzichtbar, wenn du wissen willst, wie ein Kriterium ausgelegt wird. Im WCAG-Guide findest du alle Kriterien zusätzlich auf Deutsch erklärt.

Die vier Prinzipien (POUR)

Im Englischen merkt man sich die Prinzipien mit dem Kürzel POUR: Perceivable, Operable, Understandable, Robust. Jedes Prinzip beantwortet eine einfache Frage.

1. Wahrnehmbar: Können alle die Inhalte wahrnehmen?

Informationen dürfen nicht nur über einen einzigen Sinn zugänglich sein. Ein Bild braucht eine Textalternative, ein Video Untertitel, ein Diagramm eine Beschreibung. Text muss sich vergrößern lassen, Farben müssen genügend Kontrast haben, und Struktur wie Überschriften oder Listen muss auch im Code erkennbar sein. Das Paradebeispiel ist 1.1.1 Textalternativen: Ein Produktfoto ohne Alt-Text ist für eine blinde Person schlicht nicht vorhanden.

Die Richtlinien unter diesem Prinzip sind Textalternativen (1.1), zeitbasierte Medien (1.2), Anpassbarkeit (1.3) und Unterscheidbarkeit (1.4).

2. Bedienbar: Können alle die Oberfläche bedienen?

Nicht jede Person nutzt eine Maus oder einen Touchscreen. Manche bedienen den Computer nur mit der Tastatur, per Sprachsteuerung oder mit einem einzelnen Schalter. Deshalb verlangt 2.1.1 Tastatur, dass alle Funktionen per Tastatur erreichbar sind. Weitere Themen sind ausreichend Zeit, der Schutz vor blinkenden Inhalten, die Navigation und Orientierung auf einer Seite sowie alternative Eingabemethoden wie Gesten und Zeigegeräte.

Die Richtlinien: tastaturbedienbar (2.1), ausreichend Zeit (2.2), Anfälle und körperliche Reaktionen (2.3), navigierbar (2.4) und Eingabemodalitäten (2.5).

3. Verständlich: Verstehen alle Inhalte und Abläufe?

Eine Seite kann perfekt wahrnehmbar und bedienbar sein und trotzdem scheitern, wenn niemand versteht, was zu tun ist. Dieses Prinzip umfasst lesbare Texte, die richtige Sprachauszeichnung, vorhersehbares Verhalten und Hilfe bei Eingaben. Ein typisches Kriterium ist 3.3.2 Beschriftungen oder Anweisungen: Formularfelder brauchen eine Beschriftung, die klar macht, was einzutragen ist – und zwar bevor jemand einen Fehler macht.

Die Richtlinien: lesbar (3.1), vorhersehbar (3.2) und Hilfestellung bei der Eingabe (3.3).

4. Robust: Funktioniert es mit unterschiedlichen Technologien?

Inhalte müssen von Browsern und assistiven Technologien wie Screenreadern zuverlässig interpretiert werden können – heute und in Zukunft. Kern ist 4.1.2 Name, Rolle, Wert: Jedes Bedienelement muss technisch verraten, wie es heißt, was es ist und in welchem Zustand es sich befindet. Ein selbstgebautes Aufklapp-Menü aus div-Elementen erfüllt das ohne zusätzliche Arbeit nicht, ein natives button-Element mit passenden Attributen schon.

Unter diesem Prinzip gibt es nur eine Richtlinie: kompatibel (4.1).

Die Stufen A, AA und AAA

Jedes Erfolgskriterium gehört zu einer von drei Konformitätsstufen. Die Stufen bauen aufeinander auf: Wer AA erreichen will, muss alle Kriterien der Stufen A und AA erfüllen.

• Stufe A umfasst die grundlegenden Anforderungen. Werden sie verletzt, sind Inhalte für manche Menschen oft komplett unbenutzbar, etwa wenn ein Button gar nicht per Tastatur erreichbar ist.
• Stufe AA enthält weitere wichtige Anforderungen wie ausreichende Kontraste oder einen sichtbaren Fokus. AA ist der Standard, auf den sich Gesetze und Normen in der Regel beziehen, auch die EN 301 549.
• Stufe AAA beschreibt das höchste Niveau, zum Beispiel einen erweiterten Kontrast von 7:1 oder Gebärdensprachvideos. Das W3C empfiehlt AAA ausdrücklich nicht als Pflicht für ganze Websites, weil sich nicht alle Kriterien für jede Art von Inhalt erfüllen lassen.

Für die Praxis heißt das: Peile Stufe AA an und nimm einzelne AAA-Kriterien mit, wo sie für deine Zielgruppe sinnvoll und machbar sind. Eine Behördenseite mit vielen älteren Nutzer:innen profitiert zum Beispiel stark von einfacher Sprache oder größeren Klickflächen, auch wenn sie dazu nicht verpflichtet ist.

Wichtig ist außerdem, wofür Konformität gilt. Die WCAG verlangen, dass immer ganze Seiten bewertet werden und bei mehrstufigen Prozessen alle Schritte. Ein barrierefreier Warenkorb nützt wenig, wenn die Bezahlseite danach unbedienbar ist.

Wie du ein Erfolgskriterium richtig liest

Erfolgskriterien sind kurz, aber präzise formuliert. Es lohnt sich, auf drei Dinge zu achten: die eigentliche Anforderung, die Ausnahmen und die Begriffsdefinitionen. Nehmen wir noch einmal 1.4.3 Kontrast (Minimum) als Beispiel.

Die Anforderung lautet, dass Text und Bilder von Text ein Kontrastverhältnis von mindestens 4,5:1 haben. Dann folgen Ausnahmen: Großer Text braucht nur 3:1. Rein dekorativer Text, Text in inaktiven Bedienelementen und Text in Logos sind ausgenommen. Was „großer Text“ genau bedeutet, steht in den Begriffsdefinitionen der WCAG. Wer nur die erste Zeile liest, legt das Kriterium also womöglich zu streng oder zu großzügig aus.

Ein realistisches Szenario: Euer Team diskutiert, ob ein ausgegrauter „Absenden“-Button den Kontrast erfüllen muss. Ein Blick in die Ausnahmen zeigt, dass inaktive Elemente ausgenommen sind. Gleichzeitig zeigt das Understanding-Dokument, dass Nutzer:innen trotzdem verstehen müssen, warum der Button inaktiv ist. Die Antwort ist also nicht nur „erlaubt“, sondern „erlaubt, aber erkläre, was fehlt“.

Was ist neu in WCAG 2.2?

WCAG 2.2 ergänzt neun neue Erfolgskriterien. Viele davon verbessern die Situation von Menschen mit motorischen oder kognitiven Einschränkungen und von Menschen, die mit der Tastatur arbeiten.

• Fokus nicht verdeckt: 2.4.11 Fokus nicht verdeckt (Minimum) (AA) verlangt, dass ein fokussiertes Element nicht vollständig von anderen Inhalten verdeckt wird, etwa von einem fixierten Header oder einem Cookie-Banner. 2.4.12 (AAA) geht weiter und verlangt, dass kein Teil verdeckt ist.
• Fokusdarstellung: 2.4.13 (AAA) legt Mindestanforderungen an Größe und Kontrast des Fokusindikators fest.
• Ziehbewegungen: 2.5.7 (AA) fordert, dass alles, was per Drag-and-drop funktioniert, auch mit einfachen Klicks oder Taps möglich ist, sofern das Ziehen nicht wesentlich ist.
• Zielgröße: 2.5.8 Zielgröße (Minimum) (AA) verlangt Klickflächen von mindestens 24 mal 24 CSS-Pixeln oder ausreichend Abstand zu benachbarten Zielen, mit einigen Ausnahmen, zum Beispiel für Links im Fließtext.
• Konsistente Hilfe: 3.2.6 (A) verlangt, dass Hilfeangebote wie Kontaktdaten oder ein Chat auf mehreren Seiten an derselben relativen Stelle zu finden sind.
• Redundante Eingabe: 3.3.7 (A) sorgt dafür, dass Informationen, die jemand im selben Prozess schon eingegeben hat, nicht noch einmal abgefragt werden müssen, sondern automatisch übernommen oder auswählbar sind.
• Barrierefreie Authentifizierung: 3.3.8 Barrierefreie Authentifizierung (Minimum) (AA) verbietet Anmeldeverfahren, die einen kognitiven Funktionstest wie das Merken eines Passworts oder das Lösen eines Rätsels voraussetzen, wenn es keine Alternative oder Unterstützung gibt. Wer zum Beispiel das Einfügen aus dem Passwortmanager blockiert, verstößt dagegen. 3.3.9 (AAA) ist die strengere Variante.

Gleichzeitig wurde ein Kriterium gestrichen: 4.1.1 Parsing gilt in WCAG 2.2 als obsolet. Moderne Browser und assistive Technologien gehen so robust mit fehlerhaftem HTML um, dass das Kriterium seinen ursprünglichen Zweck verloren hat. Die damit verbundenen echten Probleme werden ohnehin von anderen Kriterien wie 4.1.2 abgedeckt.

WCAG 2.2 ist rückwärtskompatibel. Wer 2.2 erfüllt, erfüllt grundsätzlich auch 2.1 und 2.0. Rechtlich gefordert ist in Europa über die EN 301 549 aktuell WCAG 2.1 AA. Trotzdem lohnt es sich, schon heute auf 2.2 hinzuarbeiten: Die neuen Kriterien lösen echte Alltagsprobleme, und Normen werden üblicherweise an neue Versionen angepasst. Dieser Hinweis ist allgemein und ersetzt keine Rechtsberatung.

Ausblick: WCAG 3

Parallel arbeitet das W3C an einer grundlegend neuen Generation, den W3C Accessibility Guidelines 3.0, kurz ebenfalls WCAG 3. Stand Oktober 2026 ist WCAG 3 noch ein Arbeitsentwurf und keine verbindliche Empfehlung. Inhalte und Struktur können sich bis zur Fertigstellung noch deutlich ändern.

In den bisherigen Entwürfen zeichnen sich einige Richtungen ab: ein breiterer Geltungsbereich über klassische Webinhalte hinaus, eine stärkere Berücksichtigung kognitiver Barrieren und ein Bewertungsmodell, das weniger streng zwischen „bestanden“ und „nicht bestanden“ unterscheidet. Wie das am Ende genau aussieht, ist offen.

Für dich heißt das: Warte nicht auf WCAG 3. Die WCAG 2.x bleiben auf absehbare Zeit der rechtlich relevante Maßstab, und was du heute nach WCAG 2.2 umsetzt, ist keine verlorene Arbeit. Die Grundideen – Textalternativen, Tastaturbedienbarkeit, verständliche Inhalte, robuster Code – bleiben dieselben.

So nutzt du die WCAG im Alltag

Niemand muss alle 86 Erfolgskriterien auswendig kennen. Viel hilfreicher ist es, die Kriterien nach Rollen zu sortieren. Designer:innen kümmern sich besonders um Kontraste, Fokusdarstellung, Zielgrößen, Farbe als Informationsträger und konsistente Navigation. Entwickler:innen achten auf Semantik, Tastaturbedienung, Name, Rolle und Wert sowie Statusmeldungen. Redaktionen verantworten Alt-Texte, Überschriftenstruktur, Linktexte, Untertitel und verständliche Sprache.

Ebenso wichtig ist ein realistischer Blick aufs Testen. Automatisierte Tools prüfen nur einen Teil der Kriterien zuverlässig. Ob ein Alt-Text sinnvoll ist oder eine Fokusreihenfolge logisch, kann nur ein Mensch beurteilen. Wie du Prüfungen sinnvoll kombinierst, beschreibt der Artikel Barrierefreiheit testen.

Checkliste: WCAG auf einen Blick

• Du kennst die vier Prinzipien: wahrnehmbar, bedienbar, verständlich, robust.
• Dein Ziel ist Stufe AA, ergänzt um sinnvolle AAA-Kriterien.
• Du orientierst dich an WCAG 2.2, auch wenn rechtlich aktuell 2.1 AA gefordert ist.
• Du liest bei Unklarheiten Ausnahmen, Definitionen und das Understanding-Dokument.
• Du bewertest ganze Seiten und vollständige Prozesse, nicht einzelne Komponenten.
• Du hast die Kriterien nach Rollen im Team verteilt.
• Du kombinierst automatisierte und manuelle Tests.

Fazit

Die WCAG wirken auf den ersten Blick kompliziert, folgen aber einer klaren Logik: vier Prinzipien, darunter Richtlinien, darunter prüfbare Erfolgskriterien auf drei Stufen. Wer diese Struktur verstanden hat, kann jede Anforderung einordnen und gezielt nachschlagen.

Für die Praxis gilt: Ziel ist Stufe AA, Orientierung bietet WCAG 2.2, und WCAG 3 ist ein spannender Ausblick, aber kein Grund zu warten. Am besten startest du mit den Kriterien, die für deine Rolle am wichtigsten sind, und arbeitest dich von dort aus weiter vor.

Quellen

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2 (öffnet in neuem Tab)
• W3C WAI: WCAG 2 Overview (öffnet in neuem Tab)
• W3C WAI: What’s New in WCAG 2.2 (öffnet in neuem Tab)
• W3C WAI: Understanding WCAG 2.2 (öffnet in neuem Tab)
• W3C WAI: WCAG 3 Introduction (öffnet in neuem Tab)
• Bundesfachstelle Barrierefreiheit für Informationstechnik (BFIT-Bund) (öffnet in neuem Tab)