Як перевірити доступність сайту: 10 безкоштовних інструментів

Перевірка доступності сайту — це процес виявлення порушень WCAG та інших стандартів доступності. На відміну від перевірки "uptime" сервера (чи працює сайт взагалі), перевірка доступності відповідає на питання: чи можуть люди з інвалідністю ним користуватися?

Увага: Якщо ви шукаєте "перевірка доступності сайту" в Google — більшість результатів показує сервіси моніторингу доступності (uptime). Ця стаття про a11y (accessibility) — доступність для людей з різними потребами.

Жоден автоматичний інструмент не виявляє всі помилки. Комбінація автоматики + ручного тестування покриває близько 80-90% реальних проблем. Решта виявляється лише під час тестування з реальними користувачами.

1. ЦМЦІ — безкоштовний аудит WCAG 2.2

Тип: Онлайн сервіс Посилання: /scan

ЦМЦІ (Центр моніторингу цифрової інклюзії) надає безкоштовний автоматизований аудит доступності вашого сайту за стандартом WCAG 2.2.

Що перевіряє:

Структуру заголовків та landmark-елементи
Alt-тексти зображень
Контраст кольорів тексту
Підписи форм та ARIA атрибути
Базові вимоги клавіатурної навігації
Атрибут lang документа
Понад 40 правил WCAG

Як використовувати:

Перейдіть на /scan
Введіть URL вашого сайту
Отримайте детальний звіт з класифікацією помилок за критичністю
Кожна помилка містить опис, WCAG критерій та рекомендацію

Плюси: Україномовний інтерфейс, звіт орієнтований на українське законодавство (КМУ 757, ДСТУ EN 301 549), безкоштовно. Мінуси: Автоматизований — сканує лише головну сторінку.

2. axe DevTools (Chrome extension)

Тип: Розширення браузера (Chrome, Firefox, Edge) Де завантажити: Chrome Web Store → "axe DevTools"

axe DevTools — найпопулярніший інструмент серед розробників. Розроблений Deque Systems, базується на бібліотеці axe-core, яка використовується в тисячах CI/CD pipeline по всьому світу.

Що перевіряє:

50+ правил WCAG 2.1/2.2
Рівні A і AA
Не дає хибних спрацьовувань (zero false positives — ключова перевага)

Як використовувати:

Встановіть розширення
Відкрийте DevTools (F12) → вкладка "axe DevTools"
Натисніть "Analyze"
Перегляньте результати: Violations → Needs Review → Best Practices

Плюси: Нуль хибних спрацьовувань, детальний опис кожної помилки з кодом, безкоштовна базова версія. Мінуси: Платна версія для повного функціоналу (Intelligent Guided Tests).

Порада для розробників: axe-core доступний як npm-пакет для інтеграції в Jest, Cypress, Playwright — автоматична перевірка доступності в CI/CD.

3. WAVE Web Accessibility Evaluator

Тип: Онлайн або розширення браузера Де: wave.webaim.org або Chrome/Firefox extension

WAVE від WebAIM відображає помилки доступності прямо на сторінці у вигляді іконок. Чудовий для навчання — ви бачите проблему в контексті.

Що перевіряє:

Структурні елементи (landmarks, заголовки, списки)
Контраст (з візуальним відображенням)
ARIA атрибути
Форми та посилання
Зображення та alt-тексти

Як використовувати:

Введіть URL на wave.webaim.org або активуйте розширення на потрібній сторінці
Іконки на сторінці позначають помилки (червоні), попередження (жовті) та елементи структури (синьо-зелені)
Клікніть на іконку → опис проблеми та код елемента

Плюси: Наочна візуалізація прямо на сторінці, хороший для навчання команди. Мінуси: Не працює на сторінках за авторизацією (лише онлайн-версія), може уповільнювати сторінку.

4. Lighthouse Accessibility

Тип: Вбудований у Chrome DevTools Де: Chrome → F12 → Lighthouse → Accessibility

Lighthouse — відкритий інструмент Google для аудиту веб-продуктивності, SEO та доступності. Дає оцінку від 0 до 100.

Що перевіряє:

Базові перевірки WCAG (використовує axe-core всередині)
Оцінку 0-100 для орієнтування
Конкретні рекомендації з покращення

Як використовувати:

DevTools (F12) → Lighthouse
Оберіть категорію "Accessibility"
Натисніть "Generate report"
Перегляньте результати

Плюси: Вбудований у Chrome — нічого встановлювати, зрозуміла числова оцінка, інтеграція з PageSpeed Insights. Мінуси: Оцінка 100 не означає "повна доступність" — виявляє лише автоматично перевіряємі помилки.

Важливо: Lighthouse 100 ≠ WCAG AA. Це лише орієнтир. Сайт з оцінкою 100 може мати десятки реальних проблем, які автоматика не виявляє.

5. Pa11y (CLI)

Тип: Командний рядок (CLI) / Node.js Встановлення: npm install -g pa11y

Pa11y — інструмент командного рядка для автоматизованого тестування доступності. Ідеальний для інтеграції в CI/CD pipeline.

Як використовувати:

# Базова перевірка
pa11y https://example.com

# Перевірка з конфігурацією
pa11y --standard WCAG2AA https://example.com

# Перевірка з репортом у JSON
pa11y --reporter json https://example.com > report.json

# Запуск для кількох URL
pa11y-ci --sitemap https://example.com/sitemap.xml

Приклад виводу:

Results for URL: https://example.com
 • Error: Image missing alternative text.
   (WCAG2AA.Principle1.Guideline1_1.1_1_1.H37)
   <img src="banner.jpg">

