Die ultimative WCAG 2.1 & 2.2 Level AA Checkliste.

Was ist WCAG? Ihr Leitfaden für ein zugänglicheres Web

Die Web Content Accessibility Guidelines (WCAG) sind internationale Standards, die vom Web Accessibility Initiative (WAI) des W3C entwickelt wurden. Diese Richtlinien beschreiben, wie Websites, Anwendungen und digitale Dokumente für Menschen mit Behinderungen zugänglich gemacht werden können. Diese Idee basiert auf dem Prinzip, dass das Internet für alle funktionieren sollte, unabhängig von ihren Fähigkeiten.

Die am häufigsten verwendeten Versionen sind jetzt WCAG 2.1 und WCAG 2.2, die kürzlich veröffentlicht wurden. Beide Versionen von WCAG sind abwärtskompatibel. Das bedeutet, dass neue Updates vergangene Erfolgskriterien für WCAG nicht ungültig machen werden.

Die WCAG basiert auf vier grundlegenden Prinzipien:

• Wahrnehmbar: Informationen müssen so präsentiert werden, dass ein Benutzer weiß, dass Informationen präsentiert werden. Dies gilt für Benutzer jeder unterstützenden Technologie.
• Bedienbar: Alle Benutzeroberflächenelemente müssen mit der Tastatur bedienbar sein und alle nicht-mausbasierten Schnittstellentechnologien.
• Verständlich: Inhalte müssen so präsentiert werden, dass sie verständlich und vorhersehbar sind, um Verwirrung und Fehler zu vermeiden.
• Robust: Inhalte müssen mit aktuellen Technologien kompatibel sein und mit zukünftigen Technologien verfügbar und nutzbar sein.

Für viele kann digitale Barrierefreiheit keine Option sein, sondern vielmehr eine Bedingung für den gleichberechtigten Zugang zur Welt.

Darüber hinaus kann es Menschen daran hindern, an den digitalen Aktivitäten des täglichen Lebens teilzunehmen, wie Einkaufen, Bankgeschäfte, Arbeit und den Zugang zu Regierungsdiensten.

WCAG 2.2 vs. WCAG 2.1: Was ist neu und was bleibt gleich

WCAG 2.2, veröffentlicht im Oktober 2023, erweitert WCAG 2.1, ohne bestehende Erfolgskriterien zu entfernen oder zu ändern. Stattdessen führt es neun neue Anforderungen ein, mit dem Schwerpunkt auf der Verbesserung der Web-Erfahrung für Menschen mit kognitiven Beeinträchtigungen, Sehbehinderungen und motorischen Beeinträchtigungen [W3C, WCAG 2.2 Überblick].

Einer der größten Vorteile von WCAG 2.2 ist, dass es reale Usability-Probleme anspricht. Zum Beispiel:

• Fokus nicht verdeckt (Minimum und Erweitert): Stellt sicher, dass Tastaturnutzer das aktuell fokussierte Element, wie Schaltflächen oder Links, immer sehen können, auch wenn Seitenelemente wie Haftköpfe vorhanden sind.
• Ziehbewegungen: Erfordert, dass Benutzer Aufgaben ohne Ziehen von Elementen abschließen können, was Menschen mit motorischen Beeinträchtigungen hilft.
• Zielgröße (Minimum): Verhindert, dass kleine Schaltflächen oder Links schwer zu tippen sind, insbesondere auf mobilen Geräten.
• Barrierefreie Authentifizierung (Minimum und Erweitert): Stoppt die Verwendung von Gedächtnis- oder Logiktests (wie das Identifizieren von Bildern von Autos) als einzige Methode zur Anmeldung.

Diese Updates stärken die mobile Zugänglichkeit und minimieren Reibung in alltäglichen Interaktionen, insbesondere für Personen, die Herausforderungen mit feinmotorischen Fähigkeiten oder Kurzzeitgedächtnis haben.

