Dostępność strony internetowej bez zadęcia: checklista rzeczy, które warto sprawdzić

Dostępność strony internetowej nie polega na dorzuceniu jednego magicznego przycisku z napisem „włącz dostępność”. Gdyby to było takie proste, każda strona miałaby temat z głowy, a życie byłoby podejrzanie łatwe. Chodzi o coś bardziej praktycznego: żeby z witryny dało się korzystać na różne sposoby — klawiaturą, z czytnikiem ekranu albo przy powiększonym tekście.

Nie musisz od razu robić pełnego audytu WCAG, żeby znaleźć podstawowe problemy. Możesz przejść kilka najważniejszych podstron, wykonać prosty test i zapisać rzeczy do poprawy. Taka checklista nie jest certyfikatem ani gwarancją pełnej zgodności, ale dobrze pokazuje, gdzie strona może robić użytkownikom pod górkę.

Dostępność strony bez wielkich słów: o co w ogóle chodzi?

Strona dostępna cyfrowo pozwala użytkownikowi znaleźć informacje, przejść między sekcjami, wypełnić formularz i uruchomić potrzebne elementy niezależnie od tego, czy używa myszy, klawiatury, czytnika ekranu albo powiększenia. To nie jest osobna wersja witryny dla „jakiejś grupy”. Dobrze zrobiona strona po prostu nie stawia niepotrzebnych przeszkód.

Podstawowa dostępność obejmuje między innymi logiczną strukturę nagłówków, czytelny kontrast, teksty alternatywne obrazów, widoczny fokus i możliwość obsługi elementów interaktywnych klawiaturą. Warto sprawdzić też filmy, formularze, menu oraz elementy zewnętrzne. Jeden dodatek do WordPressa nie naprawi automatycznie całej strony. Może pomóc w konkretnych przypadkach, ale nie zastąpi myślenia i testu na prawdziwej witrynie.

Test numer jeden: przejdź stronę samą klawiaturą

Najprostszy test dostępności strony internetowej? Odłóż mysz. Otwórz stronę i spróbuj przejść ją samą klawiaturą. Naciskaj Tab i obserwuj, po czym porusza się fokus. Powinien przechodzić przez linki, przyciski, pola formularzy, menu i inne elementy, z których użytkownik może skorzystać.

Użyj Shift+Tab, żeby cofać się do poprzednich elementów. Sprawdź, czy Enter aktywuje linki i przyciski, a Spacja działa tam, gdzie powinna, na przykład przy checkboxach lub odpowiednich przyciskach. Nie chodzi o zaliczenie klawiaturowego maratonu. Chodzi o sprawdzenie, czy da się wykonać podstawowe zadanie bez sięgania po mysz.

Przejrzyj nie tylko główną treść. Sprawdź menu, wyskakujące okna, baner cookies, formularz kontaktowy i zewnętrzne widgety. Jeżeli fokus wchodzi do elementu, ale nie da się z niego wyjść, masz do czynienia z pułapką klawiaturową. To moment, w którym użytkownik utknął w interfejsie jak w windzie bez przycisku „parter”.

Miniinstrukcja: Tab, Shift+Tab, Enter i Spacja

1. Naciśnij Tab kilka razy i sprawdź kolejność przechodzenia po elementach.
2. Użyj Shift+Tab, aby cofnąć się i zobaczyć, czy kolejność jest zrozumiała.
3. Aktywuj linki i przyciski klawiszem Enter.
4. Sprawdź checkboxy i odpowiednie przyciski klawiszem Spacja.
5. Obserwuj, czy fokus jest cały czas widoczny i czy nic nie blokuje dalszego przechodzenia.

Sam fakt, że da się naciskać Tab, jeszcze niczego nie załatwia. Jeżeli nie widać, który element jest zaznaczony, użytkownik porusza się trochę po omacku. Widoczny i spójny fokus to mały detal, który robi dużą różnicę.

Czytelność: kontrast, powiększenie i porządek nagłówków

Dostępność to nie tylko klawiatura. Strona może być technicznie klikalna, a jednocześnie męczyć wzrok, gubić strukturę i rozsypywać się po powiększeniu. Dlatego warto zrobić trzy szybkie próby: sprawdzić kontrast, powiększyć tekst i przejrzeć nagłówki.

Trzy szybkie próby na jednej stronie

Kontrast. Przyjrzyj się najważniejszym parom tekst–tło: zwykłemu tekstowi, linkom, napisom na przyciskach i tekstowi na zdjęciach. Jako punkt odniesienia WCAG 2.2 podaje kontrast co najmniej 4,5:1 dla zwykłego tekstu oraz 3:1 dla dużego tekstu, z określonymi wyjątkami. Nie oznacza to, że każdy element musi wyglądać identycznie. Oznacza, że jasnoszary tekst na prawie białym tle warto przestać traktować jak wysmakowany minimalizm.

Powiększenie. Powiększ tekst do 200% i sprawdź, czy treść nadal jest czytelna. Zobacz, czy przyciski i formularze nie znikają, nie nachodzą na siebie i nie wychodzą poza ekran. Jeżeli po powiększeniu trzeba polować na połowę zdania albo przycisk, coś wymaga poprawy.

Nagłówki. Struktura powinna być logiczna: H1 dla głównego tematu, H2 dla głównych sekcji, H3 dla podsekcji. Nie używaj nagłówka wyłącznie po to, żeby tekst był większy. Nagłówki pomagają użytkownikom i technologiom asystującym zrozumieć układ strony. Warto też sprawdzić, czy opis linku lub przycisku mówi, co się wydarzy, a nie tylko brzmi „kliknij tutaj”.

