Jak przetestować dostępność strony internetowej: narzędziami i ręcznie, krok po kroku

Jeśli chcesz się przekonać, czy Twoja strona jest naprawdę dostępna, jedno narzędzie nie wystarczy. Automatyczne skanery wykrywają – w zależności od źródła – tylko część rzeczywistych problemów, a resztę odkryjesz wyłącznie dzięki ręcznej weryfikacji. Ten przewodnik pokazuje obie drogi: najpierw szybkie testy narzędziami, a następnie ręczną kontrolę, która robi różnicę. Dostępność testujemy nie tylko w projektach klientów – prowadzimy też siedem własnych marek na produkcji, w tym skaner dostępności. Poniższe kroki to więc praktyka, a nie teoria z podręcznika.

Dlaczego automatyczne narzędzia to tylko połowa prawdy

Automatyczne narzędzia kontrolne są przydatne, bo w kilka sekund znajdują błędy techniczne: brakujące teksty alternatywne, zbyt słaby kontrast kolorów, brakujące etykiety formularzy, uszkodzoną strukturę HTML. Czego nie potrafią, to ocenić znaczenia. Narzędzie widzi, że obrazek ma tekst alternatywny – ale czy ten tekst sensownie opisuje obrazek, tego już nie wie. Tak samo nie rozpozna, czy kolejność tabulacji jest logiczna ani czy film wymaga napisów. Zasada praktyczna: czysty raport z narzędzia nie oznacza dostępności, a jedynie brak oczywistych błędów technicznych.

Krok 1: Szybki test narzędziami

Zacznij od darmowych, sprawdzonych narzędzi. Te trzy pokrywają znaczną część punktów możliwych do skontrolowania automatycznie:

• WAVE (wave.webaim.org) – oznacza błędy bezpośrednio i wizualnie na stronie, idealne na pierwszy przegląd.
• axe DevTools – rozszerzenie przeglądarki dla Chrome i Firefoksa, bardzo precyzyjne, z niewielką liczbą fałszywych alarmów.
• Lighthouse – wbudowane już w Chrome (DevTools → zakładka Lighthouse), dostarcza ocenę dostępności wraz z konkretnymi wskazówkami.

Nie sprawdzaj tylko strony głównej. Przetestuj co najmniej po jednej stronie dla każdego typu szablonu: stronę główną, podstronę, formularz (kontaktowy lub zamówienia) oraz – jeśli istnieje – wpis blogowy. Zapisuj powtarzające się błędy – często przyczyna tkwi w szablonie i dotyczy jednocześnie setek stron.

Krok 2: Nawigacja klawiaturą

To najważniejszy test ręczny – i nic nie kosztuje. Kliknij raz w pasek adresu, a następnie obsłuż całą stronę wyłącznie za pomocą klawiatury:

• Tab przeskakuje do przodu, Shift+Tab wstecz – przez wszystkie linki, przyciski i pola formularzy.
• Enter i spacja wyzwalają akcje, a strzałkami obsługujesz listy wyboru i suwaki.

Zwróć przy tym uwagę na trzy rzeczy: czy zawsze widać, gdzie aktualnie jesteś (wyraźna ramka fokusu)? Czy kolejność jest logiczna i zgodna z porządkiem czytania? Czy wszędzie się dostaniesz i wszędzie wyjdziesz – zwłaszcza z menu, okienek i banerów cookie? Jeśli zatrzymasz się na jakimś elemencie albo fokus jest niewidoczny, znalazłeś realny problem, którego żaden skaner nie zgłosi niezawodnie.

Krok 3: Posłuchaj strony z czytnikiem ekranu

Nie potrzebujesz drogiego oprogramowania. W systemie Windows wbudowany jest Narrator (Ctrl+Win+Enter), darmowy i bardzo popularny jest NVDA, a na Macu czeka VoiceOver (Cmd+F5). Zamknij oczy i posłuchaj, jak strona jest odczytywana. Dobre pytania to:

• Czy obrazki są sensownie opisywane – czy tylko odczytywane jako „obraz” lub po nazwie pliku?
• Czy nagłówki są rozpoznawalne jako nagłówki, tak abyś mógł przeskakiwać między nimi skrótem klawiszowym?
• Czy pola formularzy są jasno nazwane (imię, e-mail), a nie tylko „pole tekstowe”?
• Czy komunikaty o błędach i informacje o statusie są faktycznie zapowiadane?

Na początku jest to nietypowe, ale już dziesięć minut pokaże Ci, jak Twoja strona brzmi dla niewidomych użytkowników.

Krok 4: Sprawdź kolory, kontrast i powiększenie

Ustaw powiększenie przeglądarki na 200 procent: czy wszystko pozostaje czytelne, czy tekst zachodzi na siebie i znika za krawędziami? Przełącz testowo na skalę szarości, aby sprawdzić, czy informacje nie są przekazywane wyłącznie kolorem – na przykład czerwone pola obowiązkowe bez dodatkowej gwiazdki lub tekstu. Kontrast tekstu do tła sprawdzisz za pomocą narzędzia Contrast Checker od WebAIM; jako wartość minimalną przyjmuje się 4,5:1 dla zwykłego tekstu.

Czego narzędzia za Ciebie nie zrobią

Niektóre kwestie wymagają oceny: czy teksty linków są treściwe („więcej informacji” zamiast „kliknij tutaj”)? Czy język jest zrozumiały? Czy filmy mają napisy? Te merytoryczne pytania to często ostatnie dziesięć procent – i właśnie one decydują o rzeczywistej użyteczności.

Szczerze mówiąc: w przypadku prostej, porządnie zbudowanej strony z krokami od 1 do 4 zajdziesz zaskakująco daleko, często zupełnie bez pomocy z zewnątrz. Gdy sprawa się komplikuje – sklep, system rezerwacji, interaktywny pulpit – albo gdy temat trafia na Twoją listę obowiązków z powodu przepisów o dostępności cyfrowej, opłaca się ustrukturyzowana weryfikacja według kryteriów WCAG. Strony i narzędzia budujemy od początku tak, aby te testy przechodziły bez zastrzeżeń – bo późniejsze naprawianie zawsze kosztuje więcej niż dostępność zaplanowana od samego startu.