Доступность начинается с понятного назначения каждого поля. Видимая подпись должна быть связана с контролом, а ошибка — объяснять исправление. Красная рамка сама по себе этого не делает.
Свяжите подпись и подсказку
<label for="reply-email">Email для ответа</label>
<input id="reply-email" name="email" type="email" required
aria-describedby="email-hint email-error">
<small id="email-hint">Например, hello@example.test</small>
<small id="email-error"></small>После проверки выставляйте aria-invalid только по фактической ошибке и заполняйте связанный текст. Не используйте один и тот же id для двух форм на странице.
Сгруппируйте связанные вопросы
Fieldset и legend помогают понять группу. Для выбора одного значения используйте radio или select, для независимого согласия — checkbox. Не заменяйте стандартный контрол набором div без нужной клавиатурной логики.
Пройдите клавиатурой
Начните с Tab, введите значения, откройте список и дойдите до действия. Фокус должен быть видим. При ошибке текст остаётся, сообщение можно прочитать. Масштабируйте страницу и проверьте, что длинный код прокручивается внутри блока, а весь сайт не уезжает вбок.
Проверка скринридером дополняет клавиатурную и визуальную проверку. Даже валидный HTML не доказывает удобство реального сценария. Проверяйте форму в контексте своего сайта: порядок фокуса зависит и от окружающих компонентов.
Источники и дата проверки
Редакционная сверка: 2026-10-27. Учитывайте версию инструментов в своём проекте.
Обновлено