scanning-accessibility

Skill do automatycznego audytu dostępności aplikacji webowych zgodnie ze standardami WCAG 2.1/2.2. Łączy skanowanie za pomocą axe-core, Pa11y i Lighthouse z ręczną walidacją nawigacji klawiaturą, kompatybilności czytników ekranu i kontrastu kolorów. Pozwala zdefiniować poziom zgodności (A, AA lub AAA) i skanować poszczególne strony oraz komponenty interaktywne. Idealny do audytów zgodności, testowania dostępności formularzy, modali i stanów błędów.

1. Zainstaluj wymagane biblioteki testowania dostępności: axe-core, @axe-core/playwright, Pa11y lub Lighthouse CI, a także narzędzie automatyzacji przeglądarki (Playwright lub Puppeteer). Upewnij się, że Twoja aplikacja jest uruchomiona i dostępna pod testowym adresem URL.

2. Skonfiguruj skaner dostępności, wybierając docelowy poziom zgodności WCAG (A, AA lub AAA — AA jest standardem). Ustaw reguły axe-core na WCAG 2.1 AA lub 2.2 AA i włącz reguły dla atrybutów ARIA, kontrastu kolorów, etykiet formularzy i struktury nagłówków. Zdefiniuj strony i komponenty do skanowania: stronę główną, formularze, modale i nawigację.

3. Uruchom automatyczne skanowanie dostępności na każdej stronie, używając @axe-core/playwright po załadowaniu strony. Wykonaj walidację na poziomie HTML za pomocą Pa11y i uruchom audyt dostępności Lighthouse, aby uzyskać wynik i szczegółowe ustalenia.

4. Skanuj każdy główny stan interaktywny: otwarty modal, rozwinięta lista rozwijana, stan błędu i inne dynamiczne zmiany interfejsu.

5. Waliduj nawigację klawiaturą, testując przechodzenie między elementami za pomocą klawisza Tab, kolejność tabulacji i dostęp do wszystkich funkcji bez myszy. Sprawdź kompatybilność czytników ekranu, weryfikując prawidłowe etykiety, role ARIA i komunikaty o zmianach stanu.

6. Przejrzyj wyniki skanowania, zidentyfikuj błędy krytyczne i ostrzeżenia, a następnie skoryguj problemy z dostępnością w kodzie aplikacji.