Форма, которую можно заполнить с клавиатуры

Подпись остаётся на месте

Свяжите label с полем через совпадающие for и id. Placeholder не заменяет подпись: он исчезает после ввода. Атрибут autocomplete помогает браузеру понять назначение поля, а подходящий type включает встроенные возможности ввода и проверки.

Для дополнительной подсказки используйте aria-describedby. Текст подсказки должен помогать заполнению, например объяснять, для чего нужен адрес.

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

Покажите путь исправления

Сообщение «Некорректное значение» почти не помогает. Лучше назвать поле и ожидаемое действие: «Введите адрес в формате name@example.com». Ошибка должна быть заметна не только благодаря красной рамке.

При собственной обработке ошибок обновляйте aria-invalid и связывайте сообщение с полем. Динамический статус отправки можно объявлять через aria-live="polite". Не заставляйте экранный диктор произносить ошибку при каждом нажатии клавиши.

Пройдите форму целиком

Нажимайте Tab и Shift+Tab, отправьте пустую форму, исправьте одно поле и повторите отправку. Фокус должен быть виден на каждом шаге. Увеличьте масштаб страницы и убедитесь, что подписи и сообщения не обрезаются.

Клиентская проверка улучшает взаимодействие, но сервер всё равно должен проверять входящие данные. Запрос можно отправить напрямую, минуя HTML-форму.