Аудит доступности сайта по WCAG
Пользователь с нарушением зрения не может заполнить форму на вашем сайте — кнопка отправки недоступна с клавиатуры, а скринридер не озвучивает ошибки. По статистике WebAIM, 96% из миллиона домашних страниц содержат ошибки WCAG. Мы выявляем такие барьеры и даём точные инструкции по их устранению, чтобы ваш сайт соответствовал стандарту WCAG 2.2 уровня AA. Игнорирование доступности грозит не только потерей аудитории, но и юридическими рисками: штрафы за недоступность в США достигают $50 000 за первое нарушение, а в Европе — до €75 000 по GDPR (для госсайтов). Экономия на доработках после своевременного аудита может составить до $10 000.
Аудит доступности сайта — это не разовая проверка, а встраивание культуры инклюзивности в процесс разработки. Ручное тестирование выявляет в 2 раза больше ошибок, чем автоматизированное, поэтому мы комбинируем оба подхода. Своевременный аудит позволяет избежать судебных издержек и повысить лояльность пользователей.
Почему WCAG AA — не просто галочка?
Государственные сайты во многих странах обязаны соблюдать WCAG AA. Коммерческие проекты следуют ему де-факто: это снижает юридические риски и расширяет аудиторию на 15–20%. Текущая версия стандарта — WCAG 2.2 — включает новые критерии: фокус-индикация (2.4.13), целевой размер (2.5.8) и устойчивость ввода (2.5.7). Наш аудит покрывает все эти требования.
Как мы проверяем доступность: от автоматизации до ручного тестирования
Автоматизированное сканирование выявляет около 30–40% нарушений: отсутствие alt-текстов, низкий контраст, неверную структуру заголовков, пропущенные ARIA-атрибуты. Используем axe-core, Lighthouse и Pa11y.
# axe-core CLI npm install -g @axe-core/cli axe https://mysite.com --reporter=json > axe-report.json Ручное тестирование — обязательный этап. Проверяем навигацию с клавиатуры, работу со скринридером (NVDA + Firefox, VoiceOver + Safari, TalkBack + Android). Модальные окна, формы, кастомные компоненты — каждый интерактивный элемент проходит 20+ тестов. Например, при проверке alt-текстов мы отмечаем: <img src="banner.jpg" alt="Аудит доступности сайта: скидка 30%"> — корректный alt, а пустой alt на декоративном изображении — ошибка.
Фокус-ловушки в модальных окнах — одна из самых частых ошибок. Правильный код на React:
const Modal = ({ isOpen, onClose, children }) => { const modalRef = useRef(null); useEffect(() => { if (isOpen) { const previouslyFocused = document.activeElement; modalRef.current?.focus(); return () => { previouslyFocused?.focus(); }; } }, [isOpen]); return ( <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="modal-title" tabIndex={-1}> {children} </div> ); }; Сравнение методов тестирования
| Метод | Доля выявленных ошибок | Время | Примеры инструментов |
|---|---|---|---|
| Автоматизированное | 30–40% | Минуты | axe, Pa11y, Lighthouse |
| Ручное | 60–70% | Часы–дни | Клавиатура, NVDA, VoiceOver |
| Комбинированное | ~95% | 1–3 дня | Наш стандартный процесс |
Что мы проверяем: ключевые критерии WCAG AA
| Критерий | Требование | Частая ошибка |
|---|---|---|
| 1.1.1 Alt Text | Все изображения имеют alt | Декоративные изображения без alt="" |
| 1.3.1 Info and Relationships | Структура передана семантикой | <div> вместо <button>, <nav>, <main> |
| 1.4.3 Contrast | 4.5:1 для текста, 3:1 для крупного | Серый текст на белом фоне |
| 2.1.1 Keyboard | Всё доступно с клавиатуры | Отсутствие фокуса на кастомных dropdown |
| 2.4.7 Focus Visible | Видимый индикатор фокуса | outline: none без альтернативы |
| 3.3.1 Error Identification | Ошибки форм описаны текстом | Только цвет для обозначения ошибки |
| 4.1.2 Name, Role, Value | ARIA для кастомных компонентов | Пропущены role/aria-label на иконках-кнопках |
Как исправить типичные ошибки?
Иконка-кнопка без описания:
// ПЛОХО <div onClick={handleDelete}><TrashIcon /></div> // ХОРОШО <button onClick={handleDelete} aria-label="Удалить запись"><TrashIcon aria-hidden="true" /></button> Ссылка пропуска навигации:
<a href="#main-content" class="skip-link">Перейти к основному содержимому</a> <style> .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 0; top: 0; z-index: 9999; } </style> Структура отчёта
- Полный список нарушений с привязкой к критериям WCAG (критические, серьёзные, умеренные).
- Скриншоты и HTML-селекторы каждого проблемного элемента.
- Рекомендации по исправлению с готовыми примерами кода.
- Чек-лист ручной проверки для разработчиков.
- Интеграционные рекомендации для CI/CD (Playwright, axe).
Пример записи:
- Нарушение: Отсутствие alt-текста на изображении (1.1.1).
- Селектор:
#main img.banner. - Приоритет: Критический.
- Рекомендация: Добавить
alt="Баннер: скидка 30% на зимнюю коллекцию".
Что входит в процесс аудита?
- Аналитика — определяем ключевые страницы и сценарии (до 20 страниц за 1 день).
- Автоматизация — прогон axe/Pa11y, сбор 30–40% ошибок (1 час).
- Ручное тестирование — клавиатура, скринридеры, логический порядок (1–2 дня).
- Отчёт — структурированный список с приоритетами.
- Рекомендации — готовые исправления с кодом (2–3 дня).
Сроки и стоимость
Аудит сайта до 20 страниц занимает 2–3 рабочих дня. Стоимость рассчитывается индивидуально — зависит от сложности и количества интерактивных сценариев. Закажите аудит доступности — мы подготовим детальный отчёт и поможем внедрить правки. Свяжитесь с нами для консультации.
Наш опыт: 5+ лет в веб-доступности, 100+ проверенных проектов для банков, госорганов и e-commerce. Гарантируем соответствие WCAG AA.