Может ли поле ввода иметь две метки?

Question

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

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

Могу ли я иметь две метки для одного поля ввода? Один в правильной форме, а другой в тексте напоминания о проверке? Есть ли причина, по которой я не должен этого делать?

Answer 1

Я предполагаю, что этот вопрос о формах HTML. Из спецификации :

Элемент LABEL может использоваться для прикрепления информации к элементам управления. Каждый элемент LABEL связан только с одним элементом управления формой.

Таким образом, на каждый элемент управления формы могут ссылаться несколько меток, но каждая метка может ссылаться только на один элемент управления. Поэтому, если имеет смысл иметь вторую метку для элемента управления (и в описываемой вами ситуации это так), не стесняйтесь добавлять вторую метку.

Answer 2

HTML-код допустим, и он работает (нажатие на любую из меток перенесет фокус на рассматриваемое поле).

Немного сложнее поступить правильно по причинам доступности.

Это не «общий» подход, и из-за этого, по крайней мере, одна общая программа чтения с экрана (я тестировал с NVDA) читает только первую метку, когда вы перемещаете фокус в поле - она ​​игнорирует любые дополнительные метки для того же поля .

Таким образом, если ваше сообщение об ошибке находится в верхней части страницы, слепой пользователь или пользователь со слабым зрением, просматривающий поля, услышит только сообщение об ошибке при посадке на соответствующее поле, а не "реальный" ярлык рядом с ним. .

Следовательно - если вы правильно сформулируете сообщение об ошибке, это может быть хорошей идеей (конечно, лучше, чем просто выделить неподтвержденное поле красным!).

Answer 3

Да, у вас может быть несколько меток, указывающих на один и тот же элемент управления формы. Это совершенно законно :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Это всего лишь пример ... обычно вы бы обернули эти строки одной меткой, поскольку они близки.

Answer 4

Хотя это и допустимо, это не лучший способ связать несколько меток с одним элементом <input>. Вместо этого вы должны использовать атрибут aria-labelledby.

Сначала вы присваиваете уникальные атрибуты id элементам <label>. Затем вы помещаете атрибут aria-labelledby в элемент <input>, устанавливая его значение в значения id из элементов <label>, разделенных пробелом.

Вот пример со страницы "Использование атрибута aria-labelledby" в веб-документе MDN:

<div id="billing">Billing</div>

<div>
    <div id="name">Name</div>
    <input type="text" aria-labelledby="billing name"/>
</div>
<div>
    <div id="address">Address</div>
    <input type="text" aria-labelledby="billing address"/>
</div>