Автоматизація тестування доступності в CI/CD з axe-core та Playwright
Кожен другий PR на фронтенд приносить регресію доступності: alt-тексти зникають, контрастність ламається, фокус збивається. Ручна перевірка забирає години, а запуск у прод з порушенням WCAG 2.1 загрожує штрафами та втратою аудиторії. Ми автоматизуємо контроль: інтегруємо axe-core, Playwright та Lighthouse CI прямо у ваш CI/CD пайплайн. Результат — кожен коміт перевіряє доступність, і збірка падає при нових порушеннях. Економія на QA суттєва і окупає впровадження протягом кількох місяців.
Чому автоматизація тестування доступності скорочує регресії?
Регресії WCAG виникають непомітно: розробник змінює колір кнопки, додає SVG-іконку без title, або обгортає форму в неправильний <fieldset>. Ручний аудит пропускає такі дрібниці. Автоматизація дає миттєвий зворотний зв'язок. На одному з проєктів ми знизили час рев'ю доступності з 4 годин до 10 хвилин — тести знайшли 80% помилок до того, як код дійшов до QA. Автоматичні перевірки масштабуються: можна тестувати десятки сторінок за хвилини.
Як ми автоматизуємо: покроковий план
- Аудит поточного стану: прогоняємо Lighthouse та Pa11y на всіх сторінках, фіксуємо всі порушення і складаємо карту критичних шляхів.
- Конфігурація інструментів: встановлюємо axe-core для Jest, @axe-core/playwright для Playwright, налаштовуємо Lighthouse CI з бюджетом 90+.
- Написання тестів: покриваємо компоненти через Storybook (100% візуальних компонентів), пишемо E2E-сценарії для ключових сторінок (головна, каталог, форма, checkout).
- Інтеграція звітів: налаштовуємо автоматичний коментар до PR з таблицею результатів — зелена збірка або посилання на звіт з помилками.
Як налаштувати тести доступності на кожен коміт?
Процес складається з чотирьох етапів: аудит поточного стану, конфігурація інструментів, написання тестів та інтеграція звітів. Ми використовуємо наступний стек:
- axe-core (jest) — компонентне тестування React/Vue компонентів через Storybook (100% покриття).
- Playwright + @axe-core/playwright — E2E-тести ключових сторінок (головна, каталог, форма, checkout).
- Lighthouse CI — сторінковий аудит з бюджетом не менше 90/100 по accessibility.
- Pa11y — щотижневе сканування всіх публічних сторінок по sitemap.
| Інструмент | Рівень | Швидкість | Що перевіряє |
|---|---|---|---|
| axe-core (jest) | Компонентний | <1 сек | WCAG 2.1 AA, aria, roles |
| Playwright + axe | E2E | ~2 хв/сторінку | Взаємодії, модалки, анімації |
| Lighthouse CI | Сторінковий | ~1 хв | + Performance, SEO, Best Practices |
| Pa11y | Повний аудит | ~10 хв | Всі сторінки, 400+ правил |
Порівняно з валідатором W3C, комбінація Playwright і axe-core знаходить у 3 рази більше помилок, пов'язаних з динамічним контентом. А автоматичний пайплайн на GitHub Actions працює в 50 разів швидше ручного прогону.
Приклад конфігурації GitHub Actions
# .github/workflows/accessibility.yml
name: Accessibility Tests
on:
pull_request:
branches: [main]
schedule:
- cron: '0 9 * * 1' # Каждый понедельник в 9:00
jobs:
component-a11y:
name: Component Accessibility (Jest)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci
- run: npm test -- --testPathPattern="a11y|accessibility" --coverage=false
env:
CI: true
e2e-a11y:
name: E2E Accessibility (Playwright)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci
- run: npx playwright install chromium --with-deps
- name: Start app
run: npm run build && npm start &
- name: Wait for app
run: npx wait-on http://localhost:3000 --timeout 60000
- name: Run accessibility tests
run: npx playwright test tests/accessibility/
- uses: actions/upload-artifact@v4
if: failure()
with:
name: playwright-report
path: playwright-report/
lighthouse-a11y:
name: Lighthouse Audit
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci && npm run build
- name: Run Lighthouse CI
uses: treosh/lighthouse-ci-action@v10
with:
urls: |
http://localhost:3000
http://localhost:3000/catalog
budgetPath: .lighthouserc.json
temporaryPublicStorage: true
env:
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
Playwright: тест доступності сторінок
// tests/accessibility/pages.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
const PAGES_TO_TEST = [
{ path: '/', name: 'Главная' },
{ path: '/catalog', name: 'Каталог' },
{ path: '/contact', name: 'Контакты' },
];
for (const { path, name } of PAGES_TO_TEST) {
test(`${name}: WCAG 2.1 AA`, async ({ page }) => {
await page.goto(path);
await page.waitForLoadState('networkidle');
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa'])
.analyze();
// Детальный вывод нарушений
if (results.violations.length > 0) {
const summary = results.violations.map(v =>
`[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} элементов)`
).join('\n');
console.error(`Нарушения на "${name}":\n${summary}`);
}
expect(results.violations).toHaveLength(0);
});
}
Репортинг у Pull Request
# Комментарий к PR с результатами аудита
- name: Comment PR
uses: thollander/actions-comment-pull-request@v2
if: always()
with:
message: |
## Отчёт доступности
| Инструмент | Статус |
|---|---|
| Jest + axe | ${{ job.status == 'success' && '✅ Пройден' || '❌ Ошибки' }} |
| Playwright | ${{ needs.e2e-a11y.result == 'success' && '✅ Пройден' || '❌ Ошибки' }} |
| Lighthouse | ${{ needs.lighthouse-a11y.result == 'success' && '✅ ≥ 90' || '❌ < 90' }} |
Порівняння CI-платформ для тестів доступності
| Платформа | Інтеграція з axe | Швидкість запуску | Ціна |
|---|---|---|---|
| GitHub Actions | Готова action | ~30 сек | Безкоштовно для публічних репо |
| GitLab CI | Через скрипти | ~40 сек | Безкоштовно до 400 хв |
| Jenkins | Плагіни | ~1 хв | Безкоштовно |
Що входить у налаштування пайплайну?
- Аудит поточного стану доступності та виявлення критичних сторінок.
- Налаштування CI/CD пайплайну під ваш стек (React, Vue, Angular або статичний сайт).
- Написання тестів: компонентні (Storybook), E2E (Playwright), сторінковий аудит (Lighthouse).
- Інтеграція звітів у PR (автоматичний коментар з таблицею результатів).
- Документування винятків для сторонніх віджетів.
- Навчання команди: як читати звіти, додавати нові тести, обробляти хибні спрацьовування.
- Підтримка протягом одного місяця після впровадження.
Терміни та вартість
Повний CI/CD пайплайн доступності з Jest, Playwright, Lighthouse та звітом у PR: 3–4 робочі дні. Вартість розраховується індивідуально. При необхідності розширити тести на всі сторінки або додати кастомні правила — термін може збільшитися до тижня.
Результат та гарантії
Наші інженери мають сертифікацію з WCAG та понад 7 років досвіду у веб-розробці. Ми впровадили подібні пайплайни для понад 30 клієнтів — усі досягли стабільного проходження аудиту. Гарантуємо, що після налаштування ви отримаєте:
- Зниження часу ручного QA на 60–80%.
- Виявлення регресій до деплою.
- Підтримання Core Web Vitals на високому рівні.
Оцінимо ваш проєкт за 1 день — зв'яжіться з нами, щоб отримати консультацію. Замовте впровадження пайплайну і забудьте про регресії доступності.