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