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

134

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

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

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

html forms labels

— aslum
источник

Вы пробовали, что происходит? Если это сработает, я не верю, что это нанесет вред ни вашей форме, ни странице. И вы получите плюс, потому что пользователь сможет щелкнуть ошибку проверки и сфокусироваться на правильном поле.

— Фелипе Киприано,

Я не пробовал, но думаю, что это возможно. Но я не рекомендую его использовать, потому что метка определяет, для чего поле, а сообщение об ошибке - нет. Поэтому я не должен использовать ярлык для предупреждений о проверке.

— Гвидо Хендрикс

Это общий вопрос дизайна / удобства использования пользовательского интерфейса?

— jball

Да. Он "работает" ... но почему это плохой дизайн? Я предполагаю, что это может быть из соображений доступности, но для обычного пользователя я полагаю, что возможность щелкнуть сообщение об ошибке и попасть в поле испорченного упростит задачу ... Я просто не знаю, будет ли это испортить "читалки для слабовидящих" или тому подобное.

— aslum

В некоторых случаях проще поместить элемент управления и текст внутрь одного label. Вы можете даже опустить forи idатрибуты. В спецификации это называется неявной ассоциацией.

— rybo111

Ответы:

158

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

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

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

— Джеймс Самнерс
источник

Это действительно больше вопрос удобства использования / доступности, чем HTML. HTML работает.

— aslum

Мы все должны использовать только действительный код, иначе что-то может сломаться в будущем или у кого-то другого, или с какой-нибудь библиотекой JS или чем-то еще.

— Шернандес

Правильный ответ - Роб. Это решение работает для зрячих пользователей и не работает в некоторых программах чтения с экрана. Aslum, предполагаю, что вы приняли ответ jsummers выше до того, как Роб отправил свой ответ.

— Cage rattler

@AvramLavinsky нет, это правильный ответ на вопрос "может ли поле иметь две метки?" Спецификация довольно ясна. Как клиенты будут интерпретировать это, зависит от них. Ваша ссылка на «aria -astedby», которая ведет к «aria-labeledby», - это способ «исправить» неработающие программы чтения с экрана.

— Джеймс Самнерс

Забавный MDN говорит: «Один вход может быть связан с несколькими ярлыками». developer.mozilla.org/en-US/docs/Web/HTML/Element/label

— 2540625 06

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

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

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

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

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

— Роб Уилан
источник

Это правильно, и правильный способ закодировать это с помощью атрибута aria-describeby

— cage rattler

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

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

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

— Герт Гренандер
источник

+1 за ссылку на документ, где четко указано, что «Более одного LABELможет быть связано с одним и тем же элементом управления путем создания нескольких ссылок через forатрибут».

— alexg