Как сделать форму доступной: label, ошибки и фокус?

Доступная форма понятна без мыши и без зрения: у каждого поля есть название, ошибки объявляются, а фокус не теряется.

Подписи

Каждое поле связывается с <label> через for и id или обёрткой. Placeholder не заменяет label: он исчезает при вводе.

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email" required
       aria-describedby="email-hint email-error" aria-invalid="true" />
<p id="email-hint">Мы пришлём письмо для подтверждения</p>
<p id="email-error" role="alert">Введите корректный адрес</p>

Ошибки

• Текст ошибки рядом с полем и связь через aria-describedby.
• Сообщение объявляется через role="alert" или aria-live.
• Не полагаться только на цвет: добавить текст или иконку.

Фокус и клавиатура

• Логичный порядок Tab, видимый :focus-visible.
• После неудачной отправки перевести фокус на первое поле с ошибкой или на сводку ошибок.
• Группы связанных полей оборачивать в <fieldset> с <legend>.

Нативные атрибуты required, type, autocomplete помогают и браузеру, и вспомогательным технологиям.

Коротко для собеседования

Каждому полю нужен связанный <label>, ошибка должна объявляться скринридеру, а фокус не должен теряться. Placeholder не заменяет подпись.