Розробка звіту про відповідність 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-звіт. Потім вручну перевіряємо те, що автомат не може: клавіатурні пастки, порядок фокусу, роботу скрінрідерів.
Що входить у звіт
| Розділ | Опис |
|---|---|
| Методологія | Використовувані інструменти, версії, критерії перевірки |
| Принципи POUR | Зведення за сприйняттям, керованістю, зрозумілістю, надійністю |
| Детальні результати | Посторінковий перелік порушень з правилом, Impact, кількістю елементів |
| План усунення | Пріоритет, терміни, відповідальні, конкретні виправлення |
| Рекомендації | Кращі практики для підтримки доступності |
| Резюме для керівництва | Кількісні показники за критичністю та відповідністю стандарту |
Ручне тестування: чекліст
Автоматика покриває ~40% критеріїв. Решта перевіряються вручну:
- Клавіатурна навігація: всі інтерактивні елементи досяжні через Tab, порядок фокусу логічний, модальні вікна перехоплюють фокус, Escape закриває.
- Екранні читачки: NVDA + Firefox (форми, таблиці, модальні вікна), VoiceOver + Safari (мобільні жести), live regions для динаміки.
- Контраст і масштаб: текст проходить 4.5:1 при звичайному і 3:1 при великому, zoom 400% без скролу, режим високого контрасту Windows.
Приклад типових порушень:
| Критерій WCAG | Проблема | Рішення |
|---|---|---|
| 1.1.1 (A) | Зображення без alt | Додати alt="" для декоративних, осмислений — для інформаційних |
| 1.4.3 (AA) | Контраст 2.7:1 | Змінити колір на #6b7280 (4.6:1) |
| 2.1.1 (A) | Клавіатурна пастка | Додати обробники focus і blur |
Процес роботи
- Аналітика: вивчаємо структуру сайту, визначаємо набір сторінок для аудиту.
- Автоматичне тестування: проганяємо Axe-core на всіх вибраних URL, отримуємо JSON-лог.
- Ручна перевірка: клавіатура, екранні читачки, контраст — фіксуємо неочевидні порушення.
- Складання звіту: формуємо документ з таблицями, діаграмами, планом виправлень.
- Фінальна вичистка і передача: перевіряємо коректність критеріїв, відправляємо PDF та Excel.
Терміни та вартість
Терміни: від 5 до 8 робочих днів залежно від розміру сайту (до 10 сторінок — 5 днів, понад — до 8). Вартість розраховується індивідуально після технічного аналізу. Отримайте консультацію та комерційну пропозицію протягом дня.
Чому обирають нас?
- Досвід сертифікованих аудиторів — 10+ років, 50+ виконаних проєктів.
- Гарантуємо визнання звіту держорганами та аудиторами.
- Включаємо план виправлень з пріоритетами — ви одразу знаєте, що робити.
Замовте аудит доступності сьогодні — отримайте детальний звіт з планом виправлень за 5–8 робочих днів.