<divelopers>: “You don’t know HTML: <label> Элемент <label> представляет подпись для…”

You don’t know HTML: <label>

Элемент <label> представляет подпись для элементов управления, которые относятся к категории labelable element. Подпись идентифицирует элемент, кратко описывает назначение и используется как accessible name в дереве доступности.

<label> ассоциируется с элементом двумя способами: через атрибут for с ссылкой по id и путём вкладывания элемента внутрь <label>. Во втором случае подпись ассоциируется с первым найденным элементом управления внутри <label>.

<label for="email">
  Email
</label>
<input
  type="email"
  id="email"
  autocomplete="email"
>

Второй способ лучше подходит для флажков и радио-кнопок, так как расширяет интерактивную область и позволяет избежать не интерактивных зазоров между элементом и подписью. Второй способ также позволяет обойтись без id.

<label>
  Email
  <input
    type="email"
    id="email"
    autocomplete="email"
  >
</label>

В обоих подходах элемент получит accessible name «Email». Программы чтения с экрана объявят имя при переходе к элементу. С помощью программ голосового управления можно обратиться к элементу по его имени.

<label> переопределяет accessible name, полученный из атрибута title или текстового контента элемента, как в случае с кнопками. Атрибуты aria-label и aria-labelledby приоритетнее, поэтому они переопределяют значение из <label>.

Нажатие по <label> активирует связанный элемент. Для флажков и радио-кнопок — это изменение состояния отмечен/не отмечен, для текстовых полей — установка фокуса, для кнопки — нажатие, для выбора файла — активация окна выбора.

К одному элементу можно привязать несколько <label>, которые будут объединяться в единую подпись. Это можно использовать для комплексных подписей с дополнительными инструкциями, которые размещены в разных местах:

<label for="birthday">
  Дата рождения
</label>
<input
  type="text"
  id="birthday"
  autocomplete="bday"
  pattern="\d{2}\/\d{2}\/\d{4}"
>
<label for="birthday">
  (формат: ДД/ММ/ГГГГ)
</label>

<!--
Accessible name: 
Дата рождения (формат: ДД/ММ/ГГГГ)
-->

Создавать комплексные подписи можно путём размещения всего текста внутри одного элемента <label>. Accessible name элемента управления будет генерироваться на основе всего текстового содержимого внутри <label>.

<label>
  <span>Дата рождения</span>
  <input
    type="text"
    id="birthday"
    autocomplete="bday"
    pattern="\d{2}\/\d{2}\/\d{4}"
  >
  <small>(формат: ДД/ММ/ГГГГ)</small>
</label>

<!--
Accessible name: 
Дата рождения (формат: ДД/ММ/ГГГГ)
-->

<label> можно привязывать к пользовательским элементам, если они помечены как ассоциированные с формой с помощью свойства formAssociated. Но <label> нельзя привязать к элементу внутри Shadow DOM (на данный момент).

<label for="custom-checkbox">
  Согласен получать спам
</label>
<custom-checkbox
  id="custom-checkbox"
  checked
>
</custom-checkbox>

<label for="custom-input">
  Email для спама
</label>
<custom-input>
  <template shadowrootmode="open">
    <!-- подпись не привяжется -->
    <input 
      type="email"
      id="custom-input"
      autocomplete="email"
    >
  </template>
</custom-input>

В JS у <label> есть два свойства. control возвращает элемент, которому привязан <label>. Свойство form возвращает элемент <form>, к которому относится связанный с <label> элемент управления.

У самих элементов управления есть свойство labels, которое возвращает коллекцию NodeList со связанными элементами <label>. У пользовательских элементов такого свойства нет, но оно доступно через объект ElementInternals.

#ydkhtml #html #a11y