Jak samodzielnie sprawdzić dostępność strony: 7 kroków ze zrzutami ekranu

Stan na 11.10.2026. Zrzuty ekranu zrobiliśmy na naszej stronie w przeglądarce Chrome, a kontrast sprawdziliśmy w bezpłatnym narzędziu WebAIM Contrast Checker. Wymagania podajemy według WCAG 2.2, aktualnej wersji wytycznych W3C, na poziomie AA.

Dostępna strona to taka, z której skorzysta też osoba niewidoma z czytnikiem ekranu, osoba, która nie może używać myszy, i ktoś, kto musi powiększyć tekst. Większości barier nie widać, kiedy przeglądasz stronę jak zwykle. Widać je, gdy na chwilę zmienisz sposób korzystania z niej. Kroki poniżej zrób na stronie głównej, na stronie z ofertą i na stronie z formularzem kontaktowym albo koszykiem.

Krok 1. Odłóż mysz i naciśnij Tab

Otwórz stronę, kliknij w pasek adresu, a potem naciśnij Tab. Każde kolejne naciśnięcie przenosi tak zwany fokus na następny link, przycisk albo pole. Shift + Tab cofa o jeden element.

Pierwszy Tab na dobrze zrobionej stronie pokazuje link „Przejdź do treści”. Pozwala on pominąć menu, które powtarza się na każdej podstronie. WCAG wymaga takiego mechanizmu (kryterium 2.4.1, poziom A).

Otwórz w pełnym rozmiarze

Jeśli po naciśnięciu Tab nic nie widać, to nie znaczy, że link nie istnieje. Ale skoro nie widzisz, gdzie jesteś, przejdź do kroku 2.

Krok 2. Sprawdź, czy widać, gdzie jesteś

Naciskaj Tab dalej. Przy każdym elemencie powinna być wyraźna ramka, podkreślenie albo zmiana koloru. To widoczny fokus, wymagany przez kryterium 2.4.7 (AA).

Otwórz w pełnym rozmiarze

Zwróć uwagę na trzy rzeczy:

• Fokus nie znika. Jeśli w którymś miejscu ramka przepada i nie wiesz, gdzie jesteś, to błąd.
• Kolejność ma sens. Fokus powinien iść jak tekst: od góry do dołu, od lewej do prawej, bez skakania po stronie.
• Fokusu nic nie zasłania. Przyklejony nagłówek, baner cookie albo czat nie może całkowicie przykryć elementu z fokusem. To nowe kryterium 2.4.11 w WCAG 2.2.

Krok 3. Otwórz menu i formularz bez myszy

Wszystko, co da się zrobić myszą, powinno dać się zrobić klawiaturą (kryterium 2.1.1, poziom A). Sprawdź najważniejsze elementy:

• menu rozwijane: Enter lub spacja otwiera, Escape zamyka;
• przyciski i linki: Enter działa tak samo jak kliknięcie;
• listy wyboru, kalendarze, suwaki: strzałki zmieniają wartość;
• okna i pop-upy: da się je zamknąć klawiszem Escape albo przyciskiem dostępnym z klawiatury.

Otwórz w pełnym rozmiarze

Jeśli przy którymś elemencie utkniesz i Tab nie wyprowadza dalej, to tak zwana pułapka klawiaturowa. To jeden z poważniejszych błędów: osoba bez myszy nie może wtedy dokończyć zakupu ani wysłać formularza.

Krok 4. Powiększ stronę do 200%

Naciśnij Ctrl i + (na Macu Cmd i +), aż przeglądarka pokaże 200%. WCAG wymaga, żeby po takim powiększeniu nie ginęła treść ani funkcje (kryterium 1.4.4, AA).

Otwórz w pełnym rozmiarze

Sprawdź:

• czy tekst się zawija, zamiast uciekać za prawą krawędź;
• czy nie trzeba przewijać strony w bok, żeby przeczytać zdanie;
• czy menu nadal da się otworzyć;
• czy przyciski i pola formularza nie nachodzą na siebie.

Dla dokładniejszego testu powiększ do 400%. Kryterium 1.4.10 wymaga, żeby treść dała się czytać bez przewijania w dwóch kierunkach przy szerokości 320 pikseli CSS. Na zwykłym monitorze to mniej więcej takie powiększenie.

Krok 5. Sprawdź etykiety pól formularza

Przejdź klawiaturą do formularza kontaktowego, zapisu albo zamówienia. Każde pole powinno mieć widoczną etykietę nad polem lub obok niego, na przykład „Imię”, „E-mail”, „Wiadomość” (kryterium 3.3.2, A).

Otwórz w pełnym rozmiarze

Uważaj na pola, w których jedyną podpowiedzią jest szary tekst w środku pola. Znika on po rozpoczęciu pisania, a czytnik ekranu nie zawsze go odczyta. Szybki test: kliknij w nazwę pola. Jeśli kursor przeskakuje do pola, etykieta jest z nim połączona.

Krok 6. Zmierz kontrast tekstu

Tekst musi być czytelny na tle. WCAG podaje progi:

Co	Minimalny kontrast (AA)
zwykły tekst	4,5:1
duży tekst (od 18 pkt albo od 14 pkt pogrubiony)	3:1
obramowania pól, ikony, stany przycisków	3:1

