Barrierefreiheit testen: color-contrast und focus

CSS steuert den Farbkontrast, die Sichtbarkeit von Fokusindikatoren, die Sichtbarkeit von Elementen (display:none entfernt ein Element aus dem Accessibility-Tree) und die Lesereihenfolge (visuelle Neuordnung durch flexbox order im Gegensatz zur DOM-Reihenfolge). CSS-Entscheidungen wirken sich direkt darauf aus, ob Menschen mit Behinderungen die Benutzeroberfläche nutzen können.

WCAG 2.1 AA erfordert ein Kontrastverhältnis von 4.5:1 für normalen Text und 3:1 für großen Text (18px+ fett oder 24px+ normal). AAA erfordert entsprechend 7:1 und 4.5:1. Diese Verhältnisse vergleichen die Leuchtdichte der Textfarbe im Vordergrund mit der Leuchtdichte der Hintergrundfarbe.

Klicken Sie in DevTools im Styles-Panel auf ein beliebiges Textelement. Das Farbfeld zeigt eine Kennzeichnung mit dem Kontrastverhältnis. Ein Häkchen zeigt an, dass der Wert die Anforderungen erfüllt; ein X weist auf einen Fehler hin. Der Farbwähler zeigt die Schwellenlinien für AA und AAA im Farbverlauf.

axe-core, Lighthouse und Pa11y prüfen die Kontrastverhältnisse automatisch für alle Textelemente. Führen Sie axe-core mit @axe-core/react während der Entwicklung aus, um im Browser-Konsolenfenster in Echtzeit Kontrastwarnungen zu erhalten.

CSS mit outline: none oder outline: 0 für :focus entfernt den standardmäßigen Fokusring des Browsers und macht die Tastaturnavigation unsichtbar. Das ist ein schwerwiegender Verstoß gegen die Barrierefreiheit. Ersetzen Sie dies durch einen eigenen, sichtbaren Fokusstil, anstatt Fokusindikatoren vollständig zu entfernen.

:focus gilt für alle Fokusereignisse, einschließlich Mausklicks. Dadurch wird beim Klicken ein sichtbarer Fokusring angezeigt, was Designer häufig nicht wünschen. :focus-visible gilt nur, wenn der Browser feststellt, dass die Tastaturnavigation verwendet wird. So erhalten Tastaturbenutzer einen Fokusring, ohne dass er bei Mausklicks angezeigt wird.

WCAG 2.2 führt das Erfolgskriterium 2.4.11 (Focus Appearance AA) ein: Fokusindikatoren müssen einen Kontrast von mindestens 3:1 zu angrenzenden Farben aufweisen und den Umfang der Komponente umschließen. Eigene Fokusstile müssen diese Anforderungen erfüllen und dürfen nicht nur vorhanden sein.

Der Windows-Modus für hohen Kontrast überschreibt CSS-Farben mit benutzerdefinierten Systemfarben. Verwenden Sie @media (forced-colors: active), um alternative Stile bereitzustellen, die im Modus für hohen Kontrast funktionieren. Testen Sie dies unter Windows über Einstellungen → Barrierefreiheit → Hoher Kontrast.

WCAG 1.4.1 verbietet die Verwendung von Farbe als einzigem Mittel zur Vermittlung von Informationen. Ein Fehlerzustand, der nur rot eingefärbt wird, erfüllt dieses Kriterium nicht. Kombinieren Sie Farbe mit Symbolen, Textbeschriftungen, Mustern oder Unterstreichungen, damit immer auch eine nicht farbgebundene Information vorhanden ist.

WCAG 1.4.4 verlangt, dass Text ohne Inhaltsverlust auf 200 % vergrößert werden kann. WCAG 1.4.12 verlangt, dass Änderungen an den Textabständen (erhöhtes letter-spacing und line-height) das Layout nicht beeinträchtigen. Verwenden Sie für die Typografie relative Einheiten (rem, em), um beide Anforderungen zu unterstützen.

Umfassende CSS-Tests zur Barrierefreiheit umfassen die axe-DevTools-Browsererweiterung für die Entwicklung, Lighthouse CI für automatisierte Prüfungen in der Pipeline, Pa11y für Seitenprüfungen über die Befehlszeile sowie manuelle Tests der Tastaturnavigation mit Tab/Shift+Tab, um die Sichtbarkeit und Reihenfolge von Fokusindikatoren zu überprüfen.

Warum darf outline: none niemals der endgültige CSS-Stil für den :focus-Zustand eines Elements sein?

CSS-Tests zur Barrierefreiheit umfassen Kontrastverhältnisse (mindestens 4.5:1 für AA), sichtbare und WCAG-2.2-konforme Fokusindikatoren mit :focus-visible, die Vermeidung von Farbe als alleiniger Informationsquelle, die Unterstützung des Modus für erzwungene Farben sowie relative Typografieeinheiten zur Einhaltung der Anforderungen an die Textvergrößerung. Automatisierte Tools und manuelle Tastaturtests gewährleisten eine umfassende Abdeckung.