Etiquetas, caixas de seleção e botões de opção
Minha aplicação web usa formulários definidos como no exemplo abaixo ...
First Name [____________]
Last Name [____________]
Gender () Male () Female
A marcação que eu uso é algo como ...
<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>
Eu tenho os seguintes problemas que não sei como resolver ...
Eu quero ter o GRUPO INTEIRO de botões de rádio rotulado como qualquer outro campo (como no diagrama acima), mas não há nada para vincular o rótulo (ou seja, nada para o seu atributo "for", já que cada rádio do grupo tem sua própria etiqueta apenas para o valor do botão de opção individual) Uma etiqueta sem um atributo "for" não passa a conformidade de acessibilidade.
O elemento <legend> do conjunto de campos parece duplicar a função do rótulo. Isso é realmente necessário?
Eu tinha pensado em estilizar a tag <legend> para parecer uma etiqueta, e dispensar completamente a etiqueta para o grupo de botões de rádio, mas isso parece um pouco hacky para mim, e também irá introduzir complexidades em outro lugar no meu código (que depende de elementos <label> para fazer uma marcação de mensagem de validação bacana e várias outras coisas)
Desde já, obrigado.