Доступность фронтенда проверяется действиями: можно ли пройти форму клавиатурой, понять поля без подсказки цветом и исправить ошибку после отправки. Автогенерированный код сам по себе не подтверждает соответствие WCAG. Ниже — ручной разбор формы регистрации, а не аудит всего сайта.
Название, роль и фокус
Каждое поле получит постоянное программно связанное имя: например, <label for="email">Электронная почта</label> рядом с <input id="email" type="email">. Placeholder не заменяет label: при вводе он исчезает. W3C WAI описывает связь имени контрола и подписи в руководстве по labels.
Используй кнопку для действия и ссылку для перехода. Пройди Tab и Shift+Tab, затем активируй элементы ожидаемыми клавишами Enter или Space. Фокус должен быть виден, идти логично и не попадать в скрытые элементы. Для диалога проверь начальный фокус, закрытие и возврат фокуса. Требования к индикатору фокуса описаны в WCAG 2.2, критерий 2.4.7.
Сообщения формы и подтверждённый результат
Отправь пустую форму и введи некорректный email. Сообщение должно назвать поле и объяснить способ исправления, быть программно связано с ним и не полагаться только на красную рамку. Не очищай правильные значения. WAI даёт рекомендации для сообщений об ошибках и успехе.
Если статус меняется динамически, проверь, что вспомогательная технология узнаёт о существенном обновлении без повторных объявлений каждого декоративного spinner. Сообщай «Заявка принята» только после ответа backend; если система лишь поставила её в очередь, так и напиши. При успехе и ошибке результат должен быть виден и доступен для чтения.
Масштаб, контраст и движение
Проверь фактические пары текста и фона. В WCAG 2.2 AA для обычного текста требуется контраст 4.5:1, для крупного — 3:1; графические индикаторы оцениваются по отдельным критериям. Не передавай состояние только цветом. Увеличь страницу до 200% и проверь сохранение функций; проверь системное prefers-reduced-motion, если анимация не необходима. Полный набор требований описывает WCAG 2.
Один ручной проход
| Действие | Что записать |
|---|---|
| Открыть страницу | Понятны заголовок и порядок содержимого |
| Пройти Tab / Shift+Tab | Фокус виден, порядок ожидаемый, скрытые элементы пропущены |
| Отправить пустую форму | Ошибка называет проблему и связана с полем |
| Ввести неверный email | Есть понятный способ исправления, другие значения сохранены |
| Успешно отправить | Объявлен точный статус, подтверждённый backend |
| Увеличить страницу и включить screen reader | Функции и имена элементов сохраняются |
Автоматический axe или Lighthouse scan может найти часть механических проблем, но не решает, понятен ли порядок и можно ли завершить сценарий. Записывай браузер, область проверки, шаги и результат. Не заявляй соответствие WCAG по одному короткому smoke-check; для формальной цели укажи версию, уровень и проверенные страницы и состояния.