<label for = "idx"> vs <label for = "namex">

Question

Я работаю над внедрением отчета о доступности WCAG для крупного веб-сайта. Как и ожидалось, одной из повторяющихся проблем являются метки в формах.

До сих пор я предполагал, что правильный способ связать метку формы с ее элементом - использовать имя входного элемента в атрибуте формы метки, например:

<label for="name[1]">Your name: </label>
<input type="text" name="name[1]" placeholder="Your name">

Однако среда, которую использует клиент, предпочитает выплевывать код следующим образом:

<label for="user_first_name">Your name: </label>
<input type="text" name="name[1]" id="user_first_name" placeholder="Your name">

Моя логика основывалась на понимании того, что не все элементы формы имеют атрибут «ID», позволяющий им однозначно манипулировать DOM (например, CSS и Javascript), но all POST- и GET- элементы формы метода do имеют атрибут 'name', позволяющий отправлять данные на удаленный сервер, наиболее часто используемый для клиентской формы браузера.

Я не хочу отправлять PR клиенту с ошибочным пониманием назначения атрибута «for» в тегах меток, что приведет к сбою их следующего аудита WCAG.

Так что это?

Answer 1

Согласно спецификации HTML 5.2 ,

Атрибут for может быть указан для указания элемента управления формы, с которым должен быть связан заголовок. Если атрибут указан, значение атрибута должно быть идентификатором помечаемого элемента в том же документе, что и элемент label. Если атрибут указан и в документе есть элемент, идентификатор которого равен значению атрибута for, и первый такой элемент является помечаемым элементом, то этот элемент является помеченным элементом управления label.

Другими словами, атрибут for ссылается на атрибут id элемента формы, такого как input, textarea или select. Атрибут id должен иметь уникальное значение во всем документе (это относится к атрибуту id любого элемента ), тогда как атрибут name не требуется быть уникальным. Например, переключатели в группе переключателей имеют одно и то же имя.

Поскольку HTML5.x написан для разработчиков браузеров, а не для веб-разработчиков, это иногда сложнее выяснить, чем в замененной в настоящее время спецификации HTML 4.01. Спецификация HTML 4.01 содержала таблицу атрибутов , которая включала информацию о типе каждого атрибута:

• id равен ID, что означает, что его значение должно быть уникальным во всем документе,
• for равен IDREF, что означает, что его значение ссылается на атрибут типа ID,
• name равен CDATA, т. Е. «Последовательность символов из набора символов документа».

(Типы ID, IDREF и CDATA взяты из DTD SGML, которые первоначально также использовались для документов XML, до введения XSD и других языков схемы. HTML5 не использует формальный SGML или XML язык схемы.)

То есть , если вы хотите соединить элементы label с элементами атрибута for, для этих элементов формы потребуется атрибут id . Это также отражено в технике H44 для WCAG 2.x, где примеры показывают методику for и id.

Answer 2

Значение атрибута for элемента label должно быть идентификатором не скрытого элемента управления формы .

Или вы можете обернуть поле ввода внутри метки, например

<label>Your name:<br>
<input type="text" name="name[1]"></label>

Answer 3

Просто для завершения предыдущих ответов, спецификация html для атрибута FOR <label> довольно ясна:

Атрибут for может быть указан, чтобы указать элемент управления формы с с которой заголовок должен быть связан. Если атрибут указан, значение атрибута должно быть ID из помечаемого элемента ...

И хотя пример неявной метки @ Erikm технически верен с точки зрения спецификации, есть некоторые программы чтения с экрана, которые не ассоциируют метку с вводом без атрибута for. Это ошибка в программе чтения с экрана, но вы все равно должны обойти ее, указав for.

<label for='myid'>Your name:<br>
<input type="text" name="name[1]" id='myid'></label>

Обратите внимание, что наличие <label for="some-id"> не только связывает метку с полем ввода, что очень важно для пользователей программы чтения с экрана, но также полезно для зрячих пользователей мыши, поскольку они могут щелкнуть метку, и фокус будет перейти в поле ввода.

Answer 4

Атрибут for метки всегда ссылается на id поля.

Имена имен неудачные и могут вводить в заблуждение, но на самом деле единственное использование name эффективно на стороне сервера, как вы упомянули.

Вполне возможно иметь поле с идентификатором, но без имени, если оно полностью обработано с помощью JavaScript. Это становится все более частым с такими фреймворками, как Angular или React.

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