Jak sprawdzić czy Twoja strona jest dostępna - praktyczny poradnik

Piszę ten tekst po tym, jak sam przeszedłem audyt dostępności na stronie dede.agency. Spodziewałem się kilku drobnych poprawek. Znalazłem 12 problemów z kontrastem, brakujące alt texty i formularz, który na czytnikach ekranowych był niewidoczny.

A byłem przekonany, że strona jest OK.

Nie musisz znać specyfikacji WCAG na pamięć, żeby sprawdzić swoją stronę. Wystarczy 10 minut i kilka prostych testów. Pokażę Ci, jak to zrobić krok po kroku.

Test 1: Klawiatura (2 minuty)

Odłóż myszkę. Otwórz swoją stronę i poruszaj się po niej wyłącznie klawiaturą.

• Tab - przejście do następnego elementu (link, przycisk, pole formularza)
• Shift+Tab - cofnięcie do poprzedniego
• Enter - kliknięcie
• Escape - zamknięcie okien, popupów

Na co zwracać uwagę:

Czy widzisz, gdzie jesteś? Aktywny element powinien mieć widoczną ramkę (focus). Jeśli wciskasz Tab i nie wiesz, co jest zaznaczone - to błąd. Użytkownik, który nie ma myszki, jest zagubiony.

Czy da się dotrzeć wszędzie? Menu, linki, przyciski, formularze - wszystko musi być osiągalne Tabem. Jeśli jakiś element jest klikalny myszką, ale Tab go pomija - problem.

Czy nie utknąłeś? Jeśli Tab prowadzi do elementu, z którego nie da się wyjść (modal bez zamknięcia, carousel bez wyjścia) - to pułapka fokusu. Jeden z poważniejszych błędów WCAG.

Test 2: Kontrast (2 minuty)

Otwórz WebAIM Contrast Checker. Sprawdź kolor tekstu na tle strony.

Wymagania WCAG AA:

• Normalny tekst (do 18px): kontrast minimum 4.5:1
• Duży tekst (od 18px bold lub 24px): minimum 3:1

Najczęstsze problemy? Jasnoszary tekst na białym tle. Biały tekst na jasnym zdjęciu. Placeholder w formularzu, który wygląda jak dekoracja, a powinien być czytelny.

Jeśli chcesz sprawdzić całą stronę naraz - użyj rozszerzenia WAVE do Chrome/Firefox. Pokaże Ci wszystkie elementy z niskim kontrastem, brakujące alt texty i błędy struktury na jednej stronie.

Test 3: Powiększenie tekstu (1 minuta)

Ctrl+Plus (Cmd+Plus na Macu) - powiększ stronę do 200%.

Czy tekst jest czytelny? Czy elementy się nie nakładają? Czy menu nadal działa? Czy da się przewijać?

Tyle. Jeśli cokolwiek się rozjeżdża przy 200%, to poważny problem. Osoby słabowidzące regularnie używają powiększenia i Twoja strona musi to wytrzymać.

Test 4: Obrazki (2 minuty)

Kliknij prawym przyciskiem na obrazek → "Zbadaj element". Poszukaj atrybutu alt="".

• Jeśli alt jest pusty (alt="") - screen reader pominie obrazek. OK tylko dla dekoracji (ikony, tła)
• Jeśli alt jest opisowy (alt="Zespół dede przy pracy w biurze") - dobrze
• Jeśli alt brakuje w ogóle - screen reader przeczyta nazwę pliku. Wyobraź sobie: "IMG_20240315_142358.jpg"

Zdjęcia produktów, zespołu, infografiki - te muszą mieć sensowny alt. "Zdjęcie" albo "obrazek" nie jest sensownym altem.

Test 5: Formularze (2 minuty)

Otwórz formularz kontaktowy na swojej stronie. Kliknij w etykietę "Imię" (tekst obok pola). Czy kursor przeskoczył do pola?

Jeśli tak - etykieta jest poprawnie powiązana z polem (<label for="...">). Jeśli nie - screen reader nie wie, do czego służy to pole. Użytkownik z czytnikiem ekranowym słyszy "pole tekstowe" bez kontekstu.

Sprawdź też:

• Czy pola mają widoczne etykiety (nie tylko placeholder, który znika po kliknięciu)?
• Czy komunikaty błędów mówią CO jest źle? ("Wpisz poprawny adres email" vs "Błąd")
• Czy obowiązkowe pola są oznaczone? (Nie kolorem - bo tego nie każdy widzi)

Narzędzia automatyczne

Ręczne testy dają dużo, ale nie pokryją wszystkiego. Darmowe narzędzia, które warto uruchomić:

Lighthouse - wbudowany w Chrome. F12 → zakładka Lighthouse → zaznacz Accessibility → Analyze. Dostajesz wynik 0-100 z listą problemów.

WAVE - rozszerzenie do przeglądarki. Wizualnie oznacza błędy na stronie - widzisz dokładnie gdzie jest problem.

axe DevTools - rozszerzenie do Chrome. Bardziej szczegółowe niż Lighthouse, z wyjaśnieniami jak naprawić każdy błąd.

Ale uwaga: narzędzia automatyczne wykryją ok. 30-40% problemów z dostępnością. Resztę da się sprawdzić tylko ręcznie - nawigacja klawiaturą, czytnik ekranowy, logika interfejsu. Dlatego ręczne testy opisane wyżej są tak ważne.

Screen reader - bonus dla odważnych

Jeśli masz 5 minut i chcesz zobaczyć swoją stronę tak, jak widzi ją osoba niewidoma:

• Mac: VoiceOver jest wbudowany. Cmd+F5, żeby włączyć. Cmd+F5 ponownie, żeby wyłączyć
• Windows: NVDA - darmowy, do pobrania tutaj
• iPhone: Ustawienia → Dostępność → VoiceOver

Włącz i spróbuj nawigować po swojej stronie. To doświadczenie zmienia perspektywę. Nagle rozumiesz, dlaczego alt text "zdjęcie" jest bezużyteczny i dlaczego kolejność elementów ma znaczenie.

Co dalej

Masz listę problemów? Dobrze. W następnym wpisie opiszę najczęstsze błędy dostępności, ile kosztuje ich naprawienie i co się dzieje, gdy je zignorujesz.

Na dede.agency zrobiliśmy te testy i wdrożyliśmy poprawki - od kontrastu, przez focus-visible, po widget dostępności z 4 trybami. Jeśli planujesz stronę lub przebudowę istniejącej - WCAG warto uwzględnić od startu, nie doklejać na koniec.