Obrazek to nie zawsze ozdoba: teksty alternatywne

Przy każdym obrazie zadaj proste pytanie: po co on tu jest? Nie chodzi o automatyczne opisywanie każdego szczegółu zdjęcia. Chodzi o przekazanie informacji albo funkcji, którą obraz wnosi do strony.

Obraz informacyjny powinien mieć krótki tekst alternatywny opisujący jego znaczenie. Jeżeli grafika pokazuje konkretną informację potrzebną do zrozumienia treści, nie zostawiaj użytkownika z pustką. Obraz dekoracyjny może mieć pusty tekst alternatywny, bo nie wnosi ważnej treści.

Inaczej traktuj grafikę będącą linkiem albo przyciskiem. Jej tekst alternatywny powinien opisywać działanie lub cel elementu, a nie tylko wygląd. Jeśli logo prowadzi do strony głównej, ważniejsza jest funkcja niż sam fakt, że jest czerwone, okrągłe czy „nowoczesne”. Nie dubluj też bez potrzeby tego samego komunikatu w podpisie i tekście alternatywnym.

Film bez napisów? To proszenie się o problem

Jeżeli film przekazuje istotną mowę, dialogi albo informacje dźwiękiem, powinien mieć napisy. To podstawowy sposób, żeby treść nie była dostępna wyłącznie dla osób, które mogą lub chcą słuchać. Napisy nie rozwiązują wszystkich problemów wideo, ale ich brak potrafi wyciąć z materiału najważniejsze informacje.

Sprawdź nie tylko plik, ale też odtwarzacz

Sam plik z napisami to jeszcze nie koniec. Sprawdź, czy odtwarzacz można obsługiwać klawiaturą: uruchomić film, zatrzymać go i skorzystać z dostępnych kontrolek. Przy osadzaniu filmu z zewnętrznej platformy ramka iframe powinna mieć zrozumiały tytuł, żeby wiadomo było, co się w niej znajduje.

W zależności od materiału przydatna może być także transkrypcja albo audiodeskrypcja. Automatyczne napisy są wygodne, ale mogą zawierać błędy. Przy ważnych filmach trzeba je sprawdzić i skorygować, zamiast wierzyć, że komputer rozpoznał każde nazwisko, branżowe słowo i mruknięcie pod nosem.

Szybka checklista przed publikacją strony

Przejdź przez listę na kluczowych podstronach: stronie głównej, ofercie, kontakcie i tam, gdzie użytkownik ma wykonać ważne działanie. Odhaczaj punkty, ale zapisuj też konkretne miejsca do poprawy. „Strona niedostępna” jest mało pomocne. „Przycisk wysłania formularza nie ma widocznego fokusu” — już znacznie bardziej.

• Przejdź stronę samą klawiaturą, używając Tab, Shift+Tab, Enter i Spacji.
• Sprawdź, czy linki, przyciski, formularze, menu i wyskakujące elementy są osiągalne.
• Upewnij się, że fokus jest widoczny i nie ma pułapki klawiaturowej.
• Zweryfikuj kontrast tekstu, przycisków, linków i tekstu na zdjęciach.
• Powiększ tekst do 200% i sprawdź, czy nic nie znika ani nie nachodzi na siebie.
• Przejrzyj hierarchię H1, H2 i H3 oraz opisy linków i przycisków.
• Sprawdź teksty alternatywne obrazów i funkcję grafik będących linkami.
• Zweryfikuj napisy oraz obsługę klawiaturą w materiałach wideo.

Najczęściej pomijane są właśnie drobiazgi: niewidoczny fokus, menu niedostępne bez myszy, chaotyczne nagłówki, puste lub przypadkowe teksty alternatywne, słaby kontrast, problemy po powiększeniu oraz sam odtwarzacz filmu. Taki screening to dobry początek, ale nie formalne potwierdzenie pełnej zgodności.

Czego nie załatwi jedna wtyczka i kiedy wołać specjalistę

Automatyczna checklista albo skaner może pomóc znaleźć część problemów, ale nie rozumie całego kontekstu strony tak jak człowiek. Nie sprawdzi za Ciebie sensu każdego tekstu alternatywnego, wygody przejścia formularza ani tego, czy kolejność elementów ma sens w konkretnym zadaniu.

Kiedy prosta checklista to za mało

Dokładniejsza ocena może być potrzebna, gdy strona jest rozbudowana, ma sklep, wiele integracji, dynamiczne komponenty, dokumenty, formularze albo zewnętrzne widgety. Wtedy warto sprawdzić rzeczywistą konfigurację motywu, wtyczek i wszystkich ważnych ścieżek użytkownika. Checklista nie obejmuje każdego kryterium WCAG i nie zastępuje audytu specjalisty ani testów z użytkownikami technologii asystujących.

Nie przenoś też automatycznie obowiązków dotyczących konkretnych kategorii podmiotów publicznych na każdą prywatną firmę. Najrozsądniej zacząć od praktycznych problemów widocznych na własnej stronie, poprawiać je etapami i nie udawać, że jeden dodatek załatwił temat raz na zawsze.

Podsumowanie: zacznij od klawiatury i widocznego fokusu. Potem sprawdź kontrast, powiększenie do 200%, nagłówki, teksty alternatywne oraz napisy i obsługę filmów. To prosty, konkretny pierwszy krok do strony dostępnej cyfrowo, ale nie pełny audyt ani certyfikat. Najważniejsze, żeby test wykonać na prawdziwej stronie, a nie tylko odhaczyć obietnicę wtyczki. Napisz do Szwagra i opowiedz, czego potrzebujesz — strony, grafiki, filmu albo tekstów.