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

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

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

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

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

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

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

HTML является допустимым, и он работает (щелчок по любой из меток переведет фокус на соответствующее поле).

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

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

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

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

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

<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">

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