WCAG 2.1 Checkliste: Alle Kriterien auf Deutsch erklärt
Aktualisiert: März 2026 · Lesezeit: 18 Min.
Wissen Sie, was mich bei jedem Accessibility-Projekt nervt? Dass die offizielle WCAG-Dokumentation zwar extrem präzise ist, aber ungefähr so lesefreundlich wie ein Steuerbescheid. Und die deutsche Übersetzung auf w3.org? Liest sich, als hätte jemand den englischen Text wörtlich durch DeepL gejagt und den Rest dem Schicksal überlassen.
Also habe ich mir vorgenommen, hier eine Checkliste zu erstellen, die ein Webentwickler oder Projektmanager tatsächlich verwenden kann. Ohne W3C-Bürokratendeutsch, dafür mit konkreten Beispielen und klarer Einordnung, was wirklich relevant ist.
Kurzer Kontext: Das BFSG (Barrierefreiheitsstärkungsgesetz, seit Juni 2025 in Kraft) verweist über die harmonisierte Norm EN 301 549 auf die WCAG 2.1 Level AA. Das sind insgesamt 50 Erfolgskriterien — 30 aus Level A und 20 aus Level AA. Die muss ich nicht alle einzeln aufdröseln, aber die wichtigsten sollten Sie kennen.
Prinzip 1: Wahrnehmbar (Perceivable)
Inhalte müssen so dargestellt werden, dass alle Nutzer sie wahrnehmen können. Klingt selbstverständlich, oder? Ist es nicht.
1.1 Textalternativen
| Kriterium | Level | Was es bedeutet |
|---|
| 1.1.1 Nicht-Text-Inhalt | A | Jedes Bild, Icon, Diagramm braucht eine Textalternative. Dekorative Bilder bekommen alt="". |
Der häufigste Fehler, den ich sehe: alt="IMG_20240315_142233.jpg". Kommt öfter vor, als Sie denken — besonders bei CMS-Uploads, wo der Dateiname als Default genommen wird.
1.2 Zeitbasierte Medien
| Kriterium | Level | Was es bedeutet |
|---|
| 1.2.1 Nur Audio / Nur Video | A | Transkript für Audio, Textalternative oder Audiobeschreibung für Video |
| 1.2.2 Untertitel (voraufgezeichnet) | A | Alle voraufgezeichneten Videos brauchen Untertitel |
| 1.2.3 Audiodeskription | A | Audiodeskription oder Textalternative für Video |
| 1.2.4 Untertitel (live) | AA | Live-Videos brauchen Echtzeit-Untertitel |
| 1.2.5 Audiodeskription (voraufgezeichnet) | AA | Audiodeskription für alle voraufgezeichneten Videos |
Praxis-Realität: Die meisten Websites haben keine Videos, und wenn doch, sind es eingebettete YouTube-Videos. Die gute Nachricht — YouTubes Auto-Captions sind mittlerweile brauchbar. Die schlechte Nachricht — Sie sind trotzdem dafür verantwortlich, dass die Untertitel korrekt sind.
1.3 Anpassbar
| Kriterium | Level | Was es bedeutet |
|---|
| 1.3.1 Info und Beziehungen | A | Struktur und Beziehungen im Inhalt programmatisch erkennbar. Heißt: Überschriften als <h1>-<h6>, Listen als <ul>/<ol>, Tabellen mit <th>. |
| 1.3.2 Bedeutungstragende Reihenfolge | A | DOM-Reihenfolge = logische Lesereihenfolge. Keine CSS-Tricks, die die visuelle Reihenfolge von der Code-Reihenfolge abweichen lassen. |
| 1.3.3 Sensorische Eigenschaften | A | Anweisungen nicht nur über Form, Größe, Farbe oder Position. „Klicken Sie den roten Button rechts" → schlecht. |
| 1.3.4 Ausrichtung | AA | Inhalt nicht nur in einer Ausrichtung (Hoch-/Querformat) nutzbar. |
| 1.3.5 Eingabezweck bestimmen | AA | autocomplete-Attribute bei Formularfeldern mit persönlichen Daten. |
1.4 Unterscheidbar
| Kriterium | Level | Was es bedeutet |
|---|
| 1.4.1 Verwendung von Farbe | A | Farbe nicht als einziges Unterscheidungsmerkmal. Fehlerfelder nicht nur rot umranden — auch ein Icon oder Text dazusetzen. |
| 1.4.2 Audio-Steuerung | A | Auto-Play-Audio muss pausierbar sein oder nach 3 Sekunden stoppen. |
| 1.4.3 Kontrast (Minimum) | AA | Text: mindestens 4,5:1. Großer Text (ab 18pt/14pt fett): mindestens 3:1. |
| 1.4.4 Textgröße ändern | AA | Text muss auf 200 % vergrößerbar sein, ohne Funktionsverlust. |
| 1.4.5 Bilder von Text | AA | Text nicht als Bild einbetten (Ausnahme: Logos). |
| 1.4.10 Umfluss (Reflow) | AA | Bei 320px CSS-Breite kein horizontales Scrollen nötig. Responsive Design ist quasi Pflicht. |
| 1.4.11 Nicht-Text-Kontrast | AA | UI-Komponenten und grafische Objekte: mindestens 3:1 Kontrast. |
| 1.4.12 Textabstand | AA | Wenn Nutzer Zeilenabstand auf 1,5 oder Absatzabstand auf 2× setzen: kein Inhaltsverlust. |
| 1.4.13 Inhalt bei Hover/Fokus | AA | Tooltips, die bei Hover erscheinen: abweisbar, hover-fähig, persistent. |
1.4.3 ist das Kriterium, das bei automatisierten Tests am häufigsten fehlschlägt. In meiner Erfahrung haben über 60 % aller Websites mindestens einen Kontrastverstoß. Meist bei Placeholder-Text oder sekundären Informationen.
Prinzip 2: Bedienbar (Operable)
2.1 Tastatur-Zugänglichkeit
| Kriterium | Level | Was es bedeutet |
|---|
| 2.1.1 Tastatur | A | Alle Funktionen per Tastatur bedienbar. |
| 2.1.2 Keine Tastaturfalle | A | Der Fokus darf nirgendwo „hängenbleiben". |
| 2.1.4 Zeichentastenkürzel | A | Single-Key-Shortcuts müssen abstellbar oder umkonfigurierbar sein. |
2.2 Ausreichend Zeit
| Kriterium | Level | Was es bedeutet |
|---|
| 2.2.1 Zeitbasierte Begrenzung | A | Session-Timeouts müssen verlängerbar sein (außer bei Echtzeit-Events oder Sicherheitsgründen). |
| 2.2.2 Pause, Stopp, Ausblenden | A | Auto-scrollende Inhalte, Animationen: pausierbar oder stoppbar. |
2.3 Anfälle und körperliche Reaktionen
| Kriterium | Level | Was es bedeutet |
|---|
| 2.3.1 Dreimaliges Blitzen | A | Keine Inhalte, die mehr als 3× pro Sekunde blitzen. Epilepsie-Risiko. |
2.4 Navigierbar
| Kriterium | Level | Was es bedeutet |
|---|
| 2.4.1 Blöcke umgehen | A | Skip-Links oder Landmark-Regionen, um wiederkehrende Blöcke zu überspringen. |
| 2.4.2 Seite hat Titel | A | Jede Seite braucht einen aussagekräftigen <title>. |
| 2.4.3 Fokusreihenfolge | A | Tab-Reihenfolge logisch und nachvollziehbar. |
| 2.4.4 Linkzweck (im Kontext) | A | „Hier klicken" und „Mehr lesen" ohne Kontext? Schlecht. |
| 2.4.5 Verschiedene Methoden | AA | Mehr als ein Weg, um Seiten zu finden (Navigation + Suche + Sitemap). |
| 2.4.6 Überschriften und Labels | AA | Überschriften und Labels beschreiben Thema oder Zweck. |
| 2.4.7 Fokus sichtbar | AA | Sichtbarer Fokusindikator. Bitte nicht outline: none ohne Alternative! |
Klassiker-Fehler: *:focus { outline: none; } in der CSS-Reset-Datei. Damit löschen Sie den Fokusindikator für alle Elemente. Machen Sie das bitte nie. Wenn Ihnen der Standard-Outline nicht gefällt, gestalten Sie einen eigenen: :focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
2.5 Eingabemodalitäten
| Kriterium | Level | Was es bedeutet |
|---|
| 2.5.1 Zeigergesten | A | Multi-Touch-Gesten brauchen eine Single-Pointer-Alternative. |
| 2.5.2 Zeigerabbruch | A | Aktionen auf mouseup/touchend, nicht auf mousedown/touchstart. |
| 2.5.3 Label im Namen | A | Der zugängliche Name enthält den sichtbaren Text. |
| 2.5.4 Bewegungssteuerung | A | Shake-to-undo o.Ä. muss deaktivierbar sein. |
Prinzip 3: Verständlich (Understandable)
3.1 Lesbar
| Kriterium | Level | Was es bedeutet |
|---|
| 3.1.1 Sprache der Seite | A | <html lang="de"> — klingt trivial, fehlt aber oft. |
| 3.1.2 Sprache von Teilen | AA | Fremdsprachige Passagen markieren: <span lang="en">User Experience</span> |
3.2 Vorhersehbar
| Kriterium | Level | Was es bedeutet |
|---|
| 3.2.1 Bei Fokus | A | Kein Kontextwechsel nur durch Fokussieren eines Elements. |
| 3.2.2 Bei Eingabe | A | Kein automatischer Kontextwechsel bei Eingabe (z.B. Auto-Submit bei Dropdown-Auswahl). |
| 3.2.3 Konsistente Navigation | AA | Navigation auf allen Seiten in gleicher Reihenfolge. |
| 3.2.4 Konsistente Erkennung | AA | Gleiche Funktionen gleich benennen. „Suche" auf einer Seite, „Finden" auf einer anderen? Nicht konsistent. |
3.3 Eingabeunterstützung
| Kriterium | Level | Was es bedeutet |
|---|
| 3.3.1 Fehlererkennung | A | Fehlerhafte Eingaben identifizieren und als Text beschreiben. |
| 3.3.2 Labels oder Anweisungen | A | Labels und Hinweise für Eingabefelder bereitstellen. |
| 3.3.3 Fehlerkorrekturvorschläge | AA | Bei erkannten Fehlern Korrekturvorschläge anbieten. |
| 3.3.4 Fehlervermeidung (rechtlich, finanziell) | AA | Bei rechtlichen/finanziellen Transaktionen: Überprüfen, Bestätigen oder Rückgängigmachen ermöglichen. |
Prinzip 4: Robust (Robust)
| Kriterium | Level | Was es bedeutet |
|---|
| 4.1.1 Syntaxanalyse | A | Valides HTML. Keine doppelten IDs, korrekte Verschachtelung. (In WCAG 2.2 als „immer erfüllt" eingestuft, aber für WCAG 2.1 noch relevant.) |
| 4.1.2 Name, Rolle, Wert | A | Alle UI-Komponenten haben zugänglichen Namen und korrekte Rolle. |
| 4.1.3 Statusmeldungen | AA | Statusmeldungen (Erfolg, Fehler, Ladebalken) programmatisch für Screenreader verfügbar, z.B. via role="alert" oder aria-live. |
Die Neu-in-2.1-Kriterien: Was WCAG 2.0 nicht hatte
Falls Sie sich fragen, was WCAG 2.1 gegenüber 2.0 hinzugefügt hat — hier die 17 neuen Kriterien. Besonders relevant sind die, die Mobile-Nutzung und kognitive Zugänglichkeit adressieren:
- 1.3.4 Ausrichtung — Keine fixe Hoch-/Querformat-Bindung
- 1.3.5 Eingabezweck — Autocomplete-Attribute
- 1.4.10 Reflow — Responsive bei 320px
- 1.4.11 Nicht-Text-Kontrast — Buttons, Icons, Formularfelder
- 1.4.12 Textabstand — Zeilenabstand anpassbar
- 1.4.13 Inhalt bei Hover/Fokus — Tooltips korrekt umsetzen
- 2.1.4 Zeichentastenkürzel — Single-Key-Shortcuts deaktivierbar
- 2.5.1-2.5.4 — Zeiger-Eingaben, Touch-Gesten
- 4.1.3 Statusmeldungen — Live Regions für dynamische Updates
Mein persönlicher Tipp: Wenn Sie eine bestehende Website prüfen, fangen Sie mit den neuen 2.1-Kriterien an. Die werden am häufigsten übersehen, weil viele Websites ursprünglich gegen WCAG 2.0 gebaut wurden (wenn überhaupt).
BFSG-Check: Prüfen Sie kostenlos, ob Ihre Website die Barrierefreiheits-Grundlagen erfüllt —
Jetzt testen →
- Muss ich WCAG 2.1 oder WCAG 2.2 erfüllen?
- Das BFSG verweist über die EN 301 549 auf WCAG 2.1 Level AA. WCAG 2.2 (veröffentlicht Oktober 2023) ist aktuell noch nicht gesetzlich gefordert, enthält aber sinnvolle Verbesserungen. Wenn Sie heute eine neue Website bauen, empfehle ich direkt WCAG 2.2 AA umzusetzen — die zusätzlichen 9 Kriterien sind überschaubar und zukunftssicher.
- Was ist der Unterschied zwischen Level A, AA und AAA?
- Level A enthält die grundlegendsten Anforderungen (z.B. Alt-Texte für Bilder). Level AA baut darauf auf und enthält strengere Anforderungen (z.B. Mindestkontraste 4,5:1). Level AAA ist die höchste Stufe mit den strengsten Anforderungen (z.B. Kontrast 7:1). Das BFSG fordert Level AA — das sind insgesamt 50 Erfolgskriterien.