Аудит доступности сайта по стандарту WCAG 2.1 (уровень AA)
WCAG 2.1 AA — международный стандарт веб-доступности, обязательный для государственных сайтов в ЕС (EN 301 549) и США (Section 508). Уровень AA включает 50+ критериев успеха, охватывающих воспринимаемость, управляемость, понятность и надёжность интерфейса.
Принципы POUR
Perceivable (воспринимаемый): информация доступна через разные органы чувств. Operable (управляемый): все функции доступны с клавиатуры. Understandable (понятный): интерфейс предсказуем и последователен. Robust (надёжный): работает с вспомогательными технологиями.
Инструментарий аудита
Автоматические инструменты (находят ~30% проблем):
# axe DevTools — расширение Chrome/Firefox
# Запустить на каждой странице: F12 → Accessibility
# axe-core через Playwright
npm install -D @axe-core/playwright
# audit.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
const pagesToAudit = [
'/', '/about', '/contact', '/login', '/dashboard'
];
for (const path of pagesToAudit) {
test(`${path} has no WCAG 2.1 AA violations`, async ({ page }) => {
await page.goto(`https://staging.example.com${path}`);
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
.analyze();
expect(results.violations).toEqual([]);
});
}
# WAVE — онлайн или расширение
https://wave.webaim.org/
# Pa11y
pa11y --standard WCAG2AA https://example.com --reporter html > report.html
# Lighthouse
lighthouse https://example.com --only-categories=accessibility --output html
Ручное тестирование (60-70% проблем):
- Навигация только с клавиатурой — пройти весь user flow
- Проверка с NVDA + Chrome / JAWS + IE / VoiceOver + Safari
- Тест с увеличением 200% и 400% (SC 1.4.10 Reflow)
- Тест в режиме высокого контраста Windows
- Отключить CSS — структура должна оставаться осмысленной
Чек-лист ключевых критериев WCAG 2.1 AA
1.1.1 Non-text Content (A)
- Все изображения имеют alt
- Иконки-кнопки имеют aria-label
- Сложные диаграммы имеют текстовое описание
1.3.1 Info and Relationships (A)
- Заголовки H1-H6 отражают структуру документа
- Списки используют
<ul>/<ol>/<li> - Таблицы имеют
<th>сscope - Формы: каждый input имеет
<label>
1.4.3 Contrast (Minimum) (AA)
- Текст: минимум 4.5:1
- Крупный текст (18pt/14pt bold): минимум 3:1
1.4.4 Resize Text (AA)
- Текст масштабируется до 200% без потери контента
1.4.10 Reflow (AA)
- При 320px нет горизонтального скролла
1.4.11 Non-text Contrast (AA)
- UI-компоненты и графика: минимум 3:1 к фону
2.1.1 Keyboard (A)
- Все функции доступны с клавиатуры
2.4.3 Focus Order (A)
- Порядок фокуса логичен
2.4.7 Focus Visible (AA)
- Видимый индикатор фокуса на всех элементах
3.1.1 Language of Page (A)
-
<html lang="ru">установлен
3.3.1 Error Identification (A)
- Ошибки форм описаны текстом, не только цветом
4.1.2 Name, Role, Value (A)
- Все кастомные компоненты имеют корректные role, aria-label, aria-expanded
Формат отчёта
## WCAG Audit Report — example.com
Дата: 2024-11-15
Стандарт: WCAG 2.1 AA
Инструменты: axe DevTools, NVDA 2024.2, ручное тестирование
### Итог
| Уровень | Нарушений | Статус |
|---------|-----------|--------|
| Критические (Level A) | 8 | Fail |
| Значительные (Level AA) | 12 | Fail |
| Предупреждения | 23 | Review |
### Критическая проблема #1
**Критерий:** 1.1.1 Non-text Content
**Элементы:** 47 изображений без alt на страницах /gallery, /products
**Влияние:** screen reader зачитывает имена файлов
**Исправление:** добавить осмысленные alt ко всем изображениям
**Приоритет:** P1 (Critical)
Типичные находки на российских сайтах
- Отсутствие
langатрибута на HTML-элементе - Плохая контрастность серого текста на белом фоне
- Кастомные селекты и дропдауны без keyboard support
- Формы с placeholder вместо label
- Слайдеры и карусели без кнопок управления
- Отключённый zoom (
maximum-scale=1)
Срок проведения аудита
| Объём сайта | Срок |
|---|---|
| Лендинг (5–10 страниц) | 2–3 дня |
| Корпоративный сайт (20–50 страниц) | 4–7 дней |
| SaaS / веб-приложение | 7–14 дней |
| Исправление по результатам | x1.5 от срока аудита |