Czy Twoja strona na WordPressie jest dostępna? Testujemy Accessibility Checker

Wstęp

Strona wygląda dobrze na komputerze, poprawnie otwiera się na telefonie, a formularz wysyła wiadomości. Czy to oznacza, że każdy użytkownik będzie mógł z niej wygodnie skorzystać? Niekoniecznie.

Czasem problemem jest zdjęcie bez odpowiedniego opisu. Innym razem nagłówki poukładane przypadkowo albo kilka linków „kliknij tutaj”, po których trudno zorientować się, dokąd prowadzą. Wizualnie wszystko może wyglądać poprawnie, ale sposób przygotowania treści nadal wymaga poprawek.

Dlatego dziś przyjrzymy się wtyczce Accessibility Checker od Equalize Digital. Przygotujemy prostą podstronę, sprawdzimy raport i przejdziemy przez kilka zmian, które można wykonać bez edytowania kodu motywu.

Od razu ważna rzecz: nie będzie to pełny audyt dostępności. Chodzi o pierwszy krok i poznanie narzędzia, które pomaga zauważyć część problemów.

Co sprawdza Accessibility Checker?

Accessibility Checker analizuje stronę i pokazuje wykryte problemy bezpośrednio w WordPressie. Raport można przeglądać w edytorze, a także na widoku strony, gdzie łatwiej odnaleźć wskazany element.

W darmowej wersji możemy sprawdzać zwykłe wpisy i strony. Do naszego przykładu to wystarczy. Zbiorcze skanowanie całego serwisu oraz obsługa dodatkowych typów treści to już funkcje wersji płatnej. Zakres funkcji wtyczki

Na początek skupimy się na trzech elementach:

• tekście alternatywnym obrazu;
• kolejności nagłówków;
• opisie odnośnika.

Nie będziemy od razu poprawiać wszystkiego. Lepiej prześledzić kilka konkretnych zgłoszeń i zrozumieć, dlaczego się pojawiły.

Przygotowujemy stronę do próby

Test wykonujemy na roboczej instalacji WordPressa. Możemy wykorzystać środowisko opisane wcześniej przy okazji WordPress Playground.

Tworzymy stronę o tytule:

Jak do nas trafić?

Dodajemy krótki opis dojazdu i zdjęcie pokazujące wejście do przykładowego budynku. Na potrzeby próby pozostawiamy tekst alternatywny tego zdjęcia pusty. Wybieramy fotografię, która rzeczywiście przekazuje informację, a nie pełni jedynie funkcji dekoracyjnej.

Następnie dodajemy:

1. Nagłówek H2: „Dojazd do biura”.
2. Bezpośrednio pod nim nagłówek H4: „Wejście od parkingu”.
3. Odnośnik do innej strony, opisany jako „Kliknij tutaj”.

To celowo przygotowane niedoskonałości. Dzięki nim będziemy mieli konkretne elementy do obejrzenia w raporcie.

Publikujemy stronę wyłącznie w środowisku testowym.

Instalujemy wtyczkę i otwieramy raport

W panelu administracyjnym przechodzimy do:

Wtyczki → Dodaj nową wtyczkę

Wyszukujemy Accessibility Checker, sprawdzamy, czy jest to moduł od Equalize Digital, a następnie instalujemy go i włączamy.

W ustawieniach wtyczki upewniamy się, że sprawdzanie stron jest aktywne. Na początku nie musimy włączać wszystkich dodatkowych mechanizmów naprawczych — chcemy najpierw zobaczyć, co narzędzie zgłasza.

Wracamy do edycji przygotowanej strony i zapisujemy zmiany. Zgodnie z instrukcją producenta zapis uruchamia ponowną analizę. W edytorze blokowym otwieramy panel Accessibility Checker z paska narzędzi. Instrukcja pierwszej konfiguracji

Nazwy sekcji mogą być wyświetlane po angielsku. W dokumentacji producent rozróżnia między innymi Problems, czyli wykryte problemy, oraz Needs Review, czyli elementy wymagające oceny człowieka.

I to rozróżnienie jest ważne. Nie każde ostrzeżenie oznacza, że należy natychmiast coś usunąć albo zmienić.

Zaczynamy od opisu zdjęcia

Rozwijamy zgłoszenie dotyczące tekstu alternatywnego obrazu. Sprawdzamy, czy wskazuje naszą fotografię wejścia.

Nie zakładamy przy tym, że komunikat będzie miał identyczną nazwę w każdej instalacji. Brak atrybutu alt i pusty atrybut alt to różne sytuacje, a pusty opis może być prawidłowy dla grafiki dekoracyjnej.

W naszym przykładzie zdjęcie ma jednak pomóc w znalezieniu wejścia. Dlatego zaznaczamy blok obrazu i wpisujemy opis odpowiadający temu, co faktycznie przedstawia fotografia, na przykład:

„Wejście do biura od strony parkingu, po lewej stronie bramy”.

