Метки, флажки и переключатели

Мое веб-приложение использует формы, изложенные в примере ниже ...

First Name      [____________]
Last Name       [____________]
Gender          () Male  () Female

Разметка, которую я использую, похожа на ...

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

У меня есть следующие проблемы, которые я не знаю, как решить ...

Я хочу, чтобы целая группа радиокнопок была помечена как любое другое поле (как на диаграмме выше), но нет ничего, с чем можно связать метку (т.е. ничего для ее атрибута "for", поскольку у каждой радиостанции в группе есть свой собственная метка только для значения отдельной радиокнопки) Метка без атрибута «for» не будет соответствовать требованиям доступности.

Элемент <legend> набора полей, кажется, дублирует функцию метки. Это действительно необходимо?

Я думал о том, чтобы стилизовать тег <legend> так, чтобы он выглядел так, как будто это ярлык, и вообще обошелся без ярлыка для группы переключателей, но мне это кажется немного хакерским, а также привнесет сложности в другие части моего кода (что полагается на элементы <label>, чтобы сделать изящную разметку сообщения проверки и многое другое)

Заранее спасибо.

 user137843001 нояб. 2012 г., 22:34
Бесплатный совет. Избегайте использования переключателей в максимально возможной степени. Это боль для пользователей программ чтения с экрана и пользователей, имеющих проблемы со зрением (проблемы с масштабированием и гибкость, необходимые для их использования).

Ответы на вопрос(2)

Решение Вопроса

Код должен быть:

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

Когда вспомогательная технология нажимает на кнопку-переключатель для мужчин, большинство из них будет выглядеть следующим образом: «Пол: переключатель-мужчина 1 из 2 не выбран».

Тогда вы можете использовать CSS наfieldset, legend, этикетки иinputs, Если память служит правильно, наборы полей могут быть очень важны, поэтому я могу добавить<div> к нему:

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <div>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
  </div>
</fieldset>

Добавление этого<div> не имеет никаких последствий для доступности.

Как и в комментарии в ответе ssollinger, вы можете сброситьfieldset а такжеlegend подход, но вам нужно будет построить все, чтобы сделать его доступным,пример сборки

 Ryan B31 окт. 2012 г., 18:32
Какая ситуация? Выравнивание полей? это просто, как они структурированы на уровне DOM.
 Bumpy30 окт. 2012 г., 22:46
Спасибо за совет. Не был уверен, чей ответ принять, поэтому я пошел за Райаном, чей ответ был более полным и менее ошибочным (извините ssollinger)
 GlenPeterson09 нояб. 2012 г., 16:59
Спасибо, Райан. Очень актуально. Грустная часть этого подхода заключается в том, что его нельзя использовать, когда метка и форма находятся в отдельных ячейках таблицы. Я пытаюсь создать код, который генерирует эти вещи, и он не будет знать, как широко сделать столбец метки заранее, поэтому я думаю, что мне нужно использовать таблицу, чтобы позволить браузеру принять решение. Почему они не могли заставить радио работать как select:<radio id=r1><option val=1>First</option><option val=2>Second</option></radio>
 Ryan B09 нояб. 2012 г., 21:51
@GlenPeterson да, может. Если вы поместите идентификатор на элемент формы, иfor атрибут label, метка, вызывающая идентификатор, может быть буквально где угодно на странице, и это нормально. Если вам нужно что-то сделать на лету, я предлагаю вам задать новый вопрос.
 Bumpy30 окт. 2012 г., 22:53
Честно говоря, я удивлен, что с такой ситуацией больше не сталкивались, поскольку шаблон надписи с группой радиокнопок является достаточно стандартным в проектах, над которыми я работал. Стиль легенды, чтобы она выглядела как ярлык, по-прежнему кажется мне не совсем понятным, но клиент настаивает на том, чтобы ярлыки были там, а формы были доступны, и я не вижу другого выбора, кроме полноценной сборки арии, которая У меня просто нет времени на Спасибо!

<legend> тег, чтобы он выглядел так, как если бы он был меткой, и полностью исключил метку для группы переключателей,…

Это правильный способ сделать это. «Пол» - это не ярлык для чего-либо, ярлыки для радиобоксов - «мужской» и «женский». «Пол» - это легенда набора полей, который группирует переключатели вместе. Правильный способ реализации этой формы - удалить метку «Пол» и просто оставить поле сlegend "Пол".

Технически, вы могли бы добавить<div> вокруг переключателей и укажитеfor= метки «Пол», но я вполне уверен, что это вызовет проблемы с доступностью (хотя я не пробовал с программой для чтения с экрана), поэтому я настоятельно рекомендую избавиться от метки «Пол».

 Ryan B26 окт. 2012 г., 17:22
нет указаниеfor не будет работать. Атрибут for просматривает только элементы формы. Вы можете использовать два div вместо fieldset / legend. Новыйdiv действуя какlegend понадобитсяid, Тогда половым данным нужно будет датьaria-describedby= атрибут со значением идентификатора.

Ваш ответ на вопрос