Kolory odczytasz pipetą w narzędziach dla programistów przeglądarki (klawisz F12) albo z księgi znaku firmy. Potem wpisz je w WebAIM Contrast Checker. To bezpłatne narzędzie, nie wymaga rejestracji. W polu Foreground wpisz kolor tekstu, w polu Background kolor tła.

Otwórz w pełnym rozmiarze

Na zrzucie powyżej są kolory tekstu i tła z naszej strony: 16,77:1, z zapasem. Dla porównania jasnoszary tekst #9A9A9A na białym tle:

Otwórz w pełnym rozmiarze

Wynik 2,81:1 nie spełnia żadnego progu, nawet dla dużego tekstu. Taki odcień często pojawia się w drobnym druku, podpisach pod zdjęciami i podpowiedziach w polach formularza. Sprawdź też tekst na zdjęciach i kolorowych przyciskach.

Krok 7. Sprawdź opisy obrazków

Każdy obrazek, który niesie informację, potrzebuje tekstu alternatywnego. Czytnik ekranu odczyta go zamiast obrazka (kryterium 1.1.1, A). Obrazki czysto dekoracyjne powinny mieć pusty opis, żeby czytnik je pomijał.

Jak to sprawdzić bez specjalnych narzędzi:

1. Kliknij prawym przyciskiem na obrazek i wybierz „Zbadaj”.
2. W podświetlonym kodzie znajdź atrybut alt=”…”.
3. Oceń treść: czy opis mówi to, co pokazuje obrazek, w kontekście strony?

Dobre i złe przykłady:

• „Zdjęcie” albo „IMG_2041.jpg” — źle, nic nie mówi.
• „Logo” przy logo, które prowadzi do strony głównej — lepiej: „Nazwa firmy — strona główna”.
• „Pokój dwuosobowy z balkonem i widokiem na morze” w galerii pensjonatu — dobrze.
• Brak atrybutu alt w ogóle — błąd. Czytnik może wtedy przeczytać nazwę pliku.

Przy wielu obrazkach pomoże bezpłatne narzędzie WAVE (wave.webaim.org), które oznacza obrazki bez opisu. Narzędzie nie oceni jednak, czy opis ma sens. To trzeba zrobić samemu.

Przy okazji sprawdź nazwy linków i przycisków. Osoby z czytnikiem ekranu często przeglądają same linki, bez otaczającego tekstu. Pięć linków „Czytaj więcej” albo „Kliknij tutaj” niewiele im powie. WCAG wymaga, żeby cel linku wynikał z jego treści albo z kontekstu (kryterium 2.4.4, A). Lepiej napisać „Cennik stron internetowych” niż „Sprawdź”. Przyciski z samą ikoną, na przykład lupą albo koszykiem, też potrzebują nazwy, którą czytnik odczyta.

Co dalej z wynikami

Zapisz wyniki w prostej tabeli: strona, krok, co nie działa, zrzut ekranu. Na przykład tak:

Strona	Krok	Co nie działa	Jak bardzo przeszkadza
Koszyk	2. Fokus	na przycisku „Zapłać” nie widać ramki	blokuje zakup bez myszy
Kontakt	5. Etykiety	pole telefonu ma tylko szary tekst w środku	utrudnia wysłanie formularza
Strona główna	6. Kontrast	szary podpis pod zdjęciem ma 2,8:1	utrudnia czytanie

Kolumna „Jak bardzo przeszkadza” ułatwia ustalenie kolejności poprawek. Najpierw popraw to, co blokuje zakup, rezerwację albo kontakt: pułapki klawiaturowe, pola bez etykiet, niewidoczny fokus w formularzu.

Ten test nie obejmuje wszystkiego. Pomija na przykład pracę z czytnikiem ekranu, napisy w filmach, komunikaty błędów i limity czasu. Jeśli chcesz pójść krok dalej, włącz wbudowany czytnik ekranu (na Macu VoiceOver: Cmd + F5) albo bezpłatny NVDA w systemie Windows i spróbuj wysłać formularz.

Kiedy powtarzać test

Dostępność psuje się zwykle przy zmianach, nie sama z siebie. Powtórz kroki po:

• zmianie motywu, kolorów albo czcionek;
• dodaniu czatu, banera cookie lub okienka z promocją;
• nowym formularzu, kalendarzu rezerwacji albo module płatności;
• przebudowie menu.

Jeśli na stronie nic się nie zmienia, wystarczy przegląd raz na kilka miesięcy.

Jeśli prowadzisz sklep internetowy albo przyjmujesz rezerwacje z płatnością, sprawdź też, czy obejmuje Cię ustawa wdrażająca Europejski Akt o Dostępności. Piszemy o tym w poradniku o Europejskim Akcie o Dostępności dla sklepów internetowych. To nie jest porada prawna.

Jak możemy pomóc

W ramach audytu dostępności WCAG przechodzimy całą ścieżkę klienta: klawiaturą, z czytnikiem ekranu, przy powiększeniu i w trybie wysokiego kontrastu. Potem poprawiamy to, co blokuje, i testujemy jeszcze raz. Dla sklepów mamy osobne rozwiązanie: audyt dostępności sklepu internetowego z tekstem informacji o dostępności do regulaminu.

Bezpłatną wycenę ze stałą ceną dostaniesz w ciągu 24 godzin, także w weekendy i święta.