Usando "label for" nos botões de opção

136

Ao usar o parâmetro "label for" nos botões de opção, para compatibilidade com 508 *, o seguinte está correto?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

ou é isso?

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

O motivo pelo qual pergunto é que, no segundo exemplo, "label" abrange apenas o texto e não o botão de opção real.

* A Seção 508 da Lei de Reabilitação de 1973 exige que as agências federais forneçam software e acessibilidade ao site para pessoas com deficiência.

— niico
fonte

Respostas:

216

Você quase entendeu. Deve ser o seguinte:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

Expandir snippet

O valor em fordeve ser o ID do elemento que você está rotulando.

— Marc W
fonte

Você responde, é claro, é verdade, mas Martha tem a resposta certa. Ambos os exemplos de Martha são HTML5 perfeitamente válidos. E, por exemplo, se você deseja que tudo esteja em um quadro, é mais fácil estilizar o segundo usando CSS. Se você deseja que os rótulos estejam em outro lugar, primeiro. Mas ambos estão bem. Cumprimentos!

— Jacek Kowalewski

Hmm .. Como você faz uma etiqueta alternar entre dois botões de opção? Você não pode ter dois IDs idênticos ...: /

— Nils Sens

@NilsSens Cada par de rádio e etiqueta deve ter um ID único é que eles nunca devem compartilhar do ID

— Daniel Waters

@NilsSens Alterna entre 2 botões de opção e eles têm apenas 1 rótulo? Parece um caso claro para usar uma caixa de seleção: D

— T_D

Ah, não, o que eu quis dizer foi um super rótulo que alterna os botões de opção. Como: Categoria fruta favorita e quando você clica nessa, alterna entre idk "banana" e "strawberry". Porque, por que impor o movimento do mouse UX quando você pode simplesmente alternar as opções. Hoje, eu usaria o JS apenas para codificá-lo manualmente, mas seria interessante saber se existe uma única maneira de CSS :)

— Nils Sens

Qualquer uma das estruturas é válida e acessível, mas o foratributo deve ser igual ao do idelemento de entrada:

<input type="radio" ... id="r1" /><label for="r1">button text</label>

<label for="r1"><input type="radio" ... id="r1" />button text</label>

O foratributo é opcional na segunda versão (rótulo contendo entrada), mas no IIRC havia alguns navegadores mais antigos que não tornavam o texto do rótulo clicável, a menos que você o incluísse. A primeira versão (rótulo após entrada) é mais fácil de estilizar com CSS usando o seletor de irmão adjacente +:

input[type="radio"]:checked+label {font-weight:bold;}

— Martha
fonte

Verdadeiro, embora no segundo exemplo, o atributo "for" não seja necessário.

— Ishmael

Eu acho que havia algumas versões do navegador que apenas tornavam o texto do botão "clicável" se você usasse o atributo 'for', ou seja, envolver a entrada dentro do rótulo não era suficiente.

— 28822 Martha

@ Martha - Você sabe quais navegadores?

— Kirkland

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 parece indicar que o segundo formulário é válido, mas várias fontes indicam que o suporte pode não ser universal. Provavelmente, é melhor fornecer o foratributo em qualquer caso.

— Ishmael

@RalphDavidAbernathy Sim, as mesmas regras se aplicam às caixas de seleção.

— Ishmael

(Em primeiro lugar leia as outras respostas que explicou a fornos <label></label>tags. Bem, ambas as respostas tops são corretas, mas para o meu desafio, que era quando você tem várias caixas de rádio, você deve selecionar para eles um nome comum como name="r1" , mas com diferentes ids id="r1_1" ... id="r1_2"

Portanto, a resposta é mais clara e remove os conflitos entre nome e ID também.

Você precisa de IDs diferentes para diferentes opções da caixa de rádio.

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>

Expandir snippet

— Ebrahim
fonte