Schauen Sie sich unseren WCAG Accessibility Guide für ein besseres Verständnis der Konformitätsstufen an.

Warum die Einhaltung von WCAG 2.2 gut für Unternehmen

Die Umsetzung von WCAG 2.2 Level AA ist nicht nur eine rechtliche Pflicht. Sie schafft echten geschäftlichen Mehrwert und verbessert die Nutzererfahrung für Millionen von Menschen.

Größere Reichweite für Ihre Zielgruppe

Weltweit leben laut der Weltgesundheitsorganisation (WHO) über 1 Milliarde Menschen mit einer Form von Behinderung. Viele von ihnen nutzen Screenreader, Tastaturnavigation, Bildschirmvergrößerungen oder Spracherkennung, um auf das Internet zuzugreifen.

Durch die Einhaltung von WCAG 2.2 wird Ihr digitaler Inhalt für ein viel breiteres Publikum zugänglich, einschließlich älterer Nutzer:innen und Personen mit temporären Einschränkungen, wie z. B. einem gebrochenen Arm oder Augenbelastung.

Inklusives Design nützt allen, nicht nur Menschen mit dauerhaften Behinderungen.

Reduzierung rechtlicher Risiken

WCAG wird in vielen Gesetzen zur digitalen Barrierefreiheit weltweit referenziert. Zum Beispiel:

• In den USA wird das Americans with Disabilities Act (ADA) genutzt, um tausende Klagen gegen nicht barrierefreie Websites einzureichen. Obwohl WCAG im ADA nicht ausdrücklich genannt wird, verwenden die meisten Gerichtsurteile WCAG 2.1 Level AA oder WCAG 2.2 als Maßstab.
• In der Europäischen Union verpflichtet der kommende European Accessibility Act (EAA) viele digitale Dienste bis Juni 2025 zur Einhaltung der WCAG.

Nicht-Konformität kann zu finanziellen Strafen, Reputationsschäden oder Umsatzverlusten aufgrund nicht zugänglicher Online-Angebote führen.

Besseres SEO und mobile Nutzererfahrung

Maßnahmen zur Barrierefreiheit gehen oft Hand in Hand mit Suchmaschinenoptimierung (SEO). Funktionen wie:

• Beschreibende Alt-Texte
• Semantisches HTML
• Klare Seitenüberschriften
• Mobilfreundliche Navigation
• Schnellere Ladezeiten

helfen Ihrer Website, besser zu ranken und bei allen Nutzer:innen leistungsfähiger zu sein.

Google empfiehlt Best Practices der Barrierefreiheit, weil sie die Benutzbarkeit und Qualität einer Seite insgesamt verbessern.

Vertrauen in die Marke und soziale Verantwortung

Die Verpflichtung zu WCAG 2.2 zeigt Kund:innen, Partnern und Stakeholdern, dass Ihr Unternehmen Inklusion und Chancengleichheit ernst nimmt.

Barrierefreie Websites sind leichter zu bedienen, vertrauenswürdiger und erzeugen eine positivere Markenwahrnehmung. Das kann zu höherer Kundentreue führen – besonders bei Gen Z und Millennials, die ethische und inklusive Marken bevorzugen.

Lesen Sie, wie barrierefreies Design Vertrauen stärkt, in unserem Beitrag: Gestaltungsrichtlinien für blinde und sehbehinderte Menschen

Verständnis der WCAG-Stufen: A, AA und AAA im Vergleich

Die Web Content Accessibility Guidelines (WCAG) definieren drei Konformitätsstufen: Level A, Level AA und Level AAA. Jede Stufe baut auf der vorherigen auf und verbessert die Nutzbarkeit für Menschen mit verschiedenen Behinderungen, darunter Seh-, Hör-, motorische und kognitive Einschränkungen.

Dieses gestufte System hilft Entwickler:innen und Unternehmen, Barrierefreiheitsmaßnahmen nach Prioritäten umzusetzen, je nach gesetzlichen Anforderungen, Nutzerbedürfnissen und verfügbaren Ressourcen.

