Jak sprawdzić, czy strona jest zgodna z WCAG 2.1 — test, który zrobisz sam w godzinę

Zgodność z WCAG 2.1 na poziomie AA sprawdza się w dwóch krokach: narzędzia automatyczne wyłapują problemy techniczne (kontrast, brak tekstów alternatywnych, pola bez etykiet), a test ręczny pokazuje to, czego żaden automat nie oceni, czyli czy da się przejść przez stronę klawiaturą i czytnikiem ekranu. Poniżej test, który zrobisz sam w około godzinę, z numerami kryteriów WCAG, żeby było wiadomo, co dokładnie sprawdzasz.

Krok 1: test automatyczny (10 minut)

• PageSpeed Insights / Lighthouse: kategoria „Ułatwienia dostępu” wskaże m.in. kontrast, teksty alternatywne i etykiety.
• WAVE (WebAIM): rozszerzenie przeglądarki, które zaznacza błędy bezpośrednio na stronie.
• axe DevTools: rozszerzenie do narzędzi deweloperskich, dobre do sprawdzania pojedynczych podstron i formularzy.
• [Darmowy audyt strony](/audyt-strony) łączy dostępność z szybkością, SEO i bezpieczeństwem w jednym raporcie.

Źródła: treść kryteriów sukcesu w specyfikacji WCAG 2.1 (W3C) oraz narzędzie WAVE od WebAIM.

Krok 2: tylko klawiatura (15 minut)

Odłóż mysz i przejdź najważniejszą ścieżkę na stronie (np. od strony głównej do wysłania formularza albo złożenia zamówienia), używając tylko Tab, Shift+Tab, Enter, spacji i strzałek.

• Czy do każdego linku, przycisku i pola da się dojść klawiszem Tab? (kryterium 2.1.1)
• Czy zawsze widać, który element jest aktywny, czyli obramowanie fokusu nie zostało ukryte? (2.4.7)
• Czy nigdzie nie utykasz, np. w oknie modalnym, z którego nie da się wyjść? (2.1.2)
• Czy kolejność przechodzenia jest logiczna, zgodna z tym, co widać? (2.4.3)
• Czy na początku strony jest link „przejdź do treści”, który omija menu? (2.4.1)

Krok 3: kontrast i kolor (10 minut)

• Zwykły tekst musi mieć kontrast co najmniej 4,5:1 z tłem, duży tekst 3:1 (1.4.3). Sprawdzisz to w kontrastomierzu WebAIM albo w narzędziach przeglądarki. Co liczy się jako duży tekst i jak dobrać kolory, opisuję w tekście o wymaganiach kontrastu WCAG.
• Ikony, obramowania pól i stany przycisków potrzebują kontrastu co najmniej 3:1 (1.4.11).
• Informacja nie może być przekazywana wyłącznie kolorem, np. błąd w formularzu zaznaczony tylko na czerwono (1.4.1).

Krok 4: powiększenie i wąski ekran (5 minut)

• Powiększ stronę do 200% (Ctrl i +). Tekst nie może się ucinać ani nakładać (1.4.4).
• Ustaw szerokość okna na około 320 px albo powiększ do 400%. Treść powinna się przełamać do jednej kolumny bez przewijania w poziomie (1.4.10).

Krok 5: czytnik ekranu (15 minut)

Włącz darmowy czytnik: NVDA na Windows, VoiceOver na Macu i iPhonie albo TalkBack na Androidzie. Spróbuj tej samej ścieżki co w kroku 2.

• Czy zdjęcia produktów mają sensowny tekst alternatywny, a nie nazwę pliku? (1.1.1)
• Czy czytnik odczytuje etykiety pól formularza i komunikaty błędów? (1.3.1, 3.3.1, 3.3.2)
• Czy przyciski mają zrozumiałe nazwy, np. „Dodaj do koszyka”, a nie „przycisk”? (4.1.2)
• Czy nagłówki tworzą logiczną strukturę, po której da się nawigować? (1.3.1, 2.4.6)
• Czy strona ma ustawiony język, tak żeby polski tekst nie był czytany angielską wymową? (3.1.1)

Co zrobić z wynikiem

Kogo dotyczy obowiązek dostępności i kto jest z niego zwolniony, opisałem w tekście Polski Akt o Dostępności. Jeśli wolisz oddać test i raport z listą poprawek komuś z zewnątrz, robię to w ramach audytu dostępności WCAG.

Najczęstsze pytania