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.

html radio-button label section508 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