Quelle: W3C – WCAG Conformance Requirements

Level A – Das absolute Minimum

Level A legt die Grundlage für Barrierefreiheit. Es enthält Erfolgskriterien, die erfüllt werden müssen, damit Menschen mit erheblichen Einschränkungen überhaupt auf grundlegende Inhalte zugreifen können.

Beispiele für Anforderungen auf Level A:

• Nicht-textliche Inhalte müssen Textalternativen haben (SC 1.1.1)
  Beispiel: Ein Einkaufswagen-Symbol sollte alt="Warenkorb anzeigen" haben.
• Tastaturzugänglichkeit (SC 2.1.1)
  Nutzer:innen müssen Menüs, Buttons und Formulare ohne Maus bedienen können.
• Keine Inhalte dürfen mehr als dreimal pro Sekunde blinken (SC 2.3.1)
  Dies schützt Personen mit Epilepsie oder lichtempfindlichen Störungen.

Erfahre mehr in unserer 10 Beispiele für barrierefreie Websites + vollständige Checkliste für 2025 für einen Überblick.

Level AA – Der rechtliche und benutzerfreundliche Standard

Level AA umfasst alle Anforderungen von Level A und ergänzt sie durch verfeinerte Kriterien, die die Benutzerfreundlichkeit für eine breitere Zielgruppe verbessern.

Diese Stufe wird von den meisten Gesetzen empfohlen, u. a.:

• ADA (USA)
• European Accessibility Act (EU)
• Section 508 (für US-Behörden)
• EN 301 549 (EU-Norm für Barrierefreiheit)

Anforderung	WCAG SC	Beschreibung	Beispiel
Kontrastverhältnis (normaler Text)	1.4.3	Text muss ein Kontrastverhältnis von mindestens 4.5:1 zum Hintergrund haben.	Hellgrau auf Weiß = nicht ausreichend; besser: dunklere Textfarbe
Bedeutungsvolle Überschriften	2.4.6	Seiten müssen klare, beschreibende Überschriften und Labels enthalten.	Logische Struktur mit <h1> bis <h6> verwenden
Sichtbare Fokusindikatoren	2.4.7	Interaktive Elemente müssen bei Tastaturnavigation hervorgehoben sein.	Tab-Taste hebt Links oder Buttons mit Outline oder Stiländerung hervor
Konsistente Navigation	3.2.3	Wiederholte Navigationselemente sollen auf allen Seiten an der gleichen Stelle sein.	Hauptnavigation bleibt oben auf jeder Seite
Barrierefreier Login	WCAG 2.2	Login darf sich nicht allein auf Gedächtnis, Rätsel oder visuelle Inhalte stützen.	Login per E-Mail-Link oder Einmalcode statt komplizierter Passwörter

Quelle: W3C – What’s New in WCAG 2.2

Für eine vollständige Übersicht dieser Kriterien, lies unseren WCAG 2.2: Web Compliance & Barrierefreiheit standards

Level AAA – Ideal, aber nicht immer realistisch

Level AAA ist die umfassendste Stufe. Sie enthält Kriterien, die eine maximale Zugänglichkeit für Menschen mit schweren oder mehrfachen Behinderungen ermöglichen.

WCAG erkennt jedoch an, dass eine vollständige AAA-Konformität nicht für alle Inhalte realistisch ist.

Beispiele für Anforderungen auf Level AAA:

• Gebärdensprachdolmetscher für alle vorab aufgenommenen Videos (SC 1.2.6)
  Beispiel: Ein Werbevideo eines Unternehmens muss eine:n Dolmetscher:in im Bild zeigen.
• Leseniveau darf das untere Sekundarstufenniveau nicht überschreiten (SC 3.1.5)
  Schwierigkeit: Besonders bei juristischen oder technischen Inhalten.
