Как правильно связать подпись с полем формы?

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

Способы

<!-- 1. for и id -->
<label for="email">Электронная почта</label>
<input id="email" type="email" autocomplete="email">

<!-- 2. вложенный label -->
<label>
  Пароль
  <input type="password" autocomplete="current-password">
</label>

Когда видимой подписи нет

Например, поле поиска с иконкой: используют aria-label или aria-labelledby.

<input type="search" aria-label="Поиск по сайту">

Чего не делать

• placeholder вместо label: он исчезает при вводе и плохо читается скринридерами.
• Подпись в виде div без связи с полем.

Ошибки и подсказки

Связывают через aria-describedby, а невалидное поле помечают aria-invalid="true".

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

Нужна настоящая <label> с for, а aria-label допустим, когда видимой подписи нет. Placeholder подпись не заменяет.