Utilisation de "étiquette pour" sur les boutons radio

Question

Lorsque l'on utilise le paramètre "label for" sur des boutons radio, pour être Conforme à la norme 508 *, est-ce que ce qui suit est correct ?

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

ou c'est ça ?

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

La raison de ma question est que, dans le deuxième exemple, "label" n'englobe que le texte et non le bouton radio lui-même.

*La section 508 du Rehabilitation Act de 1973 exige que les agences fédérales assurent l'accessibilité des logiciels et des sites Web aux personnes handicapées.

Answer 1

Vous l'avez presque. Ça devrait être ça :

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

La valeur en for doit être l'identifiant de l'élément que vous étiquetez.

Answer 2

L'une ou l'autre structure est valable et accessible, mais la for doit être égal à l'attribut 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>

El for est facultatif dans la deuxième version (étiquette contenant l'entrée), mais il existe des navigateurs plus anciens qui ne rendent pas le texte de l'étiquette cliquable si vous ne l'incluez pas. La première version (étiquette après l'entrée) est plus facile à styliser avec CSS en utilisant le sélecteur adjacent sibling + :

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

Answer 3

Avec l'utilisation d'un identifiant correct et pour (comme indiqué par Marc W dans une autre réponse) en réalité LES DEUX sont conformes à la norme 508. Voici un exemple d'utilisation des étiquettes de différentes manières en affirmant qu'il est en fait conforme.

Answer 4

(Lisez d'abord les autres réponses qui ont expliqué le principe de l'égalité des chances. for dans le <label></label> tags. Les deux réponses sont correctes, mais pour mon défi, c'est lorsque vous avez plusieurs cases d'option, vous devez sélectionner pour elles un nom commun comme name="r1" mais avec des identifiants différents id="r1_1" ... id="r1_2"

Ainsi, la réponse est plus claire et les conflits entre le nom et les identifiants sont également éliminés.

Vous avez besoin de différents identifiants pour les différentes options de la boîte radio.

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