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

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

Звіт про відповідність WCAG (Web Content Accessibility Guidelines) — формальний документ, який підтверджує рівень доступності сайту. Необхідний для державних сайтів, освітніх платформ, банків та компаній із зобов'язаннями ESG. WCAG 2.1 AA — мінімальний міжнародний стандарт.

Рівні відповідності

• WCAG 2.1 A — базові вимоги, 30 критеріїв
• WCAG 2.1 AA — стандартний рівень, ще 20 критеріїв (разом 50)
• WCAG 2.1 AAA — максимальний, 28 додаткових (рідко потрібен повністю)

Більшість правових вимог у ЄС, США та Австралії пов'язані з WCAG 2.1 AA.

Структура звіту

Звіт містить: область перевірки, методологію, резюме принципів POUR, детальні результати та план виправлень.

Принципи POUR:

• Perceivable — сприйнятливий (alt-текст, субтитри, контраст)
• Operable — керована (навігація з клавіатури, достатньо часу)
• Understandable — розумна (мова, передбачуваність, допомога при помилках)
• Robust — надійна (сумісність із допоміжними технологіями)

Аудит та документування

// 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();

Ручне тестування: контрольний список

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

Навігація з клавіатури:

• Усі інтерактивні елементи доступні через Tab
• Порядок фокусу логічний та відповідає візуальному порядку
• Модальні вікна захоплюють фокус
• Escape закриває модальні вікна та меню dropdown

Екранні читальники:

• NVDA + Firefox: перевірка форм, таблиць, модальних вікон
• VoiceOver + Safari (macOS/iOS): мобільні жести
• Оголошення динамічного контенту через live regions

Контраст та масштабування:

• Текст проходить 4.5:1 при звичайному розмірі та 3:1 при великому розмірі
• Масштабування на 400% без горизонтального прокручування
• Режим високого контрасту Windows

Документування плану виправлень

## Критичні порушення (виправити перед релізом)

### 1.1.1 Зображення без alt-тексту
- **Сторінки**: каталог, сторінки товарів
- **Кількість**: 23 елемента
- **Виправлення**: Додати alt="" для декоративних, змістовний alt для інформаційних
- **Термін**: 3 дні
- **Відповідальний**: Frontend-команда

### 1.4.3 Недостатній контраст
- **Елементи**: Placeholder у формах (#9ca3af на білому = 2.7:1)
- **Потрібно**: ≥ 4.5:1
- **Виправлення**: Змінити колір на #6b7280 (4.6:1)
- **Термін**: 1 день

Часові рамки

Повний аудит WCAG 2.1 AA (автоматизація + ручне тестування) зі звітом та планом виправлень: 5–8 робочих днів.