Narzędzia do samodzielnego audytu dostępności strony

W jednym z poprzednich artykułów pisałam jak zrobić samodzielny audyt dostępności strony. Wspomniałam tam o przydatnych narzędziach do testowania dostępności. Dziś rozwinę ten wątek i dokładniej opiszę wybrane narzędzia.

Narzędzia automatyczne i tyczki do testowania dostępności cyfrowej stron

Narzędzia do automatycznego testowania stron działają bez ingerencji człowieka. Oznacza to, że:

• Szybko skanują stronę, bez konieczności ręcznego sprawdzania każdego elementu strony.
• Tworzą raporty, które zawierają listę błędów i sugestie dotyczące ich naprawy.
• Nie wymagają ręcznego testowania – mogą zidentyfikować dużą liczbę błędów i potencjalnych problemów z dostępnością, co ułatwia i przyspiesza proces audytu.

Przede wszystkim oszczędzają czas i koszty, jednak nie są bez wad. Należy pamiętać, że:

• mogą generować fałszywe alarmy, czyli zgłaszać błędy, które faktycznie nie istnieją,
• nie oceniają kontekstu– co może prowadzić do błędnych interpretacji wyników.

Dlatego automatyczne narzędzia nie zastąpią całkowicie ręcznego testowania?.
Ponieważ nie wykryją

• problemów z nawigacją klawiaturą – sprawdzą, czy strona internetowa jest w ogóle nawigowalna za pomocą klawiatury, ale nie są w stanie ocenić, czy nawigacja jest łatwa i intuicyjna dla użytkowników,
• problemów z czytelnością i zrozumiałością tekstu– sprawdzą takie rzeczy jak kontrast między kolorem tekstu a kolorem tła, ale nie ocenią, czy tekst jest czytelny dla osób z dysleksją lub innymi problemami ze wzrokiem,
• problemów ze zrozumiałością treści– nie są w stanie ocenić, czy treści są zrozumiałe dla osób z niskim poziomem umiejętności czytania lub dla osób, które nie są biegłe w posługiwaniu się językiem polskim.

Ponadto wiele z nich jest robiona pod język angielski, a nie mało popularny na świecie język polski.

Dlatego ręczne testowanie jest też niezbędne, ale do niego przejdziemy za chwilę. Natomiast teraz kilka moich ulubionych narzędzi do automatycznego testowania dostępności stron:

WAVE

Łatwe w obsłudze i bezpłatne narzędzie dostępne w formie webowej, jak i w postaci wtyczki do przeglądarki. Jest po polsku i:

• pozwala na podgląd strony z uwzględnieniem problemów.
• zawiera wskazówki dotyczące rozwiązywania problemów.

Testować można pojedyncze strony (jeden adres url na test). Jednak jeśli chcesz jednocześnie przetestować więcej podstron serwisu, to polecam pope.tech. Co prawda jest to płatne narzędzie, ale bardzo przyspiesza testy!

PS. Przy okazji bardzo polecam blog Popetech, który jest skarbnicą wiedzy o dostępności, podanej w bardzo przyjaznej formie.

Accessibility Insights: Accessibility Insights

To darmowe narzędzie firmy Microsoft dostępne jako:

• Rozszerzenie do przeglądarek Chrome i Edge.
• Oddzielny program dla komputerów z systemem Windows (niestety nie ma na macOs).

W przypadku tego narzędzia podstawowa znajomość kodu jest niezbędna, aby swobodnie posługiwać się nim.

Kluczowe funkcje Accessibility Insights:

• Live Inspect: sprawdzanie dostępności interfejsu w czasie rzeczywistym.
• FastPass: pozwala wykryć np. miejsca, w których nie da się obsłużyć klawiaturą, a także automatycznie sprawdza ok. 50 wymogów dostępności
• Sprawdzania kontrastu kolorów
• Assessment: przeprowadza przez serię ręcznych testów na każdej stronie.

Pomaga też w sprawdzeniu, czy po stronie można nawigować za pomocą klawiatury, podpowiadając jakie kwestie należy sprawdzić.

Lighthouse: Lighthouse

Tu również trzeba znać się trochę kodzie strony, a wyniki są w języku angielski.

Jest to narzędzie, które działa z Chrome, a otwiera się je przez narzędzia dla deweloperów. Wystarczy kliknąć prawym przyciskiem myszki i wybrać “Zbadaj”.

Lighthouse pozwala m.in. na:

