Checklista przed audytem WCAG to praktyczne narzędzie dla organizacji, które chcą samodzielnie sprawdzić podstawową dostępność swojej strony internetowej, aplikacji lub dokumentów. Nie zastąpi pełnego audytu, ale pozwoli wcześniej wykryć błędy wpływające na korzystanie z serwisu przez osoby z różnymi potrzebami.
Warto pamiętać, że dostępność cyfrowa obejmuje nie tylko wygląd strony. Znaczenie ma również możliwość obsługi za pomocą klawiatury, poprawne działanie z czytnikiem ekranu, zrozumiałość komunikatów, odpowiedni kontrast, dostępność formularzy oraz sposób publikowania plików. WCAG opiera się na czterech zasadach: postrzegalności, funkcjonalności, zrozumiałości i kompatybilności. Polski portal gov.pl wyjaśnia te zasady, a W3C udostępnia materiały dotyczące oceny dostępności stron.
Po co sprawdzać stronę przed audytem WCAG?
Samodzielna kontrola ma przede wszystkim charakter przygotowawczy. Pomaga uporządkować informacje, ograniczyć liczbę oczywistych błędów i lepiej wykorzystać czas przeznaczony na audyt. Dzięki niej można także sprawdzić, czy osoby odpowiedzialne za treści, marketing, obsługę klienta i rozwój techniczny rozumieją swoje zadania.
W3C podkreśla, że automatyczne narzędzia nie są w stanie samodzielnie ocenić całej dostępności serwisu. Potrzebna jest również ocena manualna prowadzona przez osobę posiadającą odpowiednią wiedzę. Dlatego wynik skanera należy traktować jako wskazówkę, a nie certyfikat zgodności. Materiały WAI dotyczące ewaluacji dostępności wskazują, że ocena powinna łączyć narzędzia półautomatyczne, analizę człowieka i – w miarę możliwości – udział użytkowników.
1. Ustal zakres samodzielnego sprawdzenia
Zanim rozpoczniesz testy, zapisz, co dokładnie chcesz sprawdzić. Nie ograniczaj się do strony głównej. Użytkownicy najczęściej trafiają do serwisu przez wyszukiwarkę, media społecznościowe, kampanie lub bezpośredni link do konkretnej usługi.
- stronę główną;
- najważniejsze podstrony ofertowe i informacyjne;
- stronę kontaktową;
- formularze kontaktowe, rejestracyjne lub zakupowe;
- wyszukiwarkę i wyniki wyszukiwania;
- menu główne, stopkę i mapę strony;
- podstrony z multimediami;
- przykładowe dokumenty PDF, DOCX i pliki do pobrania;
- proces wykonania najważniejszej czynności, na przykład wysłania formularza lub zapisania się na wydarzenie.
Dobrym rozwiązaniem jest przygotowanie listy adresów URL i oznaczenie elementów wspólnych dla całego serwisu. Jeżeli wszystkie podstrony korzystają z tego samego nagłówka, menu lub formularza, jeden błąd może powtarzać się w wielu miejscach.
2. Sprawdź strukturę strony i nagłówki
Strona powinna mieć logiczną strukturę, którą można zrozumieć zarówno wzrokowo, jak i przy użyciu technologii asystujących. Nagłówki nie powinny być dobierane wyłącznie ze względu na wielkość tekstu. Ich poziom powinien wynikać z hierarchii informacji.
- czy każda podstrona ma jeden główny temat;
- czy występuje nagłówek główny opisujący zawartość strony;
- czy kolejne nagłówki tworzą logiczną hierarchię;
- czy nagłówki nie są używane wyłącznie do powiększania lub pogrubiania tekstu;
- czy listy są oznaczone jako listy, a nie jako ciąg znaków z myślnikami;
- czy tabele mają nagłówki i są używane tylko do prezentowania danych;
- czy kolejność treści jest zrozumiała po wyłączeniu stylów wizualnych.
W praktyce warto otworzyć stronę i przeczytać same nagłówki. Jeśli tworzą sensowny skrót zawartości, struktura prawdopodobnie jest uporządkowana. Jeśli pojawiają się przypadkowe hasła, powtarzające się nagłówki lub puste sekcje, będzie to sygnał do poprawy.
3. Przejdź całą stronę za pomocą klawiatury
Jednym z najprostszych testów jest odłożenie myszy i używanie wyłącznie klawisza Tab, kombinacji Shift+Tab, Enter, spacji oraz klawiszy strzałek. Sprawdź, czy można dotrzeć do każdego linku, przycisku, pola formularza, rozwijanego menu i elementu interaktywnego.
- czy kolejność przechodzenia klawiszem Tab jest logiczna;
- czy fokus klawiatury jest wyraźnie widoczny;
- czy można otworzyć i zamknąć menu bez użycia myszy;
- czy można przejść przez baner cookies i inne okna modalne;
- czy po otwarciu okna fokus nie znika w nieprzewidywalnym miejscu;
- czy nie występuje pułapka klawiaturowa, z której nie można wyjść;
- czy przyciski i linki reagują na Enter lub spację zgodnie z ich funkcją.
Szczególnie dokładnie przetestuj elementy dodane przez wtyczki: kalendarze, galerie, filtry, formularze, odtwarzacze i czaty. Często to właśnie one pozostają niedostępne mimo poprawnej obsługi podstawowej strony.
4. Oceń linki, przyciski i komunikaty
Użytkownik powinien wiedzieć, co stanie się po aktywowaniu danego elementu. Link „kliknij tutaj” może być niejasny, zwłaszcza gdy na stronie występuje kilka takich odnośników. Lepiej użyć określeń opisujących cel, na przykład „Pobierz deklarację dostępności” albo „Zobacz ofertę audytu cyfrowego”.
Sprawdź również, czy przyciski mają jednoznaczne etykiety. „Wyślij” może być wystarczające w prostym formularzu, ale w bardziej złożonym procesie lepiej poinformować użytkownika, jaki etap zostanie wykonany. Elementy o podobnym wyglądzie powinny działać w podobny sposób na całej stronie.
Jeśli strona wyświetla komunikaty o błędach, powinny one jasno wskazywać problem i sposób jego rozwiązania. Informacja „formularz zawiera błędy” jest niewystarczająca. Lepszy komunikat to: „Podaj adres e-mail w poprawnym formacie”.
5. Sprawdź formularze krok po kroku
Formularz jest jednym z najważniejszych miejsc w serwisie, ponieważ często prowadzi do kontaktu, zakupu, zgłoszenia lub rejestracji. Przetestuj go zarówno z poprawnymi, jak i błędnymi danymi.
- czy każde pole ma widoczną etykietę;
- czy etykieta pozostaje zrozumiała po wpisaniu danych;
- czy pola wymagane są oznaczone w sposób tekstowy, a nie wyłącznie kolorem lub symbolem;
- czy format wymaganych danych jest wyjaśniony przed wysłaniem;
- czy komunikat błędu znajduje się blisko pola, którego dotyczy;
- czy błędy są zrozumiałe i wskazują sposób poprawy;
- czy można skorygować dane bez utraty wcześniej wpisanych informacji;
- czy po wysłaniu formularza pojawia się jednoznaczne potwierdzenie.
Nie zapomnij o zgodach, polach wyboru, autouzupełnianiu i zabezpieczeniach antyspamowych. CAPTCHA, która wymaga rozpoznawania obrazów lub wykonania zadania czasowego, może stworzyć barierę dla części użytkowników.
6. Zweryfikuj tekst alternatywny i multimedia
Każdy obraz powinien mieć określoną funkcję. Jeśli przekazuje informację, potrzebuje zwięzłego i konkretnego tekstu alternatywnego. Jeśli jest dekoracyjny, powinien być pomijany przez czytnik ekranu. Nie należy opisywać wszystkich szczegółów zdjęcia, lecz te, które są istotne w danym kontekście.
Przykład: zdjęcie prowadzącej szkolenie może mieć opis „Trenerka prowadzi warsztat dotyczący dostępności cyfrowej”. Jeśli obok znajduje się już identyczny opis, alternatywa może być zbędna. Z kolei grafika zawierająca harmonogram lub instrukcję wymaga przeniesienia kluczowej treści do tekstu HTML.
W przypadku filmów sprawdź obecność napisów, a w razie potrzeby także audiodeskrypcji lub tekstowej alternatywy. Materiały audio powinny mieć transkrypcję. Samo umieszczenie filmu z platformy zewnętrznej nie gwarantuje dostępności.
7. Sprawdź kontrast, powiększenie i responsywność
Oceń, czy tekst jest czytelny na tle, na którym został umieszczony. Nie polegaj wyłącznie na własnym odczuciu. Warto skorzystać z narzędzia do pomiaru kontrastu, ale wynik należy interpretować w kontekście całego komponentu, jego stanu aktywnego, fokusu i elementów sąsiadujących.
- sprawdź tekst podstawowy i tekst umieszczony na zdjęciach;
- zweryfikuj linki, przyciski, placeholdery i komunikaty;
- upewnij się, że informacja nie jest przekazywana wyłącznie kolorem;
- powiększ tekst do 200% i sprawdź, czy treść nie znika;
- zmniejsz szerokość okna i sprawdź, czy strona nie wymaga przewijania w dwóch kierunkach;
- sprawdź działanie na telefonie w orientacji pionowej i poziomej.
Polskie materiały dotyczące dostępności wskazują również na znaczenie powiększenia treści i dostosowania układu do mniejszych ekranów. To ważne nie tylko dla osób słabowidzących, lecz także dla użytkowników korzystających z telefonu, starszych urządzeń lub niestandardowych ustawień wyświetlania.
8. Przejrzyj dokumenty i pliki do pobrania
Dostępność strony nie kończy się na kodzie HTML. PDF, prezentacja, arkusz kalkulacyjny lub dokument tekstowy również mogą zawierać bariery. Przed audytem wybierz kilka najczęściej pobieranych plików i sprawdź:
- czy dokument ma określony język i tytuł;
- czy zastosowano prawidłową strukturę nagłówków;
- czy kolejność czytania jest logiczna;
- czy tabele mają nagłówki;
- czy obrazy zawierają tekst alternatywny;
- czy kontrast i wielkość tekstu są wystarczające;
- czy dokument można obsłużyć przy użyciu klawiatury;
- czy skan nie jest wyłącznie obrazem bez warstwy tekstowej.
Jeżeli plik jest niedostępny, nie wystarczy zmienić jego nazwę. Trzeba przygotować poprawioną wersję albo zapewnić równoważną informację w dostępnym formacie.
9. Użyj narzędzia automatycznego, ale nie traktuj go jak audytu
Automatyczny skaner może szybko wykryć brakujące teksty alternatywne, problemy z etykietami, niektóre błędy kontrastu, nieprawidłowe role lub problemy ze strukturą dokumentu. Jest dobrym wsparciem przy wstępnym przeglądzie i monitorowaniu zmian.
Nie powinien jednak być jedynym etapem kontroli. Narzędzie może nie rozpoznać, czy tekst alternatywny jest rzeczywiście trafny, czy kolejność nagłówków odpowiada logice treści albo czy komunikat błędu jest zrozumiały. W3C zaleca łączenie testów automatycznych z oceną manualną, ponieważ dostępność zależy także od kontekstu i rzeczywistego sposobu korzystania z serwisu.
Po skanowaniu zapisz wyniki w tabeli: adres strony, opis problemu, kryterium WCAG, wpływ na użytkownika, osoba odpowiedzialna, priorytet i status poprawki. Taki rejestr ułatwi rozmowę z wykonawcą strony oraz późniejszą weryfikację.
10. Przetestuj najważniejsze scenariusze użytkownika
Lista pojedynczych błędów nie pokazuje jeszcze, czy użytkownik może skutecznie załatwić sprawę. Dlatego opracuj kilka scenariuszy i przejdź je od początku do końca.
- Znajdź dane kontaktowe i wyślij wiadomość.
- Znajdź konkretną usługę i pobierz dokument.
- Wyszukaj informację z użyciem wyszukiwarki.
- Zapisz się na wydarzenie lub szkolenie.
- Odczytaj komunikat o błędzie i popraw dane w formularzu.
- Przejdź całą ścieżkę bez myszy.
Jeśli to możliwe, poproś kilka osób o wykonanie tych samych zadań bez wcześniejszego instruowania. Obserwuj, w którym miejscu pojawia się niepewność, konieczność powtórzenia czynności albo potrzeba pomocy drugiej osoby.
Praktyczna checklista przed audytem WCAG
- Zakres: wybrano najważniejsze podstrony, formularze, dokumenty i scenariusze.
- Struktura: tytuły stron, nagłówki, listy i tabele są logiczne.
- Klawiatura: wszystkie funkcje są dostępne bez myszy, a fokus jest widoczny.
- Linki i przyciski: ich nazwy jasno opisują cel lub działanie.
- Formularze: pola mają etykiety, błędy są zrozumiałe, a dane nie znikają.
- Obrazy: teksty alternatywne odpowiadają funkcji grafik.
- Multimedia: filmy mają napisy, a audio – transkrypcję.
- Kontrast: tekst, elementy interaktywne i fokus są dostatecznie widoczne.
- Powiększenie: strona pozostaje użyteczna przy powiększeniu tekstu.
- Responsywność: treści działają na telefonie i przy zmienionej szerokości okna.
- Dokumenty: najważniejsze pliki mają strukturę i możliwą do odczytania treść.
- Scenariusze: użytkownik może samodzielnie wykonać kluczowe zadania.
- Rejestr błędów: problemy mają opis, priorytet i przypisaną osobę odpowiedzialną.
Czego samodzielna kontrola nie zastąpi?
Wstępna checklista nie daje podstaw do stwierdzenia, że strona spełnia wszystkie wymagania WCAG. Pełna ocena powinna obejmować odpowiednio dobrany zakres stron, różne typy treści, funkcje dynamiczne, dokumenty i procesy. Wymaga także doświadczenia w interpretowaniu kryteriów sukcesu oraz ocenie wpływu błędów na użytkowników.
W3C wskazuje, że raport z oceny powinien określać między innymi zakres badania, datę, zastosowaną metodę, sprawdzone adresy oraz wyniki i rekomendacje. Jest to ważne, ponieważ strona może zmienić się już po zakończeniu testów. Audyt należy więc traktować jako element procesu, a nie jednorazowe wydarzenie.
Jeśli chcesz dowiedzieć się więcej o zakresie profesjonalnej oceny, zobacz usługę audytu dostępności cyfrowej EmpatiaLAB. Przydatny będzie również artykuł Jak przygotować stronę internetową do audytu dostępności?.
Podsumowanie
Samodzielne sprawdzenie strony przed audytem WCAG warto rozpocząć od zakresu, struktury treści, obsługi klawiaturą, formularzy, kontrastu, multimediów, dokumentów i najważniejszych scenariuszy użytkownika. Największą wartość daje nie samo odhaczanie punktów, lecz zapisanie problemów, określenie ich wpływu i zaplanowanie poprawek.
Dostępność cyfrowa jest odpowiedzialnością całej organizacji: osób tworzących treści, administratorów, projektantów, programistów i zespołów obsługi. Jeśli potrzebujesz wsparcia w ocenie strony, przygotowaniu raportu lub zaplanowaniu działań naprawczych, skontaktuj się z EmpatiaLAB. Wspieramy organizacje w tworzeniu dostępnych usług, stron i komunikacji – praktycznie, jasno i z uwzględnieniem realnych potrzeb użytkowników.