Taki opis ma sens tylko wtedy, gdy jest zgodny ze zdjęciem i przydatny w kontekście strony. Nie wpisujemy nazwy pliku ani przypadkowych słów kluczowych.

Co z ozdobnikami? Nie każda grafika potrzebuje opisu. Dla obrazów wyłącznie dekoracyjnych właściwy może być pusty tekst alternatywny. O tym, jaki opis jest potrzebny, decyduje funkcja obrazu w danym miejscu. Wskazówki W3C dotyczące tekstów alternatywnych

Porządkujemy nagłówki

Przechodzimy do kolejnego elementu: po nagłówku H2 umieściliśmy od razu H4.

Jeżeli „Wejście od parkingu” jest podsekcją „Dojazdu do biura”, zmieniamy jego poziom na H3. Gdyby była to osobna, równorzędna część strony, należałoby rozważyć H2.

Nie wybieramy poziomu nagłówka tylko dlatego, że odpowiada nam wielkość liter. Wygląd i struktura to dwie różne sprawy.

W prostym przykładzie układ może wyglądać tak:

• tytuł strony H1: „Jak do nas trafić?”;
• sekcja H2: „Dojazd do biura”;
• podsekcja H3: „Wejście od parkingu”.

Sprawdzamy przy tym, jak tytuł wyświetla używany motyw. Nie dodajemy kolejnego H1 w treści wyłącznie po to, aby odtworzyć powyższą listę. Sensowna hierarchia nagłówków pomaga odzwierciedlić organizację informacji na stronie. Wskazówki W3C dotyczące nagłówków

Zmieniamy „Kliknij tutaj” na konkretną informację

Teraz odnośnik. Samo „Kliknij tutaj” niewiele mówi o tym, co znajduje się po drugiej stronie.

Jeżeli link prowadzi do kontaktu, możemy opisać go jako „Sprawdź dane kontaktowe i godziny pracy”. Jeżeli udostępniamy instrukcję, lepszy będzie tekst „Pobierz instrukcję dojazdu w PDF”.

Zmieniamy opis, ale pozostawiamy właściwy adres docelowy. Następnie zapisujemy stronę i ponownie oglądamy raport.

Nie skupiajmy się wyłącznie na tym, czy wtyczka rozpozna polskie sformułowanie „Kliknij tutaj”. Automatyczne reguły nie zastępują oceny treści. Ważne, aby po zmianie czytelnik wiedział, dokąd prowadzi odnośnik. Pracę z niejednoznacznymi opisami linków pokazuje też instrukcja producenta.

Przy okazji można sprawdzić również, czy sam odnośnik działa. To osobne zagadnienie, które opisaliśmy w poradniku o wyszukiwaniu i naprawianiu niedziałających linków w WordPressie.

Powtarzamy skan i porównujemy zgłoszenia

Po zapisaniu poprawek wracamy do tych samych pozycji w raporcie.

Sprawdzamy:

• czy zmiana tekstu alternatywnego została uwzględniona;
• czy poprawiona hierarchia nagłówków nadal wywołuje zgłoszenie;
• czy opis linku jest zrozumiały i prowadzi do właściwego miejsca.

Nie musimy uzyskać pustego raportu. Narzędzie może wskazać również elementy nagłówka strony, stopki albo używanego motywu. Jeżeli problem nie znajduje się w treści, sama edycja tej podstrony go nie rozwiąże.

Nie odrzucamy też zgłoszeń tylko po to, aby poprawić wynik. Najpierw trzeba ustalić, czego dotyczą i czy rzeczywiście wymagają zmiany.

Czy dobry wynik oznacza pełną dostępność?

Nie. Producent wyraźnie zaznacza, że automatyczne narzędzie nie jest w stanie samodzielnie zagwarantować pełnej dostępności strony. Potrzebne są również testy ręczne i ocena wykrytych problemów. Ograniczenia Accessibility Checker

Na początek odkładamy mysz i próbujemy przejść po stronie klawiaturą. Sprawdzamy, czy można dotrzeć do linków i przycisków, czy widać aktualnie wybrany element oraz czy da się wykonać najważniejsze działania.

To nadal nie jest kompletny audyt. Pozwala jednak spojrzeć na stronę inaczej niż podczas zwykłego przeglądania.

Podsumowanie

Accessibility Checker potraktowałbym jako pomoc przy codziennym przygotowywaniu treści. Wskazuje miejsca, którym warto się przyjrzeć, i pozwala wrócić do raportu po wprowadzeniu poprawek. Bardzo fajnie twórcy również te metody omówili w swoim wideo:

Na początek wystarczy jedna podstrona. Sprawdzamy zdjęcia, porządkujemy nagłówki i poprawiamy opisy linków. Dopiero później przechodzimy do kolejnych treści oraz problemów wymagających zmian w motywie.

Najważniejszy nie jest sam procent w raporcie. Chodzi o to, aby odwiedzająca stronę osoba mogła znaleźć informację i z niej skorzystać. Nawet niewielki test może pokazać, od czego warto zacząć.