L'utilisation de "label for" sur les boutons radio

Question

Lors de l'utilisation du paramètre "label for" sur les cases d'option 508 compliant *, est-ce correct?

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

ou est-ce?

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

Raison pour laquelle je demande est que dans le second exemple, « label » est englobante seul le texte et non sur le bouton radio réelle.

* l'article 508 de la Loi sur la réadaptation de 1973 exige que les organismes fédéraux pour assurer l'accessibilité du logiciel et le site Web pour les personnes handicapées.

Answer 1

Vous l'avez presque compris. Il devrait être ceci:

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

La valeur for devrait être l'id de l'élément que vous étiquetez.

Answer 2

Avec l'utilisation d'un identifiant correct et (comme indiqué par Marc W dans une autre réponse) fait DEUX sont conformes à 508. Voici un example using labels in different ways, affirmant qu'il est conforme en fait.

Answer 3

la structure ou l'autre est valide et accessible, mais l'attribut for doit être égale à la id de l'élément d'entrée:

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

ou

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

L'attribut for est facultative dans la deuxième version (étiquette contenant l'entrée), mais IIRC il y avait quelques navigateurs plus anciens qui n'ont pas rendu le texte d'étiquette cliquable à moins que vous l'ayez inclus. La première version (étiquette après l'entrée) est plus facile à un style CSS avec l'aide du sélecteur de frères et soeurs adjacents +:

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