Zastanawiasz się, jak sprawdzić stronę pod kątem WCAG bez płatnych narzędzi? Wystarczą przeglądarka, klawiatura i bezpłatny czytnik ekranu. Test automatyczny wskaże część błędów, ale to, czy stroną da się naprawdę posługiwać, sprawdzisz dopiero samodzielnie.
Ta instrukcja prowadzi przez 10 kroków – od wyboru próbki stron po zapisanie wyników w formie, którą zrozumie programista. Na końcu znajdziesz listę kontrolną do skopiowania.
Kroki 1–2: przygotowanie i test automatyczny
Krok 1. Wybierz próbkę stron i ścieżek
Nie musisz sprawdzać każdej podstrony. Błędy siedzą zwykle w szablonach, więc wybierz po jednej stronie każdego typu: główną, wpis, kategorię, produkt, kontakt, wyniki wyszukiwania. Dołóż strony z formularzami i multimediami.
Potem wypisz 2–3 kluczowe ścieżki, czyli zadania wykonywane od początku do końca, np. „znajdź produkt i złóż zamówienie” albo „wyślij zapytanie”. Każdą ścieżkę sprawdzasz w całości, łącznie z komunikatami i stroną potwierdzenia.
Krok 2. Zacznij od testu automatycznego
Automat szybko wychwyci powtarzalne braki: obrazy bez alt, pola bez etykiet, niski kontrast. Możesz skorzystać z bezpłatnego skanu wstępnego na stronie głównej albo z narzędzi wbudowanych w przeglądarkę. Wynik traktuj jako listę startową – jak go czytać, wyjaśnia artykuł test WCAG online.
Krok 3: klawiatura i widoczny fokus
Odłóż mysz i przejdź każdą ścieżkę samą klawiaturą. To najważniejszy test ręczny, bo z klawiatury lub urządzeń, które ją zastępują, korzystają m.in. osoby niewidome i osoby z niepełnosprawnością ruchową.
| Klawisz | Czego się spodziewać |
|---|---|
| Tab / Shift + Tab | przejście do następnego / poprzedniego linku, przycisku lub pola |
| Enter | otwarcie linku, naciśnięcie przycisku, wysłanie formularza |
| Spacja | naciśnięcie przycisku, zaznaczenie pola wyboru |
| Escape | zamknięcie okna dialogowego, rozwiniętego menu lub podpowiedzi |
| Strzałki | ruch wewnątrz komponentu: przyciski opcji, lista rozwijana, zakładki, suwak |
Sprawdź, czy:
- każdą funkcję da się uruchomić z klawiatury (2.1.1 Keyboard – obsługa klawiaturą);
- fokus jest zawsze widoczny (2.4.7 Focus Visible – widoczny fokus) i nie znika całkowicie pod przyklejonym nagłówkiem czy banerem cookies (2.4.11 Focus Not Obscured (Minimum) – niezasłonięty fokus);
- kolejność przechodzenia odpowiada układowi strony (2.4.3 Focus Order – kolejność fokusu);
- z każdego elementu da się wyjść, także z okna dialogowego i osadzonego odtwarzacza (2.1.2 No Keyboard Trap – brak pułapki klawiaturowej);
- po zamknięciu okna dialogowego fokus wraca do przycisku, który je otworzył.
Kroki 4–5: powiększenie, kontrast i kolor
Krok 4. Powiększenie 200% i 400%
Powiększ stronę do 200% (Ctrl i +, na Macu Cmd i +). Tekst ma pozostać czytelny, a treść i funkcje dostępne – bez ucinania, nachodzenia elementów i znikających przycisków (1.4.4 Resize Text – zmiana rozmiaru tekstu).
Następnie ustaw okno na szerokość 1280 pikseli i powiększ do 400%. Odpowiada to szerokości 320 pikseli CSS, przy której treść powinna ułożyć się w jednej kolumnie, bez przewijania w poziomie (1.4.10 Reflow – dopasowanie do szerokości ekranu). Wyjątkiem są treści wymagające układu dwuwymiarowego, np. mapy czy duże tabele.
Krok 5. Kontrast i kolor jako jedyny nośnik informacji
Zwykły tekst potrzebuje kontrastu co najmniej 4,5:1, a duży (od ok. 24 px albo ok. 18,66 px pogrubiony) – 3:1 (1.4.3 Contrast (Minimum) – kontrast minimalny). Obramowania pól, ikony i wskaźnik fokusu wymagają 3:1 (1.4.11 Non-text Contrast – kontrast elementów nietekstowych). Kontrast zmierzysz próbnikiem koloru w narzędziach deweloperskich przeglądarki – sprawdź też stany po najechaniu i z fokusem.
Potem włącz w systemie filtr skali szarości. Jeśli jakaś informacja znika – link w tekście wyróżniony tylko kolorem, błędne pole oznaczone samą czerwoną ramką, wykres z legendą opartą na barwach – to problem z 1.4.1 Use of Color – użycie koloru. Progi i typowe pułapki opisujemy w artykule o kontraście kolorów WCAG.
Kroki 6–7: obrazy, multimedia i formularze
Krok 6. Obrazy i multimedia
Obejrzyj teksty alternatywne, np. przez „Zbadaj element”. Obraz informacyjny ma alt przekazujący tę samą informację, obraz w linku lub przycisku – opis funkcji, a dekoracyjny – pusty alt (1.1.1 Non-text Content – treść nietekstowa). Więcej przykładów znajdziesz w artykule o tekście alternatywnym.
<a href="/koszyk"><img src="koszyk.svg" alt="Koszyk"></a>
<img src="ornament.svg" alt="">Filmy z dźwiękiem potrzebują napisów, zsynchronizowanych z obrazem i obejmujących ważne dźwięki (1.2.2 Captions (Prerecorded) – napisy do nagrań). Karuzelę lub wideo w tle, które startują same i trwają dłużej niż 5 sekund, musi dać się wstrzymać, zatrzymać lub ukryć (2.2.2 Pause, Stop, Hide – pauza, zatrzymanie, ukrycie).
Krok 7. Formularze
Wypełnij każdy formularz z próbki, a potem wyślij go pusty i z błędnymi danymi. Sprawdź, czy:
- każde pole ma widoczną etykietę powiązaną z polem – placeholder jej nie zastępuje (3.3.2 Labels or Instructions – etykiety lub instrukcje);
- instrukcje, np. format daty czy wymagania hasła, są podane przed polem, a nie dopiero po błędzie;
- błąd jest opisany tekstem przy polu, nie tylko kolorem (3.3.1 Error Identification – identyfikacja błędów), a wpisane dane nie znikają.
<label for="telefon">Telefon (wymagane)</label>
<input id="telefon" type="tel" autocomplete="tel"
aria-invalid="true" aria-describedby="telefon-blad">
<p id="telefon-blad">Wpisz 9-cyfrowy numer telefonu.</p>Kroki 8–9: struktura strony i czytnik ekranu
Krok 8. Nagłówki, landmarki, tytuł strony i język
Nagłówki przejrzysz w drzewie dostępności w narzędziach deweloperskich albo na liście elementów w czytniku ekranu. Powinny tworzyć logiczny spis treści: zwykle jeden H1 opisujący stronę, pod nim H2 i H3, których poziom wynika ze struktury, a nie z wyglądu (1.3.1 Info and Relationships – informacje i relacje). Sprawdź też:
- landmarki, czyli punkty orientacyjne: nagłówek strony, nawigację, treść główną i stopkę;
- unikalny, opisowy tytuł w karcie przeglądarki (2.4.2 Page Titled – tytuł strony);
- język dokumentu w atrybucie
lang(3.1.1 Language of Page – język strony).
<html lang="pl">
<head><title>Kontakt – Pracownia Przykład</title></head>
<body>
<header>…</header>
<nav aria-label="Menu główne">…</nav>
<main><h1>Kontakt</h1> …</main>
<footer>…</footer>
</body>Krok 9. Szybki test z czytnikiem ekranu
Nie musisz znać wszystkich skrótów. Na początek wystarczą podstawy:
| Czytnik | System | Włączenie | Poruszanie się |
|---|---|---|---|
| NVDA | Windows (bezpłatny) | Ctrl + Alt + N; wyłączenie: Insert + Q | H – następny nagłówek, D – punkt orientacyjny, K – link, F – pole formularza, Insert + F7 – lista elementów |
| VoiceOver | macOS | Cmd + F5 | Control + Option + strzałka w prawo – następny element, Control + Option + U – rotor |
| VoiceOver | iOS, iPadOS | Ustawienia → Dostępność → VoiceOver | przesunięcie palcem w prawo lub w lewo, dwukrotne stuknięcie aktywuje |
| TalkBack | Android | Ustawienia → Ułatwienia dostępu → TalkBack (nazwy zależą od producenta) | przesunięcie palcem w prawo lub w lewo, dwukrotne stuknięcie aktywuje |
Posłuchaj, czy przyciski i linki mają zrozumiałe nazwy („Dodaj do koszyka”, a nie „przycisk”), pola odczytują etykiety, a dekoracje są pomijane. Sprawdź też, czy komunikaty, np. „Dodano do koszyka”, zostają odczytane, choć fokus się nie przesuwa (4.1.3 Status Messages – komunikaty o stanie). To szybka kontrola, a nie ocena doświadczenia osób, które używają czytnika na co dzień.
Krok 10: zapisz wyniki tak, żeby dało się je naprawić
Notatka „formularz nie działa” nikomu nie pomoże. Opisz każdy problem tak, żeby programista mógł go odtworzyć bez dopytywania:
| Pole | Przykład |
|---|---|
| Adres i element | /kontakt, pole „Telefon” |
| Kroki | wyślij formularz z pustym polem „Telefon” |
| Wynik i oczekiwanie | pole dostaje tylko czerwoną ramkę; powinien pojawić się tekst błędu powiązany z polem |
| Kryterium | 3.3.1 Error Identification, 1.4.1 Use of Color |
| Środowisko | Windows, Firefox, NVDA |
| Priorytet | wysoki – główna ścieżka kontaktu |
Dołącz zrzut ekranu lub krótkie nagranie. Zapisuj też, co działa – przy ponownej kontroli nie zaczniesz od zera. Jeśli potrzebujesz szerszej oceny niż samodzielny przegląd, porównaj możliwości w poradniku sprawdzenie dostępności strony.
Lista kontrolna: jak sprawdzić stronę pod kątem WCAG
- Próbka obejmuje każdy typ szablonu i 2–3 kluczowe ścieżki.
- Wyniki testu automatycznego są przejrzane i zapisane.
- Każdą funkcję obsłużysz klawiaturą, bez pułapek.
- Fokus jest widoczny, nie ginie pod przyklejonymi elementami i ma logiczną kolejność.
- Przy 200% tekst jest czytelny, a przy 400% (okno 1280 px) treść mieści się w jednej kolumnie.
- Tekst ma kontrast co najmniej 4,5:1 (duży 3:1), elementy interfejsu 3:1.
- Informacja nie jest przekazywana wyłącznie kolorem.
- Obrazy mają trafny alt, a dekoracje – pusty.
- Filmy mają napisy, a ruchome treści da się zatrzymać.
- Pola mają etykiety, a błędy są opisane tekstem.
- Nagłówki, landmarki, tytuł strony i atrybut lang są poprawne.
- Czytnik ekranu odczytuje nazwy przycisków, linków i pól oraz komunikaty.
- Każdy problem ma adres, kroki, kryterium i priorytet.
Najczęstsze pytania
Ile czasu zajmuje ręczne sprawdzenie strony?
Zależy od liczby szablonów i ścieżek. Małą stronę firmową z kilkoma typami podstron zwykle da się przejrzeć w kilka godzin, a sklep z rozbudowanym procesem zamówienia wymaga więcej czasu. Kolejne kontrole idą szybciej dzięki notatkom z pierwszej.
Czy muszę znać HTML, żeby przeprowadzić taki test?
Do większości kroków nie. Klawiatura, powiększenie, kontrast, formularze i czytnik ekranu nie wymagają programowania, a podstawy HTML przydadzą się przy nagłówkach, atrybucie lang, tekstach alternatywnych i opisywaniu problemów dla programisty.
W jakiej przeglądarce testować z czytnikiem ekranu?
Najlepiej w typowych zestawach: NVDA z Chrome lub Firefoksem w Windows, VoiceOver z Safari w macOS i iOS oraz TalkBack z Chrome w Androidzie. Ta sama strona może działać różnie w różnych połączeniach, dlatego zapisuj, jakiego zestawu użyto.
Czy samodzielne sprawdzenie wystarczy, żeby uznać stronę za zgodną z WCAG?
Nie. Ta instrukcja obejmuje najważniejsze obszary, ale nie wszystkie kryteria WCAG 2.2 na poziomie AA. Systematyczną ocenę wszystkich kryteriów w wybranym zakresie daje audyt ekspercki, najlepiej uzupełniony testami z użytkownikami.