01
Wahrnehmbar
1.1.1 Nicht-Text-Inhalte: Bilder, Icons und Grafiken benötigen Alt-Texte. 1.3.1 Informationen und Beziehungen: Struktur muss auch ohne CSS erkennbar sein. 1.4.3 Kontrast (Minimum): Text benötigt ein Kontrastverhältnis von mindestens 4,5:1. 1.4.4 Textgröße: Text muss bis 200 % vergrößerbar sein ohne Informationsverlust.
02
Bedienbar
2.1.1 Tastatur: Alle Funktionen müssen per Tastatur erreichbar sein. 2.4.3 Fokus-Reihenfolge: Tab-Reihenfolge muss sinnvoll sein. 2.4.7 Sichtbarer Fokus: Fokusierte Elemente müssen sichtbar hervorgehoben sein. 2.5.3 Beschriftung im Name: Sichtbare Labels müssen dem barrierefreien Namen entsprechen.
03
Verständlich
3.1.1 Sprache der Seite: Die Hauptsprache muss im HTML lang-Attribut angegeben sein. 3.2.1 Bei Fokus: Fokus darf keine unerwarteten Kontextänderungen auslösen. 3.3.1 Fehlermeldungen: Fehlermeldungen müssen das betroffene Feld benennen und beschreiben, wie der Fehler behoben werden kann.
04
Robust
4.1.1 Syntaxanalyse: HTML muss valide sein – keine doppelten IDs, korrekte Verschachtelung. 4.1.2 Name, Rolle, Wert: Alle UI-Komponenten müssen programmatisch bestimmbar sein. 4.1.3 Statusmeldungen: Statusmeldungen müssen per ARIA-Live auch ohne Fokusänderung ausgegeben werden.
05
Neu in WCAG 2.2
2.4.11 Fokus nicht verdeckt (Minimum): Fokusiertes Element darf nicht vollständig von anderen Elementen überlagert werden. 2.5.7 Ziehbewegungen: Drag-and-Drop muss auch mit einfachem Zeiger (Klick/Tap) bedienbar sein. 3.2.6 Konsistente Hilfe: Hilfe-Mechanismen müssen konsistent platziert sein.