WCAG verstehen und Barrieren gezielt prüfen
Die Web Content Accessibility Guidelines (WCAG) beschreiben Anforderungen an zugängliche Webinhalte. Hier findest Du die Grundlagen und praktische Leitfäden zu Formularen, Tastaturbedienung, Kontrasten und weiteren Themen.
Welches Problem möchtest Du lösen?
Wähle ein Thema. Die verlinkten Leitfäden zeigen Prüfschritte und Code-Beispiele.
Formulare & Bedienung
Formulare, Labels & Fehlervalidierung
Beschriftungen und Fehlermeldungen sollen Dir zeigen, welche Eingaben nötig sind und wie Du Fehler korrigierst.
Tastaturfokus, Modals & Dialoge
Prüfe, ob Du Dialoge und Cookie-Banner mit der Tastatur bedienen, schließen und wieder verlassen kannst.
Sichtbarer und nicht verdeckter Fokus
Ein Sticky Header darf fokussierte Elemente nicht vollständig verdecken; zusätzliche Anforderungen gelten für die sichtbare Fokusdarstellung.
Touch-Zielgrößen & Gesten
Prüfe Zielgrößen und Abstände: 2.5.8 (AA) verlangt 24 × 24 CSS-Pixel oder eine der definierten Ausnahmen; 2.5.5 (AAA) hat ein höheres Ziel.
Zugängliche Authentifizierung & 2FA
Prüfe, ob sich Menschen mit Passwort-Manager, Einfügen oder einer geeigneten Alternative ohne kognitiven Funktionstest anmelden können.
Statusmeldungen nach einer Aktion
Erfolg, Fortschritt und Ergebniszahlen müssen auch ohne Fokuswechsel wahrnehmbar sein.
Kontraste & Darstellung
Textkontrast & Themes
Prüfe Textkontrast in beiden Themes: meist 4,5:1, für große Schrift 3:1; Ausnahmen erklärt der Leitfaden.
Nicht-Text-Kontrast: Rahmen, Fokus & Icons
Prüfe notwendige Rahmen, Icons und Zustandsmerkmale auf 3:1 zu angrenzenden Farben; ein Textkontrast-Scan deckt das nicht ab.
Inhalte & Orientierung
Semantisches HTML & gezielter ARIA-Einsatz
Prüfe, ob Browser und Hilfsmittel Namen, Rollen und Zustände Deiner Bedienelemente erkennen.
Bilder, Grafiken & aussagekräftige Alt-Texte
Prüfe, ob Bildalternativen den Zweck des Bildes vermitteln und dekorative Bilder mit leerem Alt-Text übersprungen werden.
Barrierefreie Links & Buttons
Prüfe, ob Menschen den Zweck eines Links oder Buttons anhand seiner Beschriftung und des zulässigen Kontexts verstehen.
Navigation, Überschriften & Skip-Links
Prüfe, ob Überschriften und Seitenbereiche Orientierung geben und wiederkehrende Navigation übersprungen werden kann.
WCAG kurz erklärt: Aufbau, Level und Versionen
Vier Prinzipien gliedern die WCAG: wahrnehmbar, bedienbar, verständlich und robust. Erfolgskriterien machen daraus konkrete Anforderungen, denen jeweils eine Stufe A, AA oder AAA zugeordnet ist.
Struktur-Hierarchie
WCAG → 4 Prinzipien → Richtlinien → Erfolgskriterien → Level A, AA oder AAA
Eine Richtlinie bündelt ein Thema, etwa Tastaturbedienung. Die zugehörigen Erfolgskriterien beschreiben, was geprüft werden muss.
Die vier WCAG-Prinzipien (POUR)
- Wahrnehmbar (Perceivable)
- Können User die Informationen wahrnehmen?
- Bedienbar (Operable)
- Können User alle Funktionen bedienen?
- Verständlich (Understandable)
- Sind Inhalte und Abläufe für User verständlich?
- Robust (Robust)
- Können Hilfsmittel und Browser den Code interpretieren?
Was bedeuten Level A, AA und AAA?
AA umfasst alle Kriterien aus A und AA. AAA ergänzt weitere Anforderungen. Welche Version und Stufe Du erfüllen musst, hängt vom vereinbarten oder geltenden Prüfmaßstab ab.
| Level | Einfach erklärt | Praktische Bedeutung |
|---|---|---|
| Level A | Grundlegende Anforderungen | Zum Beispiel Textalternativen und Tastaturbedienung. |
| Level AA | Zusätzliche Anforderungen zu Level A | Prüfziel für viele Webprojekte; der konkrete Prüfmaßstab entscheidet. |
| Level AAA | Zusätzliche Anforderungen zu Level AA | Zum Beispiel höherer Textkontrast (1.4.6) und Fokus-Erscheinungsbild (2.4.13). |
Was ist der Unterschied zwischen WCAG 2.1 und WCAG 2.2?
WCAG 2.2 ergänzt WCAG 2.1 um neun Erfolgskriterien. Das frühere Kriterium 4.1.1 (Parsing) wurde entfernt. Prüfe für Dein Projekt, welche Version vertraglich oder gesetzlich maßgeblich ist.
- WCAG 2.1
Ergänzt frühere Versionen um Anforderungen für mobile Nutzung und responsive Interaktionen.
Touch-Gesten, Bildschirm-Orientierung, flexible Textabstände, reflowbare Layouts.
- WCAG 2.2
Baut auf WCAG 2.1 auf und ergänzt weitere Kriterien für moderne Bedienmuster und kognitive Entlastung.
Nicht verdeckter Fokus (2.4.11), Mindest-Touch-Zielgrößen (2.5.8), zugängliche Authentifizierung ohne Gedächtnistest (3.3.8).
Vorher / Nachher: Ein Formularfeld beschriften
Ein verknüpftes Label benennt das Feld und bleibt beim Tippen sichtbar. Das for-Attribut muss zur id des Eingabefelds passen.
Vorher: Beschriftung fehlt
<input type="email" name="email">Nachher: Label und Feld verknüpft
<label for="email">
E-Mail-Adresse
</label>
<input type="email" id="email"
name="email" autocomplete="email">Wichtige Abläufe prüfen und Befunde priorisieren
Beginne mit Aufgaben, die Menschen auf Deiner Website erledigen müssen: kaufen, registrieren, anmelden oder Kontakt aufnehmen.
Blockierte Aufgaben zuerst
Priorisiere Fehler nach ihrer Auswirkung auf die Nutzung. Ein unerreichbarer Kauf-Button oder eine Tastaturfalle kann eine Aufgabe verhindern. Halte betroffene Seiten, Zustände und reproduzierbare Schritte fest.
Vom Befund zur erneuten Prüfung
Prüfumfang festlegen
Wähle Seiten, Geräte und Zustände. Notiere auch Bereiche, die Du nicht erreichen oder prüfen konntest.
Prüfen und beheben
Kombiniere automatisierte Checks mit manuellen Tests. Gib Befunde mit Fundstelle und Reproduktionsschritten an die Entwicklung weiter.
Erneut prüfen und dokumentieren
Wiederhole die betroffenen Tests nach der Behebung. Halte Ergebnis, Prüfumfang und verbleibende Barrieren fest.
Automatisch und manuell prüfen
Automatisierte Checks finden maschinell prüfbare Probleme wie fehlende Namen, ungültiges ARIA oder Textkontraste im erreichten Zustand. Notwendige Rahmen, Icons und Zustände brauchen zusätzlich eine gezielte Nicht-Text-Kontrastprüfung.
Prüfe vollständige Abläufe mit Tastatur und Screenreader. Ob Bildbeschreibungen passen, Fehler verständlich sind und alle wichtigen Zustände erreicht wurden, braucht eine Bewertung im Nutzungskontext. Ein Scan belegt keine vollständige Konformität.
Wer übernimmt welche Prüfung?
- Entwicklung
Prüfe HTML, zugängliche Namen, Tastaturbedienung und Fokuswechsel in den betroffenen Komponenten.
Zu Formularen und Bedienung- Design
Prüfe Lesbarkeit, Kontraste, Zielgrößen und die Darstellung von Fokus, Fehlern und Auswahl.
Zu Kontrasten und Darstellung- Produkt & Agenturen
Lege wichtige Abläufe, Prüfzustände und Zuständigkeiten fest. Plane Behebungen und dokumentiere offene Barrieren.
Zur Priorisierung
Mit navable prüfen und weiterarbeiten
Im Audit sammelst Du Befunde aus geprüften Seiten und Zuständen. Entwickler-Tools helfen bei der Bearbeitung; aus Audit-Daten kannst Du einen Erklärungsentwurf erstellen.
Weitere Werkzeuge und Leitfäden
Local MCP einrichten
Mit dem offenen Local MCP kannst Du localhost ohne navable-Account prüfen. Die Einrichtungsanleitung zeigt die Konfiguration für Deine IDE.
Local MCP einrichtenStandards und Originalquellen
Die Originalquellen enthalten Kriterien, Ausnahmen und Erläuterungen. Für die Details eines Themas führt Dich der jeweilige Leitfaden zur passenden Quelle.