Інструменти тестування доступності та WCAG тестери: порівняння

Добрих інструментів для тестування доступності багато, і більшість із них безкоштовні. Вони відрізняються не стільки тим, що знаходять, скільки тим, де працюють (розширення для браузера, командний рядок, хмарний сервіс), який рушій правил використовують і хто читає результат: розробник, команда QA чи власник бізнесу. На цій сторінці порівняно інструменти, які шукають найчастіше, з фактами з їхніх офіційних сторінок, і пояснено, де місце Pandus.

Кожен інструмент на цій сторінці — автоматичний тестер. Жоден із них не може підтвердити, що сайт відповідає WCAG; вони знаходять частину проблем. Наші власні перевірки — це автоматична перевірка, а не повний аудит, і не юридична консультація.

Порівняльна таблиця

Ціни й функції змінюються; перш ніж вирішувати, перегляньте сторінку кожного постачальника.

WAVE

WAVE — набір інструментів оцінювання від WebAIM при Університеті штату Юта. Можна ввести URL на сайті або скористатися розширеннями для Chrome, Firefox і Edge. Розширення працює повністю у вашому браузері, тож годиться і для сторінок після входу, локальних файлів і динамічних сторінок. Результати з'являються значками на сторінці та в бічній панелі з помилками, помилками контрасту і попередженнями для ручної перевірки. Для великої кількості сторінок є API за підпискою і окремий рушій. Це популярний вибір для навчання, бо WAVE показує проблеми там, де вони є.

Lighthouse

Lighthouse — відкритий інструмент Google для оцінки якості сторінок. Запускайте його з вкладки Lighthouse у Chrome DevTools, з командного рядка або онлайн через PageSpeed Insights. Його оцінка доступності — зважене середнє аудитів «пройдено / не пройдено», що базуються на правилах axe; ручні перевірки на оцінку не впливають. Як швидкий сигнал це корисно, але оцінка 100 охоплює лише автоматичні аудити — вона не означає, що сторінка відповідає WCAG.

axe DevTools і axe-core

axe-core — відкритий рушій правил від Deque Systems, на якому побудовано багато інструментів, зокрема Pandus. axe DevTools — продуктова лінійка Deque навколо нього: розширення для браузера з безкоштовною версією, платні функції Pro, як-от покрокові тести, лінтер для VS Code та інтеграції для автотестів у CI.

Accessibility Insights for Web

Accessibility Insights — відкритий набір інструментів Microsoft. Розширення для Chrome і Edge пропонує FastPass, який за кілька хвилин знаходить поширені проблеми з великим впливом, і Assessment, що проводить людей зі знанням HTML через критерії WCAG 2.1 AA, зокрема ручні кроки. Є також версії для застосунків Windows.

IBM Equal Access Accessibility Checker

Набір Equal Access від IBM має відкритий код за ліцензією Apache-2.0. Тестер вбудовується в інструменти розробника Chrome, Firefox і Edge, а npm-пакет accessibility-checker запускає ті самі правила в CI із Selenium, Puppeteer або Playwright. Він використовує власний рушій правил IBM з наборами правил для WCAG 2.2, 2.1 і 2.0, тож є доброю другою думкою поруч з інструментом на основі axe.

Pa11y

Pa11y — сімейство безкоштовних інструментів командного рядка з відкритим кодом. Pa11y перевіряє одну сторінку; Pa11y CI проходить список URL і зроблений для конвеєрів. Він може запускати HTML_CodeSniffer (за замовчуванням) або axe-core.

BrowserStack Accessibility Testing

BrowserStack Accessibility Testing — комерційний сервіс із власним рушієм правил Spectra, розширенням для Chrome і Edge, сканером сайтів та інтеграцією з CI. За даними BrowserStack, його безкоштовний тариф включає необмежені сканування сайтів на вимогу, що охоплюють до п'яти унікальних сторінок. Він підходить командам, які вже користуються BrowserStack для кросбраузерного тестування.

Де місце Pandus

Pandus використовує той самий відкритий рушій axe-core, що й Lighthouse та axe DevTools. Різниця в тому, що відбувається навколо тесту:

• Кожна сторінка, щотижня. Тариф обходить увесь сайт за розкладом і показує, що з'явилося, що виправлено, і динаміку.
• Звіти для власників бізнесу. До кожної знахідки — картка правила простою мовою: що це означає для покупців, як виправити на Shopify, WooCommerce, PrestaShop чи Shoptet.
• Сім мов. Результати і звіти англійською, українською, німецькою, польською, чеською, румунською і російською.
• Зіставлення з EN 301 549. Кожне правило пов'язане з критерієм WCAG і пунктом EN 301 549 V3.2.1 і V4.1.1 — європейського стандарту, на який спирається Європейський акт про доступність. В Україні йому відповідає ДСТУ EN 301 549:2022.
• White-label для вебстудій. Звіти під брендом студії, див. Pandus для вебстудій.
• Безкоштовні інструменти. WCAG тестер для однієї сторінки, калькулятор контрасту, розширення для браузера для сторінок після входу і плагін для WordPress.

Якщо ви розробник і налагоджуєте один компонент, розширення для DevTools буде швидшим вибором. Якщо вам треба щотижня знати, чи не погіршився магазин клієнта, і пояснити це людині, яка не є розробником, — саме для цього зроблено Pandus.

Як поєднувати інструменти

1. Під час розробки: розширення або лінтер на основі axe плюс другий рушій (WAVE чи IBM) для неочевидних випадків.
2. У CI: Pa11y CI, npm-пакет IBM або axe-core у ваших end-to-end тестах.
3. Після запуску: щотижневий моніторинг усього сайту і звіти для власника.
4. Завжди: ручні тести з клавіатурою, збільшенням і екранним читачем — див. як тестувати сайт за WCAG. Для декларації відповідності замовте аудит доступності.

Відповіді на часті питання

Який WCAG тестер найкращий?

Залежить від завдання. Розширення для браузера WAVE, axe DevTools, Accessibility Insights чи IBM Equal Access підходять розробникам для перевірки однієї сторінки; Lighthouse дає швидку оцінку; Pa11y і npm-пакет IBM підходять для CI; сервіси моніторингу, як-от Pandus, щотижня перевіряють увесь сайт і звітують власникам.

Які інструменти тестування доступності безкоштовні?

WAVE онлайн і його розширення, Lighthouse, безкоштовне розширення axe DevTools, axe-core, Accessibility Insights, IBM Equal Access Accessibility Checker і Pa11y можна використовувати без оплати. BrowserStack має безкоштовний тариф з обмеженнями; Pandus безкоштовно перевіряє одну сторінку.

Чи дають WAVE, Lighthouse і axe DevTools однакові результати?

Не зовсім. Lighthouse, axe DevTools і Accessibility Insights використовують рушій axe-core, тож їхні автоматичні результати перетинаються; WAVE, IBM Equal Access і Pa11y за замовчуванням використовують власні правила. Два різні рушії можуть знайти трохи більше проблем.

Чи може якийсь інструмент підтвердити відповідність WCAG?

Ні. Кожен автоматичний інструмент перевіряє лише частину критеріїв успіху WCAG. Чистий результат — добрий знак, а не підтвердження; тести людиною з клавіатурою, збільшенням і екранним читачем однаково потрібні.

Яке місце серед них займає Pandus?

Pandus щотижня запускає axe-core на кожній сторінці сайту, зіставляє знахідки з WCAG і EN 301 549 і перетворює їх на звіти для власників бізнесу сімома мовами, з white-label для вебстудій. Це автоматична перевірка, а не повний аудит.

Джерела

• WebAIM, WAVE: https://wave.webaim.org/ і 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/ і https://github.com/microsoft/accessibility-insights-web
• IBM, Equal Access toolkit: https://github.com/IBMa/equal-access
• Pa11y: https://pa11y.org/ і https://github.com/pa11y/pa11y
• BrowserStack, Accessibility Testing: https://www.browserstack.com/accessibility-testing і https://www.browserstack.com/accessibility-testing/free-accessibility-testing-tools