Часто порушення доступності (a11y) спливають лише на етапі ручного тестування або, що гірше, в продакшні. Кожен пропущений критичний баг — наприклад, відсутність alt у зображення або несправна навігація з клавіатури — може коштувати репутації та великих штрафів. Ми автоматизуємо перевірку WCAG 2.1/2.2 через бібліотеку axe-core від Deque Systems, щоб виловлювати такі проблеми на етапі CI/CD. Бібліотека знаходить близько 57% порушень автоматично, залишаючи решту на ручний аудит. Досвід показує: після впровадження axe-core кількість регресій за доступністю падає на 70–80%. Автоматичне тестування в 10 разів швидше за ручне.
Як axe-core допомагає автоматизувати перевірку доступності?
axe-core працює як у браузері, так і в Node.js, і легко вбудовується в існуючі тестові фреймворки. В основі лежать правила стандарту WCAG 2.1, згруповані за тегами (wcag2a, wcag2aa, wcag21aa). Для кожного елемента сторінки бібліотека перевіряє: контрастність, семантику заголовків, доступність форм, ARIA-атрибути та багато іншого. Результат — структурований звіт з типом, рівнем серйозності та посиланням на елемент.
Інтеграція з Jest + Testing Library
npm install --save-dev jest-axe @testing-library/react // __tests__/accessibility.test.tsx import { render } from '@testing-library/react'; import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations); describe('Доступність компонентів', () => { it('Button не має порушень', async () => { const { container } = render(<Button>Відправити</Button>); const results = await axe(container); expect(results).toHaveNoViolations(); }); it('Form не має порушень', async () => { const { container } = render( <form> <label htmlFor="email">Email</label> <input id="email" type="email" /> <button type="submit">Увійти</button> </form> ); const results = await axe(container, { rules: { 'color-contrast': { enabled: true }, 'label': { enabled: true }, }, }); expect(results).toHaveNoViolations(); }); }); Інтеграція з Playwright
// tests/accessibility.spec.ts import { test, expect } from '@playwright/test'; import AxeBuilder from '@axe-core/playwright'; test('Головна сторінка проходить WCAG 2.1 AA', async ({ page }) => { await page.goto('/'); const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) .exclude('.cookie-banner') // Виключаємо компоненти третіх сторін .analyze(); expect(results.violations).toEqual([]); }); test('Форма реєстрації — доступність', async ({ page }) => { await page.goto('/register'); const results = await new AxeBuilder({ page }) .include('#registration-form') .analyze(); // Детальний звіт при падінні if (results.violations.length > 0) { console.table(results.violations.map(v => ({ id: v.id, impact: v.impact, description: v.description, nodes: v.nodes.length, }))); } expect(results.violations).toEqual([]); }); Чому варто інтегрувати axe-core в CI/CD?
Ручну перевірку доступності складно масштабувати: на один аудит сторінки йде 2–3 години. Інтеграція axe-core в CI/CD (наприклад, через Playwright тест перед кожним деплоєм) автоматизує цю перевірку. Ми гарантуємо, що критичні порушення не потраплять у продакшн. В одному з проектів з 500+ сторінками після налаштування axe-core кількість регресій по a11y знизилась з 30 до 2–3 на місяць. Вартість впровадження — від 4000 грн.
Порівняння ручного та автоматичного аудиту
| Характеристика | Ручний аудит | axe-core |
|---|---|---|
| Час на сторінку | 15–30 хвилин | 5–10 секунд |
| Охоплення критичних порушень | 100% (з кваліфікованим спеціалістом) | ~90% |
| Частота запуску | Раз на спринт | При кожному коміті |
| Точність | Залежить від втоми | Стабільна |
Рівні порушень та їх вплив
| Impact | Значення | Приклад | Сертифікація WCAG |
|---|---|---|---|
| critical | Блокує доступ | Зображення без alt | Не проходить жоден рівень |
| serious | Значно заважає | Форма без label | Не проходить AA |
| moderate | Ускладнює використання | Недостатній контраст | Може проходити A, але не AA |
| minor | Невелика незручність | Неправильний lang | Проходить, але краще виправити |
З чого почати: покрокова інструкція
- Встановіть пакет jest-axe для модульного тестування компонентів.
- Налаштуйте тести з використанням matcher toHaveNoViolations.
- Інтегруйте axe-core з Playwright для e2e-тестів критичних сторінок.
- Додайте тести в CI/CD пайплайн (GitHub Actions, GitLab CI).
- Налаштуйте сповіщення про падіння.
Типові помилки при налаштуванні axe-core
При першому запуску axe-core часто видає хибні спрацьовування на сторонніх iframe, cookie-банерах або динамічно завантажуваному контенті. Щоб уникнути шуму, налаштуйте винятки через exclude() та задайте точні теги перевірки (наприклад, wcag2aa). Також важливо правильно сконфігурувати правила: вимкнути ті, що не застосовні до проекту (наприклад, color-contrast для компонентів з кастомними кольорами).
Чек-лист впровадження axe-core
- Виключити iframe та віджети третіх сторін.
- Налаштувати кастомні правила для специфічних компонентів.
- Інтегрувати з Jest для модульних тестів компонентів.
- Інтегрувати з Playwright для e2e тестів критичних сторінок.
- Додати запуск в CI/CD (GitHub Actions, GitLab CI).
- Налаштувати сповіщення про падіння.
Що входить в роботу (під ключ)
- Документація: звіт про поточні порушення, список правил, винятки для сторонніх компонентів.
- Інтеграція: налаштування axe-core в Jest (модульні тести компонентів), Playwright (e2e-тести сторінок) та Storybook (візуальна інспекція) — при необхідності.
- CI/CD пайплайн: додавання тестів доступності в GitLab CI, GitHub Actions або аналогічні.
- Навчання команди: базова лекція (1–2 години) по WCAG та роботі з axe-core.
- Підтримка: консультації з виправлення виявлених порушень протягом місяця після впровадження.
Терміни
Налаштування axe-core в Jest + Playwright, покриття ключових сторінок та компонентів: 2–3 робочих дні. Якщо проект використовує нестандартні фреймворки (Angular, Vue 3 з SSR) або потребує глибокої кастомізації правил, термін може збільшитися до 5 днів. Ми працюємо за передоплатою 50%, остаточна вартість розраховується індивідуально після аудиту вашого коду. Оцінимо ваш проект безкоштовно.
Наша команда має 5+ років досвіду в a11y-аудиті та понад 50 успішних проектів. Пишіть нам для консультації з впровадження axe-core у ваш проект. Замовте аудит доступності — це знизить ризики та заощадить час.