• Echtzeit-Transkripte für Live-Audio-Inhalte (SC 1.2.9)
  Beispiel: Ein Live-Podcast muss live mitgeschrieben werden (Live Captioner).

Obwohl Level AAA erstrebenswert ist, ist Level AA der gängige Standard, sowohl für die rechtliche Absicherung als auch für ein inklusives Design.

Quelle: W3C – WCAG Levels Overview

WCAG 2.1 & 2.2 AA Checkliste: Was Sie erfüllen müssen

Während WCAG 2.1 Verbesserungen für mobile Nutzer:innen sowie Menschen mit kognitiven oder Sehbehinderungen einführte, brachte WCAG 2.2 neun neue Erfolgskriterien, um die Nutzbarkeit für Personen mit motorischen Einschränkungen und kognitiven Herausforderungen weiter zu verbessern.

Hier ist eine praxisorientierte Checkliste mit wichtigen Erfolgskriterien, die jede WCAG 2.1 & 2.2 AA-konforme Website umsetzen sollte:

Barrierefreiheits-Funktion	Anforderung	Beispiele
Alt-Texte für Bilder	Alle bedeutungsvollen Bilder benötigen beschreibenden Alt-Text. Dekorative Bilder verwenden alt="".	- alt="Schwarzer Leder-Rucksack mit Frontreißverschluss" - alt="" für Rahmen oder dekorative Grafiken
Tastaturbedienbarkeit	Alle Funktionen müssen vollständig mit der Tastatur bedienbar sein.	- Dropdowns mit Enter öffnen, mit Tab/Pfeiltasten navigieren - Modale Fenster mit Esc schließen - Slider und Formulare mit Tab durchgehen
Kontrastverhältnis	Text muss Mindestkontrast einhalten: - Normaler Text: 4.5:1 - Großer Text: 3:1	- Hellgrau auf Weiß = nicht ausreichend - Schwarzer Text auf pastellgelb = ausreichend
Klar strukturierte Überschriften & Bereiche	Nutze semantisches HTML (<h1>–<h6>, <nav>, <main>, <section>) für logische Gliederung.	- Blog nutzt <main> für Inhalte, <aside> für verwandte Artikel - Abschnittsüberschriften mit <h2>
Sichtbarer Fokus	Alle interaktiven Elemente benötigen eine klar erkennbare Fokusanzeige.	- Links zeigen Outline oder Unterstreichung beim Fokus - Buttons ändern Farbe oder zeigen Rahmen
Keine Tastatur-Fallen	Nutzer:innen dürfen nicht in interaktiven Komponenten "gefangen" sein.	- Modal lässt sich mit Esc oder Tab verlassen - Karussell fängt Nutzer:innen nicht ein oder läuft nicht endlos
Textvergrößerung	Inhalte müssen bis zu 200 % vergrößert nutzbar bleiben, ohne Layout-Probleme.	- Vergrößerter Text überlappt nicht - Seitenleisten passen sich an kleine Bildschirme an
Fehlermeldungen & Vorschläge	Fehler bei der Eingabe klar benennen und Lösungsvorschläge bieten.	- Zeige: „E-Mail-Adresse fehlt ein @-Symbol“ - Feld mit Nachricht und Symbol markieren
Barrierefreier Login (2.2)	Vermeide Anforderungen wie Gedächtnisleistung, Rätsel oder bildbasierte CAPTCHAs als einzige Login-Methode.	- Keine „Wähle alle Felder mit einem Auto“-CAPTCHAs - Biete Passwortmanager, OTP oder Social Login an
Zielgröße (2.2)	Interaktive Elemente müssen mindestens 24×24 CSS-Pixel groß und ausreichend voneinander getrennt sein.	- „X“-Symbol im Modal hat zusätzliche Klickfläche - Buttons sind mobilfreundlich groß und nicht zu nah beieinander
Alternative zu Drag & Drop (2.2)	Alle Funktionen müssen auch ohne Ziehen und Ablegen möglich sein.	- Datei-Upload mit „Klicken zum Hochladen“ - Sortierlisten mit Auf/Ab-Schaltflächen statt Drag & Drop