• identyfikację błędów w kodzie HTML i CSS, które mogą utrudniać dostęp do strony,
• ocenę kontrastu kolorów na stronie,
• sprawdzenie czytelności tekstu, dzięki ocenie np. rozmiaru czcionki, czy odstępów między wierszami,
• zweryfikowanie dostępności strony dla użytkowników klawiatury,
• audyt strony w trybie emulacji różnych schorzeń, takich jak daltonizm czy upośledzenie widzenia.

Lighthouse generuje raport z wynikami audytu, który zawiera szczegółowe informacje o zidentyfikowanych problemach oraz zalecenia dotyczące ich naprawy.

Skryptozakładki

To kawałki kodu, które przechowujemy w przeglądarce internetowej jako zakładki. Kliknięcie uruchamia skrypt, który wykonuje określoną akcję na stronie internetowej, np. sprawdza dostępność strony pod kątem konkretnych.

Przykładem skryptozakładki do testowania dostępności stron internetowych jest skryptozakładka ANDI.

Co robi skryptozakładka ANDI:

• Automatyczne wykrywa niektóre problemy z dostępnością poprzez skanowanie strony. Identyfikuje takie bariery, jak brak tekstów alternatywnych dla obrazów, niewłaściwe etykiety formularzy lub niedostępne tabele.
• Wskazuje informacje o elementach interaktywnych i pokazuje, co czytnik ekranu powinien powiedzieć o elementach interaktywnych na stronie. Ułatwia to ocenę pod kątem dostępności strony dla osób niewidomych
• Sugeruje rozwiązania ANDI oferuje praktyczne sugestie, jak poprawić dostępność strony internetowej i naprawić zidentyfikowane problemy.

Jak zainstalować skryptozakładkę?
Sposób dodania skryptozakładki może się różnić w zależności od używanej przeglądarki internetowej, jednak jest to bardzo proste.

Mamy 2 sposoby na dodanie skryptozakładki do przeglądarki internetowej:
1. Przeciągnij i upuść

1. Na stronie internetowej, która udostępnia skryptozakładkę, znajdź odnośnik do niej (czasem wyświetlany jako przycisk).
2. Prawym przyciskiem myszy kliknij na odnośnik trzymając cały czas przycisk i przeciągnij odnośnik na pasek zakładek w przeglądarce.

2. Dodanie jako zakładkę

1. Zaznacz odnośnik do skryptozakładki.
2. Kliknij prawym przyciskiem myszy na zaznaczonym odnośniku i wybierz opcję „Dodaj zakładkę do odnośnika”.

Po dodaniu skryptozakładki do przeglądarki należy wejść na stronę, którą chcemy przetestować i kliknąć zapisaną skryptozakładkę.

Inne ciekawe skryptozakładki:

• List images – wyświetla listę wszystkich obrazów (w nowym oknie), pokazuje wszelkie problemy z atrybutem alt.
  
• List links – wyszukuje wszystkie linki na stronie i każdy element z przypisanym role=link. Linki wyświetlone w nowej karcie z informacjami o potencjalnych problemach z dostępnością, np.brak opisu, oraz podaje możliwe rozwiązania.
  
• Target sized bookmarket – stworzona z potrzeby testowania nowej wytycznej WCAG 2.2. Zgodnie z pkt. 2.5.8 rozmiar celu tapnięcia (np. w przycisk, ikonę) wynosi co najmniej 24 na 24px.

Wtyczki do przeglądarki

O wtyczkach można napisać osobny artykuł. Dlatego ograniczę się do kilku wybranych.

• • Accessibility Insights i Wave – wcześniej wspomniane narzędzia do testowania stron, mają też swoje odpowiedniki w formie pluginów do przeglądarki:
    • Accessibility Insights na Chrome i na Microsoft Edge.
    • Wave na Chrome, Microsoft Edge i na Firefox.
  • axe DevTools – podobnie jak Wave jest to potężne narzędzie do automatycznych testów. Występuje w formie wtyczki do przeglądarki, jak i jako narzędzie webowe.Czym się różni od Wave?
    • ma mniej przyjazną warstwę wizualną i wymaga wejścia w widok Developer tools (w Chrome ⌘.+option+I), przez co może wydawać się bardziej skomplikowanych i odpychający dla mniej technicznych osób,
    • w wersji bezpłatnej udostępnia tylko część funkcjonalności,
    • za pomocą axe DevTools możemy testować część strony (w wersji Pro), a nie całą jak w Wave,
    • zdarza się, że oba narzędzia pokazują unikalne błędy, stąd warto wykorzystywać oba.Pobierz rozszerzenie na Chrome, Edge lub Firefox.
  • Landmark Navigation via Keyboard or Pop-up
    Pozwala na sprawdzenie oznaczenie regionów strony poprzez tzw. landmarks. Ułatwiają one poruszanie się po stronie za pomocą klawiatury i czytnika ekranu. Użytkownicy często wyświetlają listę wszystkich punktów orientacyjnych na stronie, dzięki czemu mogą szybko przeskanować strukturę strony, a także szybko przeskoczyć do oddalonej sekcji.Pobierz rozszerzenie na Chrome, Edge i Firefox

