Доступные формы: подписи, сообщения об ошибках и автозаполнение

Цель

Формы, которые человек с клавиатурой, программой экранного доступа, голосовым вводом или автозаполнением браузера может заполнить, а при ошибке — исправить без догадок.

Предварительные условия

Нативные элементы управления (input, select, textarea, button type="submit") вместо оформленных элементов div, а также письменный список полей с правилами проверки и указанием обязательных полей.

Шаги

1. Явно подпишите каждый элемент управления: <label for="email">, у которого for совпадает с id элемента (предпочтительный способ связывания в руководстве WAI). Используйте aria-label или aria-labelledby только там, где видимая подпись невозможна; текст-заполнитель не является подписью.
2. Объединяйте связанные элементы с помощью fieldset и legend (группы переключателей, адресные блоки), чтобы название группы озвучивалось с каждым вариантом.
3. Указывайте обязательность в тексте подписи («Имя (обязательно)») и добавляйте атрибут required, чтобы браузеры и вспомогательные технологии тоже знали об этом.
4. Добавляйте токены autocomplete к полям с данными пользователя: name, given-name, family-name, email, username, new-password, current-password, one-time-code, postal-code. MDN отмечает, что корректные токены удовлетворяют критерию успешности 1.3.5 WCAG 2.2 (определение назначения ввода), а некорректные или выдуманные значения для подавления автозаполнения нарушают этот критерий, поскольку назначение перестаёт быть машиночитаемым.
5. Проверяйте данные при отправке, сохраняйте введённые значения и объясняйте, как исправить каждую проблему («Введите дату в формате DD/MM/YYYY»), а не только сообщайте о некорректности.
6. При ошибке выводите вверху сводку со ссылкой на каждое поле, отмечайте каждое поле атрибутом aria-invalid="true" и связывайте его сообщение через aria-describedby; переводите фокус на сводку или первое некорректное поле.
7. Если проверка выполняется без загрузки страницы, объявляйте результат в динамической области (role="alert"), чтобы программы экранного доступа его озвучивали.
8. Подтверждайте успех текстом, а не только цветом, и запрашивайте подтверждение перед отправкой, вызывающей разрушительные действия.
9. Проверяйте форму только с клавиатурой, с одной программой экранного доступа и с включённым автозаполнением браузера.

Ожидаемый результат

У каждого поля есть доступное имя и машиночитаемое назначение; каждая ошибка достижима с клавиатуры, читается вспомогательными технологиями и объясняет, что изменить; автозаполнение заполняет нужные поля.

Ограничения и основание проверки

Следует указанным руководствам WAI и справочнику MDN. Автоматические проверяющие средства находят отсутствующие подписи, но не бесполезные сообщения; нестандартные виджеты требуют полноценных шаблонов ARIA, выходящих за эти рамки. Результаты измерений не заявляются.