Составление отчёта о соответствии 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 рабочих дней.