Расширение <label>

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

Также есть 5 правил ARIA, первое из которых гласит: «используйте встроенные в HTML элементы и атрибуты для передачи нужной семантики вместо использования ARIA». <label> — как раз пример такого встроенного элемента.

<!-- вместо этого: -->
<span id="name-label">Имя</span>
<input
  type="text"
  name="name"
  autocomplete="given-name"
  autocapitalize="words"
  aria-labelledby="name-label"
>

<!-- лучше сделать так: -->
<label for="name">Имя</label>
<input
  type="text"
  name="name"
  autocomplete="given-name"
  autocapitalize="words"
  id="name"
>

Всё бы хорошо, но <label> работает только со стандартными элементами управления: <input>, <select>, <textarea>, <button>, <meter>, <progress>, <output> и пользовательскими элементами, которые ассоциированы с формой.

Это значит, что если по тем или иным причинам пришлось создать собственный элемент управления на основе ARIA, то использовать <label> для привязки подписи к нему не получится. Подпись придётся также добавлять с помощью ARIA.

<!-- это не сработает: 
<label for="listbox">Пол</label>
-->
<!-- поэтому делают так: -->
<span id="listbox-label">Пол</span>
<div
  role="listbox"
  tabindex="0"
  id="listbox"
  aria-labelledby="listbox-label"
>
  <!-- опции -->
</div>

Также кажется логичным использование <label> для задания подписей не только к элементам управления, но и к контейнерам, у которых может быть указано имя. Сейчас для этого нужно использовать ARIA и следовать первому правилу не получается.

<!-- Примеры иллюстративные, 
не используйте их на реальных проектах! -->
<nav id="nav">
  <!-- это не сработает -->
  <label for="nav">Основная</label>
  <!-- ссылки -->
</nav>

<section id="faq-section">
  <h2>
    <!-- это не сработает -->
    <label for="faq-section">FAQ</label>
  </h2>
  <!-- список вопросов и ответов -->
</section>

<div role="group" id="socials">
  <!-- это не сработает -->
  <label for="socials">
    Мы в социальных сетях
  </label>
  <!-- ссылки на социальные сети -->
</div>

<!-- это не сработает -->
<label for="formatting">
  Форматирование текста
</label>
<div
  role="toolbar"
  id="formatting"
>
  <!-- опции форматирования -->
</div>

Раз <label> уже существует в HTML и может задавать имя для элемента управления через атрибут for, кажется, было бы полезно расширить эту функциональность и на другие элементы, где это уместно на основе роли элемента.

Или нужен новый элемент, например <name> (<caption> и <title> уже заняты), а <label> пусть остаётся только для стандартных элементов управления? Аналогичные идеи в сообществе были по поводу элемента <description>.

Что вы думаете по этому поводу? Проголосуйте в опросе ниже.

#html #a11y