web-dev-qa-db-fra.com

Utiliser "label for" sur les boutons radio

Lorsque vous utilisez le paramètre "libellé pour" sur les boutons radio, conforme à 508 *, les éléments suivants sont-ils corrects?

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

La raison que je pose est que, dans le deuxième exemple, "label" englobe uniquement le texte et non le bouton radio proprement dit.

* L'article 508 de la loi sur la réadaptation de 1973 impose aux agences fédérales de fournir aux personnes handicapées un accès aux logiciels et aux sites web.

htmlradio-buttonlabelsection508
130
Wilkie

Vous l'avez presque. Ce devrait être ceci:

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

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

205
Marc W

L'une ou l'autre structure est valide et accessible, mais l'attribut for devrait être égal à id de l'élément en 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 facultatif dans la deuxième version (étiquette contenant une entrée), mais certains anciens navigateurs IIRC ne permettaient pas de cliquer sur le texte de l'étiquette à moins de l'inclure. La première version (étiquette après entrée) est plus facile à styler avec CSS en utilisant le sélecteur de fratrie adjacent +:

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

(Tout d’abord, lisez les autres réponses qui ont expliqué le for dans le <label></label> Mots clés. Eh bien, les deux réponses sont correctes, mais pour mon défi, c’est lorsque vous avez plusieurs boîtes de radio, vous devez les sélectionner n nom commun comme name="r1"mais avec des identifiants différentsid="r1_1" ... id="r1_2"

Ainsi, la réponse est plus claire et élimine également les conflits entre nom et identifiant.

Vous avez besoin de différents identifiants pour différentes options de la 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>
0
Ebrahim