Narzędzia ręczne do testowania dostępności cyfrowej stron

Narzędzia ręczne polegają na interakcji testera lub testerki ze stroną czy aplikacją. Pozwala to na na dokładniejszą i bardziej szczegółową analizę dostępności niż narzędzia automatyczne.

Narzędzia do ręcznych testów dostępności to często te same narzędzia, z których korzystają osoby z niepełnosprawnościami w celu korzystania ze strony. Zaliczyć możemy tu m.in.:

Czytniki ekranu

Są to narzędzia instalowane na urządzeniu użytkownika, które odczytują nagłość zawartość ekranu. pozwala to osobom niewidomym lub słabo widzącym korzystać z produktów cyfrowych i mieć dostęp do treści, które zawierają.

W ramach testów czytnikiem ekranu sprawdzamy:

• czy wszystkie elementy strony internetowej są poprawnie odczytywane,
• czy występują problemy z nawigacją,
• czy treść odczytywanych informacji ma sens także dla osoby z trudnościami ze wzrokiem.

W czasie testu czytnikiem ekranu zwróć uwagę na takie elementy, jak:

• Teksty alternatywne pod obrazkami, grafikami i innymi formami wizualnymi są obecne i odpowiednio określone. Zwróć uwagę czy alty nie są zbyt ogólne i niezrozumiałe oraz czy nie są przesadnie długie, co pogorszy doświadczenia osoby korzystającej z czytnika.
• Nagłówki mają poprawną strukturę i ułożone są w logicznej strukturze. Nagłówki są też oznaczone w kodzie semantycznie (czyli tagami, <h2>, <h3>,itd.), a nie tylko przez formatowanie tekstu.
  • Formularze mają oznaczone pola obowiązkowe, etykiety pól są powiązane z odpowiednimi polami, a komunikaty błędów są jasne i podpowiadają, co należy poprawić.

W zależności od systemu i przeglądarki mamy do wyboru różne czytniki ekranów:

• na Windows – najpopularniejsze to NVDA (darmowy) i JAWS (płatny),
• na MacOS i iphone – VoicOver darmowy i domyślnie zainstalowany na urządzeniach,
• na Android – TalkBack darmowy i domyślnie zainstalowane na urządzeniach.

Ich kompatybilność z różnymi przeglądarkami jest różna, dlatego najczęściej zaleca się:

• NVDA z Firefox
• JAWS z Chrome
• VoiceOver z Safari
• TalkBack z Chrome

Klawiatura

Sprawdzamy tu, czy wszystkie funkcje strony lub aplikacji są dostępne dla użytkowników, którzy nie mogą używać myszy. Część rzeczy sprawdza też test czytnikiem ekranu (np. struktura nagłówków, formularze), jednak dodatkowo należy sprawdzić, czy:

• Elementy interaktywne otrzymują fokus, czyli obramowanie wokół elementu lub zmiana koloru tego elementu wskazująca, że element jest aktualnie aktywny.
• Istnieje możliwość pominięcia powtarzających się treści.
• Keyboard trap (pułapka klawiatury) nie występują. To sytuacje, kiedy użytkownik zablokowany na konkretnym elemencie i nie może go opuścić, np. zablokowanie w polu formularza, dopóki nie zostanie ono poprawnie wypełnione.
• Wyskakujące okienka również otrzymują fokus klawiatury i można je zamknąć.

Testy klawiaturą wymagają trochę wprawy, jeśli na co dzień korzystamy z myszki. Podstawowe klawisze i skróty klawiaturowe to:

• Tab – przejście do kolejnego elementu interaktywnego.
• Shift+Tab – przejście do poprzedniego elementu interaktywnego.
• Enter – aktywacja linku lub przycisku, na którym jest fokus klawiatury.
• Spacja – zaznaczenie lub odznaczenie pola wyboru, rozwinięcie listę lub aktywacja objętego fokusem przycisku.
• Klawisze strzałek – przechodzenie pomiędzy elementami strony, przewijanie jej czy przechodzenie między elementami listy.
• Escape – zamknięcie dynamicznie otworzonego elementu, np. pop-up.

Źródło: Gov.pl