Erfahre, wie wir diese Standards bei Accesstive umsetzen, besuche unsere Access Services, die vollständig nach WCAG 2.2 AA entwickelt wurden.

So testen Sie Ihre Website auf WCAG AA-Konformität

Die Prüfung Ihrer Website auf WCAG Level AA ist unerlässlich, nicht nur zur Verbesserung der Barrierefreiheit, sondern auch zur Reduzierung rechtlicher Risiken. Die beste Praxis besteht darin, automatisierte Tools, manuelle Prüfungen und Tests mit echten Nutzer:innen zu kombinieren.

Automatisierte Test-Tools

Sie können mit diesen Tools beginnen:

• WAVE: Browserbasiertes Tool zur Erkennung von Kontrastproblemen, fehlenden Labels u. v. m.
• axe DevTools: Chrome-/Firefox-Erweiterung, die mit der Deque-Engine Barrierefreiheitsfehler erkennt.
• Lighthouse: Kostenloses Google-Chrome-Tool, das auch einen Accessibility-Score basierend auf WCAG enthält.
• Access AI Audit: KI-gestütztes Tool, das Ihre Website direkt im Browser auf WCAG 2.1 & 2.2 Level AA-Probleme prüft, etwa Kontrast, Alt-Texte, Fokus-Zustände und mehr.
• Access Monitor: Diese Plattform scannt und verfolgt Barrierefreiheitsprobleme im Zeitverlauf und bietet detaillierte Berichte gemäß Ihren WCAG-Konformitätszielen.

Wichtig: Kein Tool findet 100 % der Probleme. Automatisierte Tests können z. B. nicht bewerten, ob ein Alt-Text sinnvoll ist oder ob eine Fehlermeldung im Formular verständlich genug ist.

Manuelle Testmethoden

• Tastatur-Navigation: Verwenden Sie nur die Tastatur (Tab, Shift+Tab, Enter, Esc), um Ihre Seite zu durchlaufen.
  → Können Sie alle Links und Buttons erreichen? Ist der Fokus sichtbar?
• Screenreader-Test: Testen Sie Ihre Website mit NVDA (Windows) oder VoiceOver (Mac).
  → Sind Überschriften, Buttons und Formulare beim Vorlesen verständlich?
• Zoom- & Kontrast-Test: Zoomen Sie die Seite auf 200 % und aktivieren Sie den High-Contrast-Modus.
  → Bricht das Layout? Werden Inhalte ausgeblendet?

Wir empfehlen außerdem, dem Prüfablauf der W3C Accessibility Evaluation Resources zu folgen.

Unsicher, wo Sie anfangen sollen?
Starten Sie jetzt mit einem Free Accessibility Checker, um einen ersten Überblick über Ihre Barrierefreiheitsprobleme zu erhalten.

Barrierefreiheit ist ein kontinuierlicher Prozess: Warum WCAG 2.2 heute wichtiger ist denn je

Barrierefreiheit ist kein Projekt, sie ist ein fortlaufender Prozess, um digitale Umgebungen frei von Hürden zu gestalten. Da sich Technologien ständig weiterentwickeln, müssen sich auch unsere Standards anpassen. Die WCAG 2.2 ist das Ergebnis neuer Erkenntnisse über die Bedürfnisse von Nutzer:innen, insbesondere von Menschen mit kognitiven und motorischen Einschränkungen.

Ganz gleich, ob Sie Entwickler:in, Marketer, Product Owner, Gründer:in oder etwas dazwischen sind:
Wenn Sie Barrierefreiheit als festen Bestandteil Ihres Workflows integrieren, verbessern Sie die User Experience, stärken Ihre SEO-Leistung und steigern die Inklusivität Ihrer Marke.

Barrierefreiheit ist nicht nur gesetzliche Pflicht, sie ist digitaler Respekt.