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

Я работаю над созданием отчета о доступности 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.

Так что это?

Соответствующий метод WCAG ➡️ H44: Использование элементов меток для связывания текстовых меток с элементами управления формы (см. Пример 2 и, в частности, тесты)

FelipeAls 02.11.2018 10:53
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
432
4

Ответы 4

Атрибут 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.

TripeHound 01.11.2018 15:03

Я просто дважды проверил, и у меня работают firefox (63), chrome (67.0.3396.99) и IE (11.0.9600.18920) все. Проверьте свой html или опубликуйте код, который не работает.

slugolicious 01.11.2018 19:08

Извините, если мой комментарий сбил с толку: я не тестировал версию со "встроенной меткой" (вы заметили, что должен все еще соответствует for с id) ... Я комментировал ваш бит "щелкните по метке, и фокус переместится в поле ввода" и то, как код OP оригинал (соответствует for с name) этого не делали. Мой реальный код был чем-то вроде <label for = "fred">This is a label</label><p>Some text</p><input type = "text" name = "fred"/>. Замена name= на id= заставила его работать. Извините за путаницу.

TripeHound 02.11.2018 08:56

Если метка правильно связана с полем ввода, неявно (путем вложения ввода в тег open label) или явно (с помощью атрибута for), то щелчок по метке переместит фокус на поле ввода. Он работает в Chrome, Firefox и IE. (У меня нет доступа к сафари).

slugolicious 03.11.2018 01:11

Согласно Спецификация 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 the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label 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.

Другие вопросы по теме