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