Элементам формы не сопоставлены ярлыки (Form elements do not have associated labels)

Благодаря ярлыкам элементы управления на форме должным образом объявляются технологиями специальных возможностей (например, программами чтения с экрана). Пользователи специальных возможностей с помощью этих ярлыков перемещаются по элементам формы. Они полезны и при использовании мыши и сенсорных экранов: текст ярлыка увеличивает цель для нажатия.

Когда этот аудит Lighthouse считается непройденным #

Lighthouse помечает элементы формы, которым не сопоставлены ярлыки:

Добавление ярлыков к элементам формы #

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

<label>
  Получать рекламные предложения?
  <input type="checkbox">
</label>

Во-вторых, можно использовать атрибут ярлыка for и обратиться к идентификатору элемента:

<input id="promo" type="checkbox">
<label for="promo">Получать рекламные предложения?</label>

Если надлежащим образом назначать флажкам ярлыки, то функции специальных возможностей сообщат, что у элемента роль флажка, он отмечен и называется «Получать рекламные предложения?» См. также Ярлыки для элементов формы.

Материалы #

• Исходный код аудита Элементам формы не сопоставлены ярлыки (Form elements do not have associated labels).
• У элементов <input> форм должны быть ярлыки (Deque University).