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

Розробка звіту про відповідність 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 робочих днів.