Envolvendo um elemento label dentro de um elemento legend
Pergunta
Eu nunca tive uma razão para colocar um elemento etiqueta dentro de um elemento de legenda (realmente nunca pensei sobre isso ou visto isto ser feito). Mas com o projeto Estou implementando, é tentador para fazê-lo.
Aqui está o que eu estou tentado a fazer:
<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
<option value="Cats">Cats</option>
<option value="Dogs">Dogs</option>
<option value="Lolz">Lolz</option>
</select>
</fieldset>
Ele funciona como esperado (clicando no rótulo se concentra a entrada correspondente) em Firefox3, Safari, Opera, e IE6 / 7 e que passa a validação, mas eu só estou querendo saber se existem razões conhecidas (acessibilidade? Semântica? Navegador questões) por que isso não deve ser feito
Solução
Onde está a sua </fieldset>
?
Semanticamente, legend
descreve um fieldset
, apenas como label
descreve um único campo.
Os fieldsets devem ser usados ??para agrupar campos semanticamente relacionados (por exemplo, um conjunto de campos "endereço" pode ter campos de entrada para rua, cidade e país).
Supondo que você tenha mais de um campo no conjunto de campos, em seguida, fazer o que você sugere não semanticamente faz sentido -. Você precisa criar texto da legenda em separado que descreve o conjunto de campos, em seguida, um rótulo para cada campo
Se você tiver apenas um campo, então você não precisa de campos ou lenda em tudo.
Então, basicamente, você não deve fazer o que você está fazendo.
Se você está fazendo isso para ter elementos extra para anexar regras CSS ou eventos JavaScript para, você é melhor fora de usar elementos genéricos como div
e span
que não vai confundir text-to-speech e outro usuário não-visual agentes.
i., Colocando em um div
ou span
é efetivamente neutro em termos de acessibilidade / semântica (isto implica nada) versus abusar um elemento semântico (mesmo que apenas um pouco, como neste caso), que é potencialmente enganosa. Imagine que até mesmo o melhor-caixa cenário para o seu layout em um navegador de texto-para-fala: O texto é lido em voz alta duas vezes, uma como a lenda e uma vez como rótulo - por que alguém iria querer a frase "I gostaria de obter informações sobre" ler em voz alta duas vezes para eles? Especialmente porque ela só faz sentido no contexto das escolhas no controle select
.
Outras dicas
bem, o elemento label em si parece muito bem - é a descrição do elemento "formInfo", de modo que é não se preocupe. Semanticamente, no entanto, o que é este provérbio sobre o elemento legend
? É suposto ser uma legenda para todo o conjunto de campos ....