Envolvendo um elemento label dentro de um elemento legend

Question

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

Answer 1

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.

Answer 2

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 ....