Составление отчёта о соответствии 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 — надёжный (совместимость с AT)

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

// 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
• Порядок фокуса логичен и соответствует визуальному порядку
• Модальные окна перехватывают фокус (focus trap)
• Escape закрывает модальные окна и dropdown-меню

Экранные читалки:

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

Контраст и масштаб:

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

Документирование плана исправлений

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

### 1.1.1 Изображения без alt-текста
- **Страницы**: catalog, product pages
- **Количество**: 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 рабочих дней.