Narzędzia do testowania dostępności i WCAG checkery – porównanie

Dobrych narzędzi do testowania dostępności jest wiele, a większość z nich jest darmowa. Różnią się nie tyle tym, co znajdują, ile tym, gdzie działają (rozszerzenie przeglądarki, wiersz poleceń, usługa w chmurze), jakiego silnika reguł używają i kto czyta wynik: programista, zespół QA czy właściciel firmy. Ta strona porównuje narzędzia, których szuka się najczęściej, na podstawie informacji z ich oficjalnych stron, i wyjaśnia, gdzie mieści się Pandus.

Każde narzędzie na tej stronie to tester automatyczny. Żadne z nich nie potwierdzi, że serwis spełnia WCAG – znajdują część problemów. Nasze własne testy to automatyczna kontrola, a nie pełny audyt, i nie stanowią porady prawnej.

Tabela porównawcza

Ceny i funkcje się zmieniają; przed decyzją warto sprawdzić stronę każdego dostawcy.

WAVE

WAVE to zestaw narzędzi do oceny dostępności od WebAIM z Utah State University. Adres URL można wpisać na stronie lub skorzystać z rozszerzeń dla Chrome, Firefoksa i Edge. Rozszerzenie działa w całości w przeglądarce, więc sprawdza też strony po zalogowaniu, pliki lokalne i strony dynamiczne. Wyniki pojawiają się jako ikony na stronie i w panelu bocznym z błędami, błędami kontrastu i alertami do ręcznej weryfikacji. Dla wielu stron dostępne jest API w subskrypcji i samodzielny silnik. To popularny wybór do nauki, bo pokazuje problemy tam, gdzie występują.

Lighthouse

Lighthouse to otwarte narzędzie Google do oceny jakości stron. Uruchamia się je z karty Lighthouse w Chrome DevTools, z wiersza poleceń lub online przez PageSpeed Insights. Wynik dostępności to średnia ważona testów typu „spełnia / nie spełnia” opartych na regułach axe; testy ręczne nie wpływają na wynik. To przydatny szybki sygnał, ale wynik 100 obejmuje tylko testy automatyczne – nie oznacza, że strona spełnia WCAG.

axe DevTools i axe-core

axe-core to otwarty silnik reguł firmy Deque Systems, na którym opiera się wiele narzędzi, w tym Pandus. axe DevTools to linia produktów Deque zbudowana wokół niego: rozszerzenie przeglądarki w wersji darmowej, płatne funkcje Pro, takie jak testy prowadzone, linter dla VS Code i integracje z testami automatycznymi w CI.

Accessibility Insights for Web

Accessibility Insights to otwarty zestaw narzędzi Microsoftu. Rozszerzenie dla Chrome i Edge oferuje FastPass, który w kilka minut znajduje częste problemy o dużym wpływie, oraz Assessment, który prowadzi osoby znające HTML przez kryteria WCAG 2.1 AA, łącznie z krokami ręcznymi. Istnieją też wersje dla aplikacji Windows.

IBM Equal Access Accessibility Checker

Zestaw Equal Access IBM jest otwarty na licencji Apache-2.0. Checker integruje się z narzędziami deweloperskimi Chrome, Firefoksa i Edge, a pakiet npm accessibility-checker uruchamia te same reguły w CI z Selenium, Puppeteer lub Playwright. Korzysta z własnego silnika reguł IBM, z zestawami reguł dla WCAG 2.2, 2.1 i 2.0, więc jest dobrą drugą opinią obok narzędzia opartego na axe.

Pa11y

Pa11y to rodzina darmowych, otwartych narzędzi wiersza poleceń. Pa11y testuje jedną stronę; Pa11y CI przechodzi przez listę adresów URL i jest przeznaczony do potoków. Może korzystać z HTML_CodeSniffer (domyślnie) lub z axe-core.

BrowserStack Accessibility Testing

BrowserStack Accessibility Testing to komercyjna usługa z własnym silnikiem reguł Spectra, rozszerzeniem dla Chrome i Edge, skanerem stron i integracją z CI. Według BrowserStack darmowy plan obejmuje nieograniczone skany na żądanie, obejmujące do pięciu unikalnych stron. Pasuje do zespołów, które już korzystają z BrowserStack do testów w różnych przeglądarkach.

Gdzie mieści się Pandus

Pandus korzysta z tego samego otwartego silnika axe-core co Lighthouse i axe DevTools. Różnica polega na tym, co dzieje się wokół testu:

• Każda strona, co tydzień. Plan przegląda cały serwis według harmonogramu i pokazuje, co nowego, co naprawiono i jaki jest trend.
• Raporty dla właścicieli firm. Każde znalezisko ma kartę reguły prostym językiem: co oznacza dla klientów i jak to naprawić w Shopify, WooCommerce, PrestaShop lub Shoptet.
• Siedem języków. Wyniki i raporty po angielsku, ukraińsku, niemiecku, polsku, czesku, rumuńsku i rosyjsku.
• Mapowanie na EN 301 549. Każda reguła prowadzi do kryterium WCAG i punktu normy EN 301 549 V3.2.1 i V4.1.1, czyli europejskiej normy, na której opiera się Europejski akt o dostępności.
• White-label dla agencji. Raporty pod marką agencji, zob. Pandus dla agencji.
• Darmowe narzędzia. WCAG checker dla jednej strony, sprawdzanie kontrastu, rozszerzenie do przeglądarki dla stron po zalogowaniu i wtyczka WordPress.

Programiście, który debuguje jeden komponent, szybciej posłuży rozszerzenie DevTools. Jeśli natomiast trzeba co tydzień wiedzieć, czy sklep klienta się nie pogorszył, i wyjaśnić to komuś, kto nie jest programistą – do tego zbudowano Pandus.

Jak łączyć narzędzia

1. W trakcie developmentu: rozszerzenie lub linter oparte na axe oraz drugi silnik (WAVE lub IBM) dla niejasnych przypadków.
2. W CI: Pa11y CI, pakiet npm IBM lub axe-core w testach end-to-end.
3. Po starcie: cotygodniowy monitoring całego serwisu i raporty dla właściciela.
4. Zawsze: testy ręczne klawiaturą, powiększeniem i czytnikiem ekranu – zob. jak testować WCAG. Do deklaracji zgodności warto zlecić audyt dostępności.

Najczęstsze pytania

Jaki WCAG checker jest najlepszy?

To zależy od zadania. Rozszerzenia przeglądarki, takie jak WAVE, axe DevTools, Accessibility Insights czy IBM Equal Access, sprawdzają się u programistów testujących jedną stronę; Lighthouse daje szybki wynik punktowy; Pa11y i pakiet npm IBM pasują do potoków CI; usługi monitoringu, takie jak Pandus, co tydzień sprawdzają całe serwisy i raportują właścicielom.

Które narzędzia do testowania dostępności są darmowe?

Bez opłat można używać WAVE online i jego rozszerzeń, Lighthouse, darmowego rozszerzenia axe DevTools, axe-core, Accessibility Insights, IBM Equal Access Accessibility Checker i Pa11y. BrowserStack ma darmowy plan z ograniczeniami; Pandus bezpłatnie sprawdza jedną stronę.

Czy WAVE, Lighthouse i axe DevTools dają te same wyniki?

Nie do końca. Lighthouse, axe DevTools i Accessibility Insights korzystają z silnika axe-core, więc ich wyniki automatyczne się pokrywają; WAVE, IBM Equal Access i Pa11y domyślnie używają własnych reguł. Uruchomienie dwóch silników może wyłapać kilka dodatkowych problemów.

Czy jakiekolwiek narzędzie potwierdzi zgodność z WCAG?

Nie. Każde narzędzie automatyczne sprawdza tylko część kryteriów sukcesu WCAG. Czysty wynik to dobry znak, a nie potwierdzenie; nadal potrzebne są testy klawiaturą, powiększeniem i czytnikiem ekranu wykonywane przez człowieka.

Gdzie w tym zestawieniu jest Pandus?

Pandus co tydzień uruchamia axe-core na każdej stronie serwisu, przypisuje znaleziska do WCAG i EN 301 549 i zamienia je w raporty dla właścicieli firm w siedmiu językach, z opcją white-label dla agencji. To automatyczna kontrola, a nie pełny audyt.

Źródła

• WebAIM, WAVE: https://wave.webaim.org/ i https://wave.webaim.org/extension/
• Chrome for Developers, Lighthouse overview: https://developer.chrome.com/docs/lighthouse/overview
• Chrome for Developers, Lighthouse accessibility scoring: https://developer.chrome.com/docs/lighthouse/accessibility/scoring
• Deque, axe DevTools: https://www.deque.com/axe/devtools/
• Microsoft, Accessibility Insights: https://accessibilityinsights.io/ i https://github.com/microsoft/accessibility-insights-web
• IBM, Equal Access toolkit: https://github.com/IBMa/equal-access
• Pa11y: https://pa11y.org/ i https://github.com/pa11y/pa11y
• BrowserStack, Accessibility Testing: https://www.browserstack.com/accessibility-testing i https://www.browserstack.com/accessibility-testing/free-accessibility-testing-tools