Testowanie dostępności: color-contrast i focus

CSS kontroluje kontrast kolorów, widoczność wskaźnika fokusu, widoczność elementów (display:none usuwa element z drzewa dostępności) oraz kolejność odczytywania (wizualna zmiana kolejności przez flexbox order w porównaniu z kolejnością w DOM). Wybory dotyczące CSS bezpośrednio wpływają na to, czy osoby z niepełnosprawnościami mogą korzystać z interfejsu.

WCAG 2.1 AA wymaga współczynnika kontrastu 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (pogrubienie od 18 px lub zwykły tekst od 24 px). Poziom AAA wymaga odpowiednio 7:1 i 4.5:1. Współczynniki te porównują luminancję koloru tekstu na pierwszym planie z luminancją koloru tła.

Należy kliknąć dowolny element tekstowy w DevTools → panelu Styles. Próbnik koloru wyświetla plakietkę ze współczynnikiem kontrastu. Znacznik wyboru oznacza spełnienie wymagań, a X — ich niespełnienie. Selektor koloru pokazuje linie progów AA/AAA na gradiencie kolorów.

axe-core, Lighthouse i Pa11y automatycznie sprawdzają współczynniki kontrastu wszystkich elementów tekstowych. Należy uruchomić axe-core z @axe-core/react w środowisku programistycznym, aby otrzymywać ostrzeżenia o kontraście w czasie rzeczywistym w konsoli przeglądarki.

CSS outline: none lub outline: 0 na :focus usuwa domyślną obwódkę fokusu przeglądarki, przez co nawigacja klawiaturą staje się niewidoczna. Jest to poważne naruszenie zasad dostępności. Zamiast całkowicie usuwać wskaźniki fokusu, należy zastąpić je własnym, widocznym stylem fokusu.

:focus dotyczy wszystkich zdarzeń związanych z fokusem, w tym kliknięć myszą (co powoduje wyświetlenie widocznej obwódki po kliknięciu, czego projektanci nie lubią). :focus-visible działa tylko wtedy, gdy przeglądarka uzna, że używana jest nawigacja klawiaturą — dzięki temu użytkownicy klawiatury widzą obwódkę fokusu, ale nie pojawia się ona po kliknięciu myszą.

WCAG 2.2 wprowadza kryterium sukcesu 2.4.11 (wygląd fokusu, poziom AA): wskaźniki fokusu muszą mieć kontrast co najmniej 3:1 względem sąsiadujących kolorów i obejmować obwód komponentu. Własne style fokusu muszą spełniać te wymagania, a nie tylko istnieć.

Tryb wysokiego kontrastu systemu Windows zastępuje kolory CSS zdefiniowanymi przez użytkownika kolorami systemowymi. Należy użyć @media (forced-colors: active), aby dostarczyć alternatywne style działające w trybie wysokiego kontrastu. Testy należy przeprowadzać w Ustawieniach systemu Windows → Ułatwienia dostępu → Wysoki kontrast.

WCAG 1.4.1 zabrania używania koloru jako jedynego sposobu przekazywania informacji. Stan błędu oznaczony wyłącznie kolorem czerwonym nie spełnia tego kryterium. Należy łączyć kolor z ikonami, etykietami tekstowymi, wzorami lub podkreśleniami, aby informacja niezależna od koloru była zawsze dostępna.

WCAG 1.4.4 wymaga, aby rozmiar tekstu można było zwiększyć do 200% bez utraty treści. WCAG 1.4.12 wymaga, aby zmiany odstępów w tekście (zwiększonej wartości letter-spacing i line-height) nie powodowały uszkodzenia układu. Należy używać względnych jednostek (rem, em) dla typografii, aby spełnić oba wymagania.

Kompleksowe testowanie dostępności CSS obejmuje rozszerzenie przeglądarki axe DevTools do pracy programistycznej, Lighthouse CI do automatycznych kontroli w potoku, Pa11y do audytów stron z wiersza poleceń oraz ręczne testowanie nawigacji klawiaturą za pomocą Tab/Shift+Tab w celu sprawdzenia widoczności i kolejności wskaźników fokusu.

Dlaczego outline: none nie powinno nigdy być końcową regułą CSS dla stanu :focus elementu?

Testowanie dostępności CSS obejmuje współczynniki kontrastu kolorów (minimum 4.5:1 dla AA), widoczne wskaźniki fokusu zgodne z WCAG 2.2 z użyciem :focus-visible, unikanie koloru jako jedynego nośnika informacji, obsługę trybu forced-colors oraz względne jednostki typografii zapewniające zgodność ze zmianą rozmiaru. Narzędzia automatyczne w połączeniu z ręcznym testowaniem klawiaturą zapewniają kompleksowe pokrycie.