Доступность

Форма, которой удобно пользоваться с клавиатуры

Подписи, фокус и ошибки — базовая часть работающего интерфейса.

Семантические HTML-элементы дают браузеру информацию о назначении интерфейса. Используйте button для действия и a для перехода. Так клавиатурное управление и поведение элемента не придётся собирать вручную.

Подпишите поле

Свяжите label с полем через for и id. Placeholder не заменяет постоянную подпись: он исчезает при вводе. Подсказку можно связать с полем атрибутом aria-describedby.

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email"
       autocomplete="email" aria-describedby="hint">
<p id="hint">Адрес для ответа на ваш вопрос.</p>
<button type="submit">Отправить</button>

Не прячьте фокус

Обводка показывает, какой элемент получит нажатие Enter или Space. Оформляйте :focus-visible так, чтобы индикатор был хорошо заметен на фоне. Проверяйте всю форму клавишами Tab и Shift+Tab, включая сообщения об ошибках.

Сообщайте о результате

Ошибка должна называть проблемное поле и способ исправления. Не обозначайте её только цветом. Для динамического статуса можно использовать aria-live="polite", чтобы вспомогательные технологии объявили изменение без принудительного переноса фокуса.