Налаштування автоматичного тестування доступності через Pa11y

Резин проблем доступності? Автоматизуйте аудит з 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 дні і включає п'ять кроків:

1. Аналіз — збираємо URL з sitemap.xml, визначаємо стандарт (зазвичай WCAG 2.1 AA).
2. Конфігурація — створюємо .pa11yci.json з потрібними параметрами та винятками.
3. Інтеграція — додаємо команду pa11y-ci у ваш пайплайн (GitLab CI, GitHub Actions, Jenkins).
4. Тестування — запускаємо пробний аудит, коригуємо хибні спрацьовування.
5. Документація — описуємо процес роботи для команди.

Аналіз та конфігурація

Процес починається з аналізу вашого сайту: збираємо список URL з sitemap.xml, шотів. Визначаємо стандарт (зазвичай WCAG2AA), таймаути, винятки. На виході — .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 кращий в unit-тестах. Ми комбінуємо: Pa11y для нічних аудитів, axe в пре-коміт хуках. Це дає повне покриття без дублювання.

Приклад звіту 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

Терміни та вартість

Базове налаштування займає 1–2 дні. Розширене з кастомними правилами, скріншотами та навчанням — до 5 днів. Налаштування під ключ за 2 дні. Входить: конфіг, інтеграція, документація, навчання. Вартість розраховується індивідуально під обсяг сайту. Окупність налаштування — менше 3 місяців. Оцінимо проект за 1 годину — зв'яжіться з нами. Пишіть на пошту або в Telegram.

Pa11y запускає headless-браузер (Chrome), завантажує кожну сторінку і перевіряє її на відповідність обраному стандарту WCAG. Результати групуються за типом помилок: error (критичні), warning (зауваження), notice (інформаційні). Це дозволяє швидко виявити проблемні місця та пріоритизувати правки.

Як почати?

Зв'яжіться з нами для консультації. Замовте аудит доступності, і якщо після нашого аудиту ви отримаєте штраф за порушення WCAG — перевіримо безкоштовно. Вкладення в автоматизацію окупаються вже через 2–3 місяці. Отримайте вашу конфігурацію Pa11y і позбудьтеся ручних перевірок назавжди.