Wstęp
Istnieje bardzo dużo narzędzi do automatycznego testowania dostępności WCAG. Części z nich jest ogólnodostępna, a część płatna. Nie da się również przetestować wszystkiego za pomocą jednego narzędzia. Dobrym pomysłem, jest zatem skorzystanie z kilku podczas badań i porównanie wyników. Do darmowych najpopularniejszych narzędzi do testowania automatycznego dostępności należą między innymi WAVE, Lighthouse i axe Dev Tools. Choć nie wyczerpuje to tematu, w tym artykule zajmiemy się omówieniem właśnie nich.
Z tego artykułu dowiesz się:
- Jakie są najpopularniejsze narzędzia do testowania dostępności?
- Czy istnieją automatyczne testy dostępności WCAG w języku polskim?
- Co można sprawdzić za pomocą narzędzi do automatycznego testowania dostępności?
Jakie są najpopularniejsze narzędzia do automatyczne testowania dostępności ?
WAVE
Wave to narzędzie, które super sprawdzi się dla stron chronionych hasłem, przechowywanych lokalnie lub bardzo dynamicznych. Mocną stroną tego narzędzia jest wizualna prezentacja błędów. Elementy z błędami zaznaczone są na stronie za pomocą ikon, wskazane jest miejsce w kodzie, co ułatwia nam znalezienie błędu. Wizualne zobrazowanie miejsca występowania błędu bardzo pomaga, zwłaszcza kiedy błędów jest dużo. Dodatkowo istnieje opcja wyłączenia z widoku błędów, które nas na ten moment nie interesują, co porządkuje pracę. Wave jest super narzędziem do zrozumienia i edukacji dostępności.
Jak używać Wave?
Zacznij od ściągnięcia rozszerzenie Wave dla przeglądarek. W zależności od swoich potrzeb możesz ściągnąć je dla Chrome, Firefox i Edge.
Po zainstalowaniu otwórz stronę, jaką chcesz sprawdzić. Narzędzie umożliwia testowanie dostępności bezpośrednio w przeglądarce.
Na twoim ekranie po lewej stronie pojawi się okno poglądowe z wymienionym wszystkim błędami.
Jakie błędy pokaże ci Wave?
Dowiesz się z niego między innymi:
- czy kontrast jest odpowiedni,
- czy struktura twojej strony jest poprawna,
- czy tabulacja ma odpowiednią kolejność,
- gdzie są Aria
- jakie masz problemy z nagłówkami.
Narzędzie pokaże też część błędów, które następnie trzeba sprawdzić manualnie. Takim klasycznym błędem jest informacja o tym, że nie istnieje opis alternatywny dla zdjęcia. Zdjęcie może być dekoracyjne i nie musi go mieć. O tym decydujemy na poziomie testów eksperckich.
Lighthouse
Lighthouse to narzędzie wielofunkcyjne. Oprócz dostępności tym narzędziem możesz również sprawdzić również wydajność, seo i najlpesze praktyki na swojej stronie. Daje ono możliwość testów zarówno w wersji mobilnej jak i desktopowej. Funkcją, jaka bardzo się przydaje, zwłaszcza jak trzeba wysłać raport z dostępności przełożonemu, to możliwość wygenerowania raportu w postaci pdf.
Jak używać Lighthouse?
Podobnie jak Wave taki i Lighthouse i dostępny z poziomu wtyczki. Możesz z niego skorzystać, instalując rozszerzenie Chrome lub korzystając ze zintegrowanych narzędzi DevTools w Chrome lub Edge. Aby uruchomić audyt, przejdź do strony internetowej, którą chcesz przetestować, a następnie kliknij ikonę Lighthouse.
Jakie błędy pokaże ci Lighthouse?
Ponieważ jest to narzędzie, które sprawdza wiele informacji nie tylko dostępność, nie jest ono wystarczająco precyzyjne. Podobnie jak w przypadku Wave narzędzie sprawdzi nam między innymi:
- kontrast,
- strukturę i semantykę,
- teksty alternatywne,
- aria,
- wykryje linki i napisy bez dostępnej nazwy.
axe DevTools
axe DevTools jest najdokładniejszym narzędziem automatycznym wykrywającym największą ilość błędów dostępności. Nawet w wersji darmowej.
Jak używać axe DevTools?
axe DevTools może używać na kilka sposobów. Pierwszy już znasz, jako rozszerzenie Chrome lub Firefox. Można go też zintegrować z CI/CD i wtedy automatyczne testy będą uruchamiane za każdym razem, kiedy zespół wypuszcza nową wersję strony.
Jakie błędy pokaże ci axe DevTools?
Wykrywa najwięcej problemów, takich jak:
- błędy ARIA,
- problemy z hierarchią nagłówków,
- focus management,
- interakcje,
- pola formularzy,
- role i pola obowiązkowe,
- błędy semantyczne.
W przypadku axe DevTool otrzymujemy również bardzo dobre wskazówki naprawy, konkretny kod, który trzeba zmienić.
Podsumowanie wybranych trzech narzędzi do testów automatycznych
| Cecha / Narzędzie | WAVE | Lighthouse | axe DevTools |
| Specjalizacja a11y | średnia | podstawowa | bardzo wysoka |
| Wizualne oznaczanie błędów na stronie | najlepsze | brak | tak ale mniej czytelne niż WAVE |
| Audyt SEO / Performance | brak | tak | brak |
| Integracja z CI/CD | brak | możliwa | tak |
Dokładność testów | średnie | dobre | bardzo dobre |
Poziom trudności | łatwy | średnia | trudniejsza |
Bezpłatne narzędzie do automatycznych testów dostępności w języku polskim
Wszystkie wymienione narzędzia do automatycznych testów dostępności WCAG mają jedną wadę, są w języku angielskim. Jeśli więc chcesz sprawdzić twoją stronę i otrzymać raport w języku polskim to pomocne będzie nasze autorskie narzędzie.
W raporcie znajdziesz:
- status dostępności Twojej strony
- liczbę błędów i testów zaliczonych
- 3 najpoważniejsze problemy, dla których otrzymujesz również wskazówki jak je naprawić.
W 3 prostych krokach wygenerujesz darmowy raport dostępności cyfrowej swojej strony:
- Wejdź na naszą stronę z narzędziem
- Wklej link do serwisu, który chcesz przetestować
- Poczekaj 2 minuty – raport w postaci pdf gotowy!
Powiązane artykuły
Bezpłatny raport dla Twojej strony internetowej
Dostępność cyfrowa z perspektywy dewelopera
Dostępność cyfrowa z perspektywy edytora stron
Podsumowanie
Czy jest możliwe samodzielne sprawdzenie strony pod kątem dostępności za pomocą testów automatycznych? Jest. Czy da nam to pełen obraz sytuacji, nie. Automatyczne testy dostępności WCAG pokrywają jedynie 40% a niektórzy twierdzą, że nawet 30% możliwych testów. Drugą kwestią jest też to, że oprócz tego, że puścimy testy automatyczne to jeszcze musimy umieć je zinterpretować. Do precyzyjnego audytu potrzebna jest więc wiedza ekspercka oraz testy z użytkownikami. Dopiero wtedy możemy powiedzieć, że strona jest sprawdzona pod kątem dostępności. Testy automatyczne to tylko część pracy, jaką trzeba wykonać. Są więc one dobrym startem. Nic nie szkodzi na przeszkodzie, żeby jednak sprawdzić sobie stronę samemu i zobaczyć ile pracy nas czeka. Takie testy pozwalają również oszacować skalę problemu, ale o jego rozwiązanie powinniśmy poprosić ekspertów.
