Резин проблем доступності? Автоматизуйте аудит з Pa11y
Ви витратили тижні на верстку, а клієнт на скринридері не бачить кнопку «Купити». Або гірше — отримали претензію від Роскомнадзору за невідповідність WCAG 2.1. Ручна перевірка 500 сторінок — це дні роботи QA. Pa11y вирішує проблему: запускається в CLI, читає sitemap.xml і видає звіт по всіх сторінках за один прохід. Ми використовуємо Pa11y в CI/CD більше 5 років на 50+ проектах — ділимося досвідом. Автоматизація перевірки доступності веб-сайту з Pa11y скорочує час аудиту на 70%, а вартість обслуговування знижується за рахунок раннього виявлення багів. Оцініть економію: на проекті з 2000 сторінок ми скоротили аудит з 3 днів до 2 годин і знайшли 47 критичних помилок, які пропустили QA. Вартість базового налаштування – від 5000 грн. Економія на аудиті – до 3000 доларів на рік (залежить від обсягу).
Чому варто автоматизувати тестування доступності?
Без автоматики ви пропустите 30–50% порушень. Pa11y перевіряє кольоровий контраст, alt-тексти, ARIA-атрибути, навігацію з клавіатури. Ми налаштовуємо його так, щоб він не пропускав критичні помилки, але ігнорував хибні спрацьовування (наприклад, контраст на заблокованих елементах). Типові проблеми: відсутність alt у зображень, неправильні ARIA-ролі, низький контраст тексту. Автоматизація доступності (a11y testing) знижує витрати на аудит і прискорює релізи. Pa11y в 2 рази швидше за axe-core при перевірці всього сайту через sitemap.
Як інтегрувати Pa11y в CI/CD?
Процес налаштування займає 1–2 дні і включає п'ять кроків:
- Аналіз — збираємо URL з sitemap.xml, визначаємо стандарт (зазвичай WCAG 2.1 AA).
- Конфігурація — створюємо
.pa11yci.jsonз потрібними параметрами та винятками. - Інтеграція — додаємо команду
pa11y-ciу ваш пайплайн (GitLab CI, GitHub Actions, Jenkins). - Тестування — запускаємо пробний аудит, коригуємо хибні спрацьовування.
- Документація — описуємо процес роботи для команди.
Аналіз та конфігурація
Процес починається з аналізу вашого сайту: збираємо список URL з sitemap.xml, шотів. Визначаємо стандарт (зазвичай WCAG2AA), таймаути, винятки. На виході — .pa11yci.json:
Приклад конфігурації .pa11yci.json
{
"defaults": {
"standard": "WCAG2AA",
"timeout": 30000,
"wait": 1000,
"ignore": [
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail"
],
"chromeLaunchConfig": {
"args": ["--no-sandbox", "--disable-setuid-sandbox"]
}
},
"urls": [
"https://example.com",
"https://example.com/about",
"https://example.com/contact",
{
"url": "https://example.com/login",
"actions": [
"wait for element #login-form to be visible"
]
}
]
}
Інтеграція в пайплайн
Додаємо крок в CI: на GitLab — pa11y-ci --config .pa11yci.json --threshold 5, на GitHub Actions — аналогічно. Параметр --threshold задає допустиму кількість помилок. Строгий режим (--threshold 0) означає, що пайплайн впаде при будь-якій помилці.
Читання з sitemap.xml
pa11y-ci --sitemap https://example.com/sitemap.xml \
--sitemap-find "https://example.com" \
--sitemap-replace "http://localhost:3000" \
--threshold 0
Як ігнорувати хибні спрацьовування?
Pa11y іноді скаржиться на контраст для disabled-елементів або на ARIA-ролі, задані фреймворком. Ми додаємо ignore-список у конфіг — це правка під ваш UI-кіт. Наприклад:
"ignore": [
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail",
"WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputSearch.Name"
]
Це усуває до 90% хибних спрацьовувань без втрати критичних перевірок.
Порівняння Pa11y та axe-core
| Можливість | Pa11y | axe-core |
|---|---|---|
| Пакетний аудит сайту | Нативно (sitemap, CLI) | Потрібна обгортка (pa11y-ci, puppeteer) |
| Інтеграція з тест-фреймворками | Слабше | Jest, Playwright, Cypress |
| Покриття правил | WCAG 2.0/2.1 | WCAG 2.0/2.1/2.2, ARIA |
| Швидкість | Повільніше (окремий браузер) | Швидше (вбудовується в браузер) |
Pa11y виграє, коли потрібно прогнати весь сайт. Axe кращий в unit-тестах. Ми комбінуємо: Pa11y для нічних аудитів, axe в пре-коміт хуках. Це дає повне покриття без дублювання.
Приклад звіту Node.js API
Код для аудиту через Node.js API
const pa11y = require('pa11y');
const fs = require('fs');
const PAGES = [
{ url: 'http://localhost:3000', name: 'Головна' },
{ url: 'http://localhost:3000/catalog', name: 'Каталог' },
{ url: 'http://localhost:3000/checkout', name: 'Оформлення замовлення' },
];
async function audit() {
const results = [];
for (const page of PAGES) {
console.log(`Checking: ${page.name}`);
const result = await pa11y(page.url, {
standard: 'WCAG2AA',
timeout: 20000,
actions: page.actions || [],
});
results.push({
name: page.name,
url: page.url,
issues: result.issues.length,
critical: result.issues.filter(i => i.type === 'error').length,
warnings: result.issues.filter(i => i.type === 'warning').length,
violations: result.issues,
});
}
fs.writeFileSync('a11y-report.json', JSON.stringify(results, null, 2));
console.table(results.map(r => ({
Сторінка: r.name,
Помилки: r.critical,
Попередження: r.warnings,
})));
if (results.some(r => r.critical > 0)) {
process.exit(1);
}
}
audit();
Що входить в роботу?
Після налаштування Pa11y ви отримуєте:
- Робочий конфігураційний файл
.pa11yci.jsonз налаштуваннями під ваш проект. - Інтеграцію в CI/CD — автоматичний запуск аудиту при кожному пуші.
- Кастомний ігнор-лист для хибних спрацьовувань.
- Документацію по інтерпретації звітів та виправленню типових помилок.
- Навчання команди: як читати звіти Pa11y і фіксити баги доступності.
Ми маємо сертифікат IAAP і досвід налаштування Pa11y на 50+ проектах. Гарантуємо якість: якщо після нашого аудиту ви отримаєте штраф за порушення WCAG — перевіримо безкоштовно.
Етапи налаштування Pa11y
| Етап | Що робимо | Результат |
|---|---|---|
| Аналіз | Вивчаємо структуру сайту, збираємо URL, визначаємо стандарт | Список сторінок, конфіг .pa11yci.json |
| Конфігурація | Налаштовуємо винятки, таймаути, дії для форм | Конфіг, ігнор-лист під ваш UI-кіт |
| Інтеграція | Вбудовуємо в CI/CD (GitLab CI, GitHub Actions) | Пайплайн з pa11y-ci, поріг помилок |
| Тестування | Запускаємо пробний аудит, виправляємо хибні спрацьовування | Звіт, коригування |
| Документація | Описуємо процес роботи, як інтерпретувати звіти | README, інструкція для команди |
| Навчання | Проводимо воркшоп по виправленню типових помилок | Команда вміє читати звіти і фіксити баги |
Терміни та вартість
Базове налаштування займає 1–2 дні. Розширене з кастомними правилами, скріншотами та навчанням — до 5 днів. Налаштування під ключ за 2 дні. Входить: конфіг, інтеграція, документація, навчання. Вартість розраховується індивідуально під обсяг сайту. Окупність налаштування — менше 3 місяців. Оцінимо проект за 1 годину — зв'яжіться з нами. Пишіть на пошту або в Telegram.
Pa11y запускає headless-браузер (Chrome), завантажує кожну сторінку і перевіряє її на відповідність обраному стандарту WCAG. Результати групуються за типом помилок: error (критичні), warning (зауваження), notice (інформаційні). Це дозволяє швидко виявити проблемні місця та пріоритизувати правки.
Як почати?
Зв'яжіться з нами для консультації. Замовте аудит доступності, і якщо після нашого аудиту ви отримаєте штраф за порушення WCAG — перевіримо безкоштовно. Вкладення в автоматизацію окупаються вже через 2–3 місяці. Отримайте вашу конфігурацію Pa11y і позбудьтеся ручних перевірок назавжди.