Розробка звіту про відповідність WCAG

Законодавчі вимоги до доступності сайтів посилюються. Без офіційного звіту про відповідність WCAG ви не зможете брати участь у держзакупівлях, отримати ESG-сертифікацію або уникнути позовів від користувачів з обмеженими можливостями. Типовий сценарій: компанія витрачає мільйони на розробку, але через відсутність alt-текстів або контрасту 2.7:1 втрачає тендер. При цьому багато розробників впевнені, що достатньо автоматичної перевірки, але Axe-core знаходить лише третину критичних порушень. Наші інженери з 10-річним досвідом аудиту доступності підготують документ, який приймуть будь-які перевіряючі органи, за 5–8 робочих днів. Все — під ключ, від тестування до фінального звіту з планом виправлень.

Чому аудит WCAG обов'язковий для держзакупівель?

У Європі, США та Австралії відсутність доступності карається штрафами до 10% річного обороту. Несвоєчасний аудит може обернутися витратами, в десятки разів перевищуючими вартість самого звіту. Звіт WCAG — доказ виконання обов'язків. Крім того, багато комерційних замовників вимагають сертифікат доступності як умову тендеру.

Які проблеми вирішує аудит доступності

• Юридичні ризики. Штрафи та судові позови — реальність. Аудит знижує їхню ймовірність.
• N+1 помилок у розмітці: зображення без alt, неправильна ієрархія заголовків, відсутність міток форм. Axe-core знаходить такі помилки, але не всі. Порівняння: автоматика покриває 30–40% критеріїв, ручне тестування — ще 60%.
• Проблеми з контролем: контраст тексту 2.7:1 замість мінімальних 4.5:1, модальні вікна без захоплення фокусу, відсутність live-regions для динамічного контенту.

Ми не просто фіксуємо порушення — ми пропонуємо конкретні виправлення із зазначенням файлів та термінів.

Як ручна перевірка доповнює автоматику?

Автоматичні інструменти виявляють лише третину критичних порушень — ручна перевірка в 2 рази ефективніша при виявленні серйозних помилок, таких як клавіатурні пастки. Наш чекліст включає клавіатурну навігацію (Tab, фокус, модальні вікна), роботу з екранними читачками (NVDA, VoiceOver) та перевірку контрасту/масштабування.

Як ми проводимо аудит

Стек: Axe-core 4.x через Playwright, ручне тестування з NVDA (Firefox), VoiceOver (Safari), клавіатурна навігація.

// scripts/wcag-report-generator.js const AxeBuilder = require('@axe-core/playwright').default; const { chromium } = require('@playwright/test'); const fs = require('fs'); const PAGES = [ { url: 'https://example.com', name: 'Головна сторінка' }, { url: 'https://example.com/catalog', name: 'Каталог' }, { url: 'https://example.com/login', name: 'Вхід в систему' }, { url: 'https://example.com/checkout', name: 'Оформлення замовлення' }, ]; // Маппінг axe rule ID → WCAG критерії const RULE_TO_WCAG = { 'color-contrast': '1.4.3 (Level AA)', 'image-alt': '1.1.1 (Level A)', 'label': '1.3.1, 4.1.2 (Level A)', 'button-name': '4.1.2 (Level A)', 'link-name': '2.4.4 (Level A)', 'heading-order': '1.3.1 (Level A)', 'duplicate-id': '4.1.1 (Level A)', 'html-has-lang': '3.1.1 (Level A)', 'keyboard': '2.1.1 (Level A)', 'focus-visible': '2.4.7 (Level AA)', }; async function generateReport() { const browser = await chromium.launch(); const allViolations = []; const pageSummaries = []; for (const pageConfig of PAGES) { const page = await browser.newPage(); await page.goto(pageConfig.url, { waitUntil: 'networkidle' }); const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) .analyze(); const violations = results.violations.map(v => ({ rule: v.id, wcag: RULE_TO_WCAG[v.id] || 'See axe docs', impact: v.impact, count: v.nodes.length, description: v.description, help_url: v.helpUrl, elements: v.nodes.slice(0, 3).map(n => n.target[0]), })); pageSummaries.push({ name: pageConfig.name, url: pageConfig.url, total: violations.length, critical: violations.filter(v => v.impact === 'critical').length, serious: violations.filter(v => v.impact === 'serious').length, violations, }); allViolations.push(...violations); await page.close(); } await browser.close(); const report = { generated_at: new Date().toISOString(), standard: 'WCAG 2.1 Level AA', tool: 'axe-core 4.x via Playwright', pages_tested: PAGES.length, total_violations: allViolations.length, by_impact: { critical: allViolations.filter(v => v.impact === 'critical').length, serious: allViolations.filter(v => v.impact === 'serious').length, moderate: allViolations.filter(v => v.impact === 'moderate').length, minor: allViolations.filter(v => v.impact === 'minor').length, }, pages: pageSummaries, }; fs.writeFileSync('wcag-report.json', JSON.stringify(report, null, 2)); console.log('Звіт збережено: wcag-report.json'); return report; } generateReport(); 

Скрипт автоматично проганяє вказані сторінки через Axe-core, маппить правила на критерії WCAG і формує JSON-звіт. Потім вручну перевіряємо те, що автомат не може: клавіатурні пастки, порядок фокусу, роботу скрінрідерів.

Що входить у звіт

Ручне тестування: чекліст

Автоматика покриває ~40% критеріїв. Решта перевіряються вручну:

• Клавіатурна навігація: всі інтерактивні елементи досяжні через Tab, порядок фокусу логічний, модальні вікна перехоплюють фокус, Escape закриває.
• Екранні читачки: NVDA + Firefox (форми, таблиці, модальні вікна), VoiceOver + Safari (мобільні жести), live regions для динаміки.
• Контраст і масштаб: текст проходить 4.5:1 при звичайному і 3:1 при великому, zoom 400% без скролу, режим високого контрасту Windows.

Приклад типових порушень:

Процес роботи

1. Аналітика: вивчаємо структуру сайту, визначаємо набір сторінок для аудиту.
2. Автоматичне тестування: проганяємо Axe-core на всіх вибраних URL, отримуємо JSON-лог.
3. Ручна перевірка: клавіатура, екранні читачки, контраст — фіксуємо неочевидні порушення.
4. Складання звіту: формуємо документ з таблицями, діаграмами, планом виправлень.
5. Фінальна вичистка і передача: перевіряємо коректність критеріїв, відправляємо PDF та Excel.

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

Терміни: від 5 до 8 робочих днів залежно від розміру сайту (до 10 сторінок — 5 днів, понад — до 8). Вартість розраховується індивідуально після технічного аналізу. Отримайте консультацію та комерційну пропозицію протягом дня.

Чому обирають нас?

• Досвід сертифікованих аудиторів — 10+ років, 50+ виконаних проєктів.
• Гарантуємо визнання звіту держорганами та аудиторами.
• Включаємо план виправлень з пріоритетами — ви одразу знаєте, що робити.

Замовте аудит доступності сьогодні — отримайте детальний звіт з планом виправлень за 5–8 робочих днів.