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