Używanie „etykiety dla” na przyciskach opcji

Czy w przypadku używania parametru „etykieta dla” na przyciskach opcji, aby zapewnić zgodność ze standardem 508 *, czy poniższe stwierdzenia są prawidłowe?

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

czy to jest?

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

Pytam, dlaczego w drugim przykładzie „etykieta” obejmuje tylko tekst, a nie faktyczny przycisk opcji.

* Paragraf 508 Ustawy o rehabilitacji z 1973 r. Nakłada na agencje federalne obowiązek zapewnienia osobom niepełnosprawnym dostępu do oprogramowania i stron internetowych.

Prawie to masz. Powinno być tak:

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

Wartość w forpowinna być identyfikatorem etykietowanego elementu.

Obie struktury są prawidłowe i dostępne, ale foratrybut powinien być równy idelementowi wejściowemu:

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

lub

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

forAtrybut jest opcjonalny w wersji drugiej (etykieta zawierająca wejście), ale IIRC było kilka starszych przeglądarek, które nie sprawiają klikalny tekst etykiety, chyba że włączyła ją. Pierwsza wersja (etykieta po wejściu) jest łatwiejsza do stylizacji za pomocą CSS przy użyciu sąsiedniego selektora rodzeństwa +:

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

(Najpierw przeczytaj inne odpowiedzi, które wyjaśniły forw <label></label>tagach. Cóż, obie górne odpowiedzi są poprawne, ale dla mojego wyzwania było to, gdy masz kilka skrzynek radiowych, powinieneś wybrać dla nich wspólną nazwę, taką jak name="r1" ale z różnymi identyfikatorami id="r1_1" ... id="r1_2"

W ten sposób odpowiedź jest jaśniejsza i usuwa również konflikty między nazwą a identyfikatorami.

Potrzebujesz różnych identyfikatorów dla różnych opcji skrzynki radiowej.

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