WCAG 2.2 einfach erklärt: Prinzipien, Stufen und Kriterien
Die WCAG sind der internationale Maßstab für barrierefreie Websites – und über Normen auch die Grundlage für das BFSG. Wir erklären, wie die Richtlinien aufgebaut sind, was in Version 2.2 neu ist und welche Kriterien Websites am häufigsten verfehlen.
Inhaltsverzeichnis
- Die WCAG (Web Content Accessibility Guidelines) sind die Richtlinien des W3C für barrierefreie Webinhalte. Version 2.2 ist seit dem 5. Oktober 2023 W3C-Empfehlung.
- Aufbau: 4 Prinzipien (wahrnehmbar, bedienbar, verständlich, robust), 13 Richtlinien und prüfbare Erfolgskriterien in den Stufen A, AA und AAA.
- Rechtlich relevant ist in Deutschland in der Regel Stufe AA – über die Norm EN 301 549 für BFSG und BITV 2.0.
- WCAG 2.2 bringt neun neue Kriterien, sechs davon in A oder AA – etwa Mindestgrößen für Klickflächen und verdeckungsfreien Fokus. Das Kriterium 4.1.1 „Parsing“ entfällt.
- Laut WebAIM-Million-Studie 2026 hatten 95,9 % der untersuchten Startseiten erkennbare WCAG-Fehler – am häufigsten zu geringe Kontraste.
Wer sich mit barrierefreien Websites beschäftigt, stößt schnell auf das Kürzel WCAG. Es steht in Ausschreibungen, in Normen und indirekt im Barrierefreiheitsstärkungsgesetz. Die Richtlinien selbst sind allerdings ein umfangreiches technisches Dokument auf Englisch. Dieser Beitrag übersetzt die wichtigsten Punkte in verständliche Sprache: wie die WCAG aufgebaut sind, was mit WCAG 2.2 hinzukam und wo Unternehmenswebsites in der Praxis am häufigsten scheitern.
Was sind die WCAG?
Die Web Content Accessibility Guidelines werden vom World Wide Web Consortium (W3C) herausgegeben, dem Gremium, das auch Standards wie HTML und CSS entwickelt. Sie beschreiben, wie Webinhalte gestaltet sein müssen, damit Menschen mit unterschiedlichen Einschränkungen sie nutzen können – zum Beispiel blinde Menschen mit Screenreader, Menschen mit Sehschwäche, motorischen Einschränkungen, Hörbehinderung oder kognitiven Beeinträchtigungen.
Die WCAG sind kein Gesetz. In Deutschland und der EU werden sie aber über Normen verbindlich: Die europäische Norm EN 301 549 verweist für Websites auf die WCAG, und sowohl die BITV 2.0 für öffentliche Stellen als auch das BFSG für bestimmte private Angebote stützen sich auf diese Norm.
Die aktuelle Fassung der EN 301 549 bezieht nach Angaben der Bundesfachstelle Barrierefreiheit die WCAG 2.1 in den Stufen A und AA ein. Eine überarbeitete Fassung, die auf WCAG 2.2 verweisen soll, ist in Arbeit. Da WCAG 2.2 abwärtskompatibel ist, erfüllt eine Website nach WCAG 2.2 AA auch die Anforderungen von WCAG 2.1 AA. Wer heute plant, orientiert sich deshalb sinnvollerweise gleich an 2.2.
Der Aufbau: Prinzipien, Richtlinien, Erfolgskriterien
Die WCAG sind in drei Ebenen gegliedert. Ganz oben stehen vier Prinzipien, die man sich als Leitfragen merken kann:
| Prinzip | Leitfrage | Beispiele |
|---|---|---|
| Wahrnehmbar | Können alle Nutzer die Inhalte erfassen? | Alternativtexte für Bilder, Untertitel für Videos, ausreichende Kontraste |
| Bedienbar | Lässt sich alles bedienen – auch ohne Maus? | Tastaturbedienung, sichtbarer Fokus, genug Zeit, keine blinkenden Elemente |
| Verständlich | Sind Inhalte und Bedienung nachvollziehbar? | Seitensprache, verständliche Fehlermeldungen, beschriftete Formularfelder |
| Robust | Funktioniert die Seite mit Hilfsmitteln? | Sauberer Code, korrekte Namen und Rollen für Bedienelemente |
Unter den Prinzipien stehen 13 Richtlinien, etwa „Textalternativen“, „Tastaturbedienbarkeit“ oder „Lesbarkeit“. Sie beschreiben Ziele, sind aber nicht direkt prüfbar. Prüfbar sind erst die Erfolgskriterien darunter, jeweils mit Nummer, Name und Stufe – zum Beispiel 1.4.3 „Kontrast (Minimum)“.
Die Stufen A, AA und AAA
- Stufe A: grundlegende Anforderungen. Werden sie verfehlt, ist eine Seite für manche Menschen gar nicht nutzbar.
- Stufe AA: der übliche Zielstandard. Für eine Konformität nach AA muss eine Seite laut W3C alle Kriterien der Stufen A und AA erfüllen.
- Stufe AAA: die höchste Stufe. Das W3C empfiehlt sie nicht als allgemeines Ziel für ganze Websites, weil nicht alle Inhalte sie erfüllen können.
Was ist neu in WCAG 2.2?
WCAG 2.2 wurde am 5. Oktober 2023 als W3C-Empfehlung veröffentlicht; die aktuelle Fassung stammt vom 12. Dezember 2024. Sie übernimmt die Kriterien aus 2.0 und 2.1 im Wesentlichen unverändert und ergänzt neun neue. Ein bisheriges Kriterium, 4.1.1 Parsing, gilt als überholt und wurde entfernt.
| Nr. | Kriterium | Stufe | Worum es geht |
|---|---|---|---|
| 2.4.11 | Fokus nicht verdeckt (Minimum) | AA | Das per Tastatur fokussierte Element darf nicht vollständig von eigenen Inhalten wie Sticky-Header oder Cookie-Banner verdeckt sein. |
| 2.4.12 | Fokus nicht verdeckt (Erweitert) | AAA | Wie oben, aber auch keine teilweise Verdeckung. |
| 2.4.13 | Fokus-Darstellung | AAA | Mindestanforderungen an Größe und Kontrast des Fokusrahmens. |
| 2.5.7 | Ziehbewegungen | AA | Alles, was per Ziehen funktioniert (z. B. Schieberegler), muss auch mit einfachem Klick oder Tippen gehen. |
| 2.5.8 | Zielgröße (Minimum) | AA | Klickflächen mindestens 24 × 24 CSS-Pixel – mit Ausnahmen, etwa bei ausreichendem Abstand oder Links im Fließtext. |
| 3.2.6 | Konsistente Hilfe | A | Hilfe wie Telefonnummer, Kontaktformular oder Chat steht auf allen Seiten an derselben Stelle. |
| 3.3.7 | Redundante Eingaben | A | Bereits eingegebene Daten müssen im selben Vorgang nicht erneut eingetippt werden. |
| 3.3.8 | Barrierefreie Authentifizierung (Minimum) | AA | Anmeldung ohne kognitive Tests wie Passwort merken oder Rätsel lösen – oder mit Hilfen wie Einfügen und Passwortmanager. |
| 3.3.9 | Barrierefreie Authentifizierung (Erweitert) | AAA | Strengere Variante, auch ohne Objekt- oder Bilderkennung. |
Für die übliche Zielstufe AA sind also sechs Kriterien neu: 2.4.11, 2.5.7, 2.5.8, 3.2.6, 3.3.7 und 3.3.8. Sie betreffen vor allem Bedienung auf dem Smartphone, Tastaturnutzer und Formulare – Bereiche, in denen Unternehmenswebsites häufig Schwächen haben.
Die häufigsten Fehler auf Websites
Die gemeinnützige Organisation WebAIM untersucht jedes Jahr automatisiert die Startseiten der eine Million meistbesuchten Websites. Im Bericht 2026 hatten 95,9 % der Startseiten erkennbare WCAG-Fehler, im Schnitt 56,1 pro Seite. Die sechs häufigsten Fehlerarten:
| Fehler | Anteil der Startseiten | Betroffenes Kriterium (Beispiel) |
|---|---|---|
| Text mit zu geringem Kontrast | 83,9 % | 1.4.3 Kontrast (Minimum) |
| Fehlende Alternativtexte für Bilder | 53,1 % | 1.1.1 Nicht-Text-Inhalt |
| Formularfelder ohne Beschriftung | 51 % | 1.3.1, 4.1.2 |
| Leere Links | 46,3 % | 2.4.4 Linkzweck |
| Leere Buttons | 30,6 % | 4.1.2 Name, Rolle, Wert |
| Fehlende Angabe der Seitensprache | 13,5 % | 3.1.1 Sprache der Seite |
Automatisierte Tests finden nur einen Teil der Probleme – die tatsächliche Fehlerzahl liegt eher höher. Die gute Nachricht: Gerade die häufigsten Fehler sind mit überschaubarem Aufwand zu beheben.
Kontrast: der Klassiker
Kriterium 1.4.3 verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5 : 1 zwischen Text- und Hintergrundfarbe, für großen Text mindestens 3 : 1. Hellgraue Schrift auf weißem Grund oder weiße Schrift auf einem hellen Markenfarbton verfehlen das schnell. Wie Sie Markenfarben barrierearm einsetzen, steht im Beitrag Farben für die Firmenwebsite.
Alternativtexte, Beschriftungen, leere Buttons
Die Fehler auf den Plätzen zwei bis fünf haben eine gemeinsame Ursache: Ein Element hat für Hilfsmittel keinen Namen. Ein Screenreader liest dann „Bild“, „Link“ oder „Schaltfläche“ vor – ohne zu sagen, was dahintersteckt. Typische Beispiele auf Firmenwebsites sind das Logo ohne Alternativtext, das Lupen-Symbol der Suche, Social-Media-Icons im Footer, der Hamburger-Button des Mobilmenüs und Formularfelder, bei denen nur ein grauer Platzhaltertext im Feld steht. Abhilfe schaffen ein kurzer, beschreibender Alternativtext, eine sichtbare Beschriftung über dem Feld oder ein unsichtbarer, aber vorlesbarer Name für Icon-Buttons. Rein dekorative Bilder bekommen dagegen einen leeren Alternativtext, damit sie übersprungen werden.
Legen Sie die Maus weg und gehen Sie Ihre Startseite und Ihr Kontaktformular nur mit der Tabulatortaste durch. Sehen Sie immer, wo Sie gerade sind? Erreichen Sie alle Links und Buttons? Lässt sich das Cookie-Banner schließen und das Formular absenden? Dieser einfache Test deckt viele Probleme auf, die kein automatisches Tool findet.
Wir prüfen Ihre Website nach WCAG 2.2 und setzen die Korrekturen direkt um.
WCAG und das Gesetz: Wer muss was erfüllen?
Die WCAG selbst verpflichten niemanden. Verbindlich werden sie über nationale Regeln:
- Öffentliche Stellen des Bundes müssen ihre Websites nach der BITV 2.0 barrierefrei gestalten; für Länder und Kommunen gibt es eigene Landesgesetze mit vergleichbaren Anforderungen.
- Private Unternehmen sind über das Barrierefreiheitsstärkungsgesetz betroffen, wenn sie bestimmte Dienstleistungen für Verbraucher anbieten – für Websites vor allem im elektronischen Geschäftsverkehr wie Online-Shops und Buchungen. Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen. Die Einzelheiten stehen im Beitrag BFSG: Wer ist betroffen?
Wer unter diese Regeln fällt, muss in der Regel auch erklären, wie barrierefrei sein Angebot ist. Was in eine solche Erklärung gehört, beschreibt der Beitrag Barrierefreiheitserklärung. Hinweis: Dieser Abschnitt ist eine allgemeine Einordnung und keine Rechtsberatung.
So prüfen Sie Ihre Website
- Automatischen Schnelltest machenKostenlose Browser-Erweiterungen und Prüfwerkzeuge finden typische Fehler wie fehlende Alternativtexte, leere Links oder zu geringe Kontraste. Ein guter Startpunkt, aber kein vollständiger Test.
- Tastatur testenAlle Funktionen mit Tabulator, Enter und Leertaste bedienen. Der Fokus muss sichtbar sein und darf nicht unter Sticky-Elementen verschwinden.
- ZoomenDie Seite auf 200 % vergrößern. Texte dürfen nicht abgeschnitten werden oder sich überlappen.
- Mit Screenreader hineinhörenMit dem in Windows oder macOS eingebauten Screenreader prüfen, ob Überschriften, Links und Formularfelder sinnvoll vorgelesen werden.
- Formulare durchspielenFehler absichtlich provozieren: Wird verständlich gesagt, was falsch ist und wie es richtig geht?
- Professionell prüfen lassenFür Angebote, die unter das BFSG fallen, empfiehlt sich eine vollständige Prüfung nach einem anerkannten Prüfverfahren. Die Bundesfachstelle verweist dafür als praktische Orientierung auf die Prüfschritte des BITV-Tests.
Barrierefreiheits-Widgets, die per Knopfdruck Schrift vergrößern oder Kontraste umschalten, ändern nichts an fehlenden Beschriftungen, falscher Überschriftenstruktur oder nicht bedienbaren Menüs. Die Anforderungen der WCAG werden in der Regel nur durch Änderungen an Gestaltung und Code erfüllt.
Checkliste: die wichtigsten WCAG-Punkte
- Text erreicht mindestens 4,5 : 1 Kontrast, große Schrift mindestens 3 : 1.
- Alle informativen Bilder haben aussagekräftige Alternativtexte.
- Jedes Formularfeld hat eine sichtbare, verknüpfte Beschriftung.
- Links und Buttons haben einen erkennbaren Namen – auch Icon-Buttons.
- Die Seitensprache ist im Code angegeben.
- Alles ist per Tastatur bedienbar, der Fokus ist sichtbar und nicht verdeckt.
- Klickflächen sind mindestens 24 × 24 Pixel groß oder ausreichend weit auseinander.
- Kontaktmöglichkeiten stehen auf allen Seiten an derselben Stelle.
- Formulare fragen nichts doppelt ab, und Passwörter dürfen eingefügt werden.
- Die Überschriften sind logisch gegliedert (eine H1, dann H2, H3).
Häufige Fragen
Gibt es schon WCAG 3.0?
Das W3C arbeitet an WCAG 3, das grundlegend anders aufgebaut sein soll. Es handelt sich aber um einen Entwurf, nicht um eine verabschiedete Empfehlung, und er ist in deutschen und europäischen Normen nicht verankert. Für Websites, die heute geplant oder überarbeitet werden, bleibt WCAG 2.2 in der Stufe AA der sinnvolle Maßstab.
Muss ich auch Stufe AAA erfüllen?
In der Regel nicht. Die einschlägigen Normen beziehen sich auf die Stufen A und AA. Das W3C selbst empfiehlt AAA nicht als allgemeines Ziel für ganze Websites, weil manche Inhalte die Kriterien gar nicht erfüllen können. Einzelne AAA-Kriterien umzusetzen, etwa einen besonders gut sichtbaren Fokusrahmen, kann trotzdem sinnvoll sein, wenn es Ihren Besuchern hilft.
Wie lange dauert es, eine bestehende Website WCAG-konform zu machen?
Das hängt stark vom Ausgangszustand ab. Kontraste, Alternativtexte und Beschriftungen lassen sich oft in wenigen Tagen korrigieren. Schwieriger wird es bei Page-Buildern mit verschachteltem Code, eigenen Slidern, Buchungs-Plugins oder Shop-Systemen, deren Barrieren vom Hersteller abhängen. Ein Prüfbericht zu Beginn zeigt, welche Punkte schnell gehen und wo ein Umbau nötig ist.
Sind PDFs auf der Website auch betroffen?
Ja, wenn sie Teil eines Angebots sind, das barrierefrei sein muss. PDFs brauchen dann zum Beispiel eine Struktur mit Tags, Alternativtexte und eine sinnvolle Lesereihenfolge. Das BFSG nimmt Büro-Dokumente aus, die vor dem 28. Juni 2025 veröffentlicht wurden. Für neue Dokumente lohnt es sich, wichtige Informationen lieber direkt als HTML-Seite anzubieten.
Quellen
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2 – W3C-Empfehlung, Fassung vom 12.12.2024
- W3C WAI: What's New in WCAG 2.2
- WebAIM: The WebAIM Million (2026) – Automatisierte Analyse von einer Million Startseiten
- Bundesfachstelle Barrierefreiheit: FAQ zum BFSG – EN 301 549 und WCAG-Version
- Verordnung zum BFSG (BFSGV), § 12
Gemeinsamer Beitrag des NEUZEITWERBER-Teams aus Webdesign, SEO und Marketing.
