Label и доступность

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

<label> — это подпись к полю ввода, связанная с ним так, что клик по подписи активирует поле.

Зачем подписывать поля

Само по себе поле <input> — это просто рамка. Чтобы пользователь понял, что туда вводить, нужна подпись. И это не просто текст рядом, а специальный тег <label>, который программно связан с полем.

Связь через for и id

Самый надёжный способ: у поля задают атрибут id, а у подписи — атрибут for с тем же значением. Они «находят» друг друга по совпадающему имени:

<label for="email">Ваша почта:</label>
<input type="email" id="email" name="email">

Здесь for="email" у подписи указывает на id="email" у поля. Не путайте id и name: id связывает с подписью, name — имя для отправки на сервер. Часто их делают одинаковыми, но роли у них разные.

Что это даёт

Кликабельность. Клик по тексту подписи ставит курсор в поле или переключает флажок. Особенно удобно для маленьких флажков на телефоне.
Доступность. Программа чтения с экрана зачитает подпись, когда пользователь дойдёт до поля. Без <label> незрячий не поймёт, что вводить.

Способ обернуть поле

Есть и второй способ — поместить поле внутрь <label>. Тогда for и id не нужны, связь возникает сама:

<label>
  Ваше имя:
  <input type="text" name="name">
</label>

Особенно важно для флажков

У checkbox и radio метка <label> увеличивает область клика — попасть по тексту проще, чем по крошечному кружочку. Это заметно улучшает удобство форм.

Правило: каждому полю — своя метка

Возьмите за твёрдое правило: у каждого поля ввода должна быть связанная <label>. Не «обычно», а всегда. Это один из самых простых и при этом самых важных шагов к доступному сайту. Форма без меток — частая причина, по которой сайтом невозможно пользоваться через программу чтения с экрана: поля есть, а что в них вводить — непонятно.

А placeholder (серая подсказка внутри поля), о котором мы поговорим позже, не заменяет метку. Подсказка исчезает, как только пользователь начинает печатать, и человек уже не видит, что это было за поле. Метка же остаётся на месте всегда. Поэтому placeholder — лишь дополнение к <label>, а не замена ей.

Итог

<label> — подпись, связанная с полем; клик по ней активирует поле.
Связь через совпадающие for (у label) и id (у поля), либо обёрткой поля в label.
Метки критичны для доступности и заметно удобнее для флажков и переключателей.