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

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

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>, чтобы сделать изящную разметку сообщения проверки и многое другое)

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

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

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