Я работаю над созданием отчета о доступности 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), но элементы формы все POST- и GET-методов делать имеют 'имя' Атрибут, позволяющий отправлять данные на удаленный сервер, наиболее часто используется в клиентских браузерных формах.
Я не хочу отправлять PR клиенту с ошибочным пониманием цели атрибута «for» в тегах меток, что приведет к провалу следующего аудита WCAG.
Так что это?
Атрибут for метки всегда относится к я бы поля.
Именование неудачно и может сбивать с толку, но на самом деле, единственное использование имя эффективно на стороне сервера, как вы упомянули.
Вполне возможно иметь поле с идентификатором, но без имени, если оно полностью обрабатывается с помощью JavaScript. Это становится все более частым с такими фреймворками, как Angular или React.
Напротив, не может быть никакой метки, связанной с полем, если у него нет идентификатора. Поскольку у поля должна быть метка, указывающая, какой ввод ожидается, каждое поле должно иметь идентификатор. В противном случае ваш сайт или приложение будут недоступны.
Значение атрибута for элемента метки должен быть идентификатором не скрытого элемента управления формой.
Или вы можете обернуть поле ввода внутри метки, например.
<label>Your name:<br>
<input type = "text" name = "name[1]"></label>
Чтобы завершить предыдущие ответы, html для атрибута FOR <label>
довольно ясен:
The
for
attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute’s value must be the ID of a labelable element...
И хотя пример неявной метки @ Erikm технически верен с точки зрения спецификации, есть некоторые программы чтения с экрана, которые не связывают метку с вводом без атрибута for
. Это ошибка программы чтения с экрана, но вы все равно должны обойти ее, указав for
.
<label for='myid'>Your name:<br>
<input type = "text" name = "name[1]" id='myid'></label>
Обратите внимание, что наличие <label for = "some-id">
не только связывает метку с полем ввода, что важно для пользователей программ чтения с экрана, но также полезно для зрячих пользователей мыши, потому что они могут щелкнуть метку, и фокус переместится в поле ввода .
Быстрый тест: действие «щелчок для выбора» не выполняется в Chrome (67) или IE-11, если for
ссылается на поле name
.
Я просто дважды проверил, и у меня работают firefox (63), chrome (67.0.3396.99) и IE (11.0.9600.18920) все. Проверьте свой html или опубликуйте код, который не работает.
Извините, если мой комментарий сбил с толку: я не тестировал версию со "встроенной меткой" (вы заметили, что должен все еще соответствует for
с id
) ... Я комментировал ваш бит "щелкните по метке, и фокус переместится в поле ввода" и то, как код OP оригинал (соответствует for
с name
) этого не делали. Мой реальный код был чем-то вроде <label for = "fred">This is a label</label><p>Some text</p><input type = "text" name = "fred"/>
. Замена name=
на id=
заставила его работать. Извините за путаницу.
Если метка правильно связана с полем ввода, неявно (путем вложения ввода в тег open label) или явно (с помощью атрибута for), то щелчок по метке переместит фокус на поле ввода. Он работает в Chrome, Firefox и IE. (У меня нет доступа к сафари).
Согласно Спецификация HTML 5.2,
The
for
attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute’s value must be the ID of a labelable element in the same Document as thelabel
element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of thefor
attribute, and the first such element is a labelable element, then that element is thelabel
element’s labeled control.
Другими словами, атрибут 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
происходят из SGML DTD, которые изначально также использовались для XML-документов, до появления XSD и других языков схем. HTML5 не использует никаких формальных языков схем SGML или XML.)
Итак, если вы хотите соединить элементы label
для формирования элементов с помощью атрибута for
, этим элементам формы потребуется атрибут id
. Это также отражено в Техника H44 для WCAG 2.x, где Примеры показывает методы for
и id
.
Соответствующий метод WCAG ➡️ H44: Использование элементов меток для связывания текстовых меток с элементами управления формы (см. Пример 2 и, в частности, тесты)