Веб-формы — Работа с пользовательскими данными

Элемент <метка>

Как мы видели в предыдущей статье, элемент — это формальный способ определения метки для виджета HTML-формы. Это самый важный элемент, если вы хотите создавать доступные формы — при правильной реализации программы чтения с экрана будут произносить метку элемента формы вместе с любыми связанными инструкциями, а также это будет полезно для зрячих пользователей. Возьмем этот пример, который мы видели в предыдущей статье:
Name:
Скопировать в буфер обмена
При правильном сопоставлении с атрибутом via for (который содержит атрибут элемента id) средство чтения с экрана будет читать что-то вроде «Имя, отредактировать текст».
Есть еще один способ связать элемент управления формы с меткой — вложить элемент управления формы в , неявно связав его.

Name:

Скопировать в буфер обмена
Однако даже в таких случаях рекомендуется установить атрибут, for чтобы все вспомогательные технологии понимали взаимосвязь между меткой и виджетом.
Если метки нет или если элемент управления формы не связан ни явно, ни неявно с меткой, программа чтения с экрана прочтет что-то вроде «Редактировать пустой текст», что совсем не очень полезно.

Ярлыки тоже кликабельны!

Еще одним преимуществом правильно настроенных меток является то, что вы можете щелкнуть или коснуться метки, чтобы активировать соответствующий виджет. Это полезно для таких элементов управления, как ввод текста, где вы можете щелкнуть метку, а также ввод, чтобы сфокусировать его, но это особенно полезно для переключателей и флажков — область нажатия такого элемента управления может быть очень маленькой, поэтому полезно, чтобы максимально упростить активацию.
Например, щелчок по тексту метки «Мне нравится вишня» в приведенном ниже примере изменит выбранное состояние флажка вкус_вишня:

I like cherry



I like banana

Скопировать в буфер обмена
Примечание. Этот пример можно найти в файле checkbox-label.html ( см. его также вживую ).