Плюси: Ідеальний для CI/CD, підтримує sitemap, можна запускати на тисячах URL. Мінуси: Потребує Node.js, складніший для початківців.

6. Контраст-чекери (WebAIM, Colour Contrast Checker)

Тип: Онлайн-інструменти

WebAIM Contrast Checker (webaim.org/resources/contrastchecker/):

Введіть HEX-коди фону і тексту
Миттєво показує співвідношення контрасту та статус (pass/fail) для AA і AAA
Пропонує альтернативні кольори, що відповідають вимогам

Colour Contrast Analyser (TPGi):

Безкоштовний десктопний застосунок (Windows і Mac)
Піпетка — виміряйте контраст будь-якого пікселя на екрані
Ідеальний для перевірки існуючих дизайнів

Як перевірити весь сайт:

axe DevTools показує всі помилки контрасту на сторінці
WAVE виділяє низькоконтрастні елементи кольором

WCAG: 1.4.3 Contrast Minimum (AA): текст 4.5:1, великий текст 3:1.

7. Screen reader testing (NVDA, VoiceOver)

Тип: Скрін-рідери (програми зчитування екрана)

Автоматичні інструменти виявляють ~40% проблем. Реальний досвід незрячого користувача — лише скрін-рідер.

NVDA (Windows):

Безкоштовний скрін-рідер з відкритим кодом
Завантажити: nvaccess.org
Детальна інструкція: Як тестувати зі скрін-рідером NVDA

VoiceOver (Mac та iOS):

Вбудований у macOS та iOS
Mac: Command+F5 для увімкнення
iOS: Налаштування → Доступність → VoiceOver

TalkBack (Android):

Вбудований в Android
Налаштування → Доступність → TalkBack

Базовий тест NVDA:

Запустіть NVDA → почуєте привітання
Відкрийте браузер, перейдіть на ваш сайт
Tab — переміщення між елементами
H — перехід до наступного заголовку
F — перехід до наступного поля форми
Спробуйте виконати ключові дії: знайти інформацію, заповнити форму, оформити замовлення

8. Keyboard-only testing

Тип: Ручний метод (нічого встановлювати)

Найпростіший і найдієвіший ручний тест — відкладіть мишу і спробуйте скористатися сайтом лише клавіатурою.

Клавіші:

Клавіша	Дія
`Tab`	Наступний інтерактивний елемент
`Shift+Tab`	Попередній елемент
`Enter`	Активувати посилання / кнопку
`Space`	Активувати кнопку / checkbox
`Стрілки`	Навігація всередині компонентів
`Escape`	Закрити модальне вікно / dropdown

Що перевіряти:

Чи видно фокус (виділення)?
Чи охоплені всі інтерактивні елементи?
Чи немає пасток (застряє фокус)?
Чи можна закрити модальне вікно?

9. HeadingsMap (Chrome extension)

Тип: Розширення браузера

HeadingsMap показує структуру заголовків сторінки у вигляді ієрархічного дерева. Миттєво виявляє:

Пропуски у рівнях (H1→H3 без H2)
Декілька H1 на сторінці
Відсутність заголовків у секціях

Як використовувати:

Встановіть "HeadingsMap" з Chrome Web Store
Клікніть на іконку розширення
Панель показує всі заголовки: правильні (зелені) та з помилками (червоні/жовті)

10. HTML Validator (W3C)

Тип: Онлайн Де: validator.w3.org

W3C Markup Validation Service перевіряє HTML на відповідність специфікації. Невалідний HTML може спричиняти проблеми доступності, особливо для скрін-рідерів.

Типові помилки, що впливають на доступність:

Незакриті теги
Дублікати id атрибутів (порушує ARIA)
Відсутність lang на <html>
Некоректне вкладення елементів

Як використовувати:

Перейдіть на validator.w3.org
Введіть URL або вставте HTML-код
Перегляньте помилки та попередження

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

Інструмент	Тип	Автоматичний	WCAG рівень	Для кого
ЦМЦІ /scan	Онлайн	Так	WCAG 2.2 AA	Всі
axe DevTools	Extension	Так	WCAG 2.1/2.2	Розробники
WAVE	Онлайн/Extension	Так	WCAG	Дизайнери, розробники
Lighthouse	DevTools	Так	Частково	Розробники
Pa11y	CLI	Так	WCAG 2.0/2.1	DevOps, розробники
Contrast Checker	Онлайн	Так (контраст)	1.4.3	Дизайнери
NVDA	Screen reader	Ні (ручний)	Весь досвід	QA, розробники
Keyboard test	Ручний	Ні	2.1	Всі
HeadingsMap	Extension	Так (заголовки)	1.3.1	Всі
W3C Validator	Онлайн	Так (HTML)	4.1	Розробники

Як перевірити доступність сайту: 10 безкоштовних інструментів

Як перевірити доступність сайту: 10 безкоштовних інструментів

1. ЦМЦІ — безкоштовний аудит WCAG 2.2

2. axe DevTools (Chrome extension)

3. WAVE Web Accessibility Evaluator

4. Lighthouse Accessibility

5. Pa11y (CLI)

6. Контраст-чекери (WebAIM, Colour Contrast Checker)

7. Screen reader testing (NVDA, VoiceOver)

8. Keyboard-only testing

9. HeadingsMap (Chrome extension)

10. HTML Validator (W3C)

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

Рекомендований робочий процес

Корисні посилання

WCAG 2.2 за 30 днів: чек-ліст для розробників

Внутрішній a11y-аудит командою розробки: 7 кроків

Скрін-рідери з українською: NVDA, VoiceOver