Dla mnie zaskoczeniem było, że klawiaturę łączy się ze smartfonem i to za jej pomocą obsługuje się telefon. Powody tego mogą być różne (np. duże palce), a z tych zdrowotnych, to np. dystrofia mięśniowa lub inne schorzenia, które osłabiają mięśnie i mogą również powodować trudności z używaniem ekranu dotykowego. Stąd też możesz sprawdzić, jak klawiaturą nawiguje się po witrynie na urządzeniu mobilnym.

Narzędzia do powiększania ekranu

Za ich pomocą testerzy sprawdzają, czy powiększenie strony nie powoduje utraty widoczności treści lub ich czytelności, np. rozjechania strony, konieczności się poziomego przewijania lub przykrycie jednych elementów drugimi.

Przykładowe powiększalniki ekranu to:

• Lupa – narzędzie wbudowane w Windows.
• Zoom– narzędzie w systemie macOS.
• Funkcje natywne przeglądarek lub dodatki do nich – większość popularnych przeglądarek internetowych ma domyślnie wbudowaną funkcję powiększania zawartości strony. Są też różnego rodzaju pluginy i wtyczki zewnętrzne, które często posiadają dodatkowe opcje, np.

Sterowanie głosowe

Po stronach i aplikacjach można nawigować także poprzez wydawanie poleceń głosowych. Umożliwiają to oprogramowania do sterowania głosowego, taki jak np. Sterowanie głosowe na urządzeniach Apple czy Windows Speech Recognition. Przykładowo po włączeniu tej opcji na iphonie można za pomocą komend głosowych wykonywać gesty, zarządzać elementami wyświetlanymi na ekranie oraz dyktować i edytować tekst.

Dlaczego testy narzędziami do samodzielnego audytu dostępności to za mało?

Narzędzia do testowania dostępności cyfrowej są nieocenioną pomocą w audycie dostępności. Pozwalają zidentyfikować wiele błędów i niedociągnięć, ale nie zastąpią one testów z udziałem realnych użytkowników z niepełnosprawnościami.

Dlaczego?

• Narzędzia oparte są na algorytmach, które nie zawsze są w stanie odzwierciedlić rzeczywiste doświadczenia użytkowników. Przykładowo, narzędzie może nie wychwycić problemu z nawigacją za pomocą klawiatury, który dla osoby z niepełnosprawnością ruchową będzie stanowił poważny problem.
• Nie poznamy unikatowych doświadczenia, a każdy użytkownik ma indywidualne potrzeby i sposób korzystania z technologii. Narzędzia automatyczne nie są w stanie uwzględnić wszystkich tych niuansów, co może prowadzić do pominięcia istotnych problemów.
• Brak tu kontekstu i emocji, gdyż narzędzia testują jedynie warstwę techniczną strony. Nie biorą pod uwagę kontekstu i emocji, jakie towarzyszą użytkownikowi podczas korzystania z niej. Testy z użytkownikami pozwalają zaobserwować ich frustrację, zagubienie lub zadowolenie, co dostarcza cennych informacji o rzeczywistej dostępności strony.
• Narzędzia automatyczne bazują na predefiniowanych zestawach reguł, które nie zawsze obejmują wszystkie rodzaje niepełnosprawności i technologie wspomagające. Użytkownicy mogą korzystać z nietypowych rozwiązań, których narzędzia nie są w stanie wykryć.
• Testy z użytkownikami pozwalają też na zebranie cennych informacji zwrotnych na temat tego, jak uczynić stronę bardziej przyjazną i użyteczną. Użytkownicy mogą podpowiedzieć, jak uprościć nawigację, poprawić czytelność treści lub udoskonalić inne aspekty strony.
• Pomagają w budowaniu empatii – Testowanie z użytkownikami pozwala zespołom projektowym i deweloperskim lepiej zrozumieć potrzeby i wyzwania osób z niepełnosprawnościami. To doświadczenie może budować empatię i zaangażowanie w tworzenie bardziej dostępnych rozwiązań.

Przyznam, że ten wpis miał być krótki. Naprawdę takie było założenie, jednak testowania dostępności i sama dostępność to tak obszerny temat, że trudno mówić o tym w kilku zdaniach. Niemniej, nie będę się poddawać 😉

A po więcej narzędzi zapraszam na stronę Lepszy Web lub stronę twórców WCAG, gdzie znajdziesz jeszcze inne propozycje ułatwiające audyt dostępności.

Miej z tyłu głowy, że jest to tylko pierwszy krok – po zidentyfikowaniu problemów z dostępnością na stronie, warto skonsultować się z ekspertem, aby wykryć wszystkie problemy i wdrożyć odpowiednie rozwiązania.

Grafiki tytułowa: Marvin Meyer