Sử dụng nhãn trên nền tảng cho các nút radio

Khi sử dụng tham số "nhãn cho" trên các nút radio, để tuân thủ 508 *, điều nào sau đây có đúng không?

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

hay đây là

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

Lý do tôi hỏi là trong ví dụ thứ hai, "nhãn" chỉ bao gồm văn bản chứ không phải nút radio thực tế.

* Phần 508 của Đạo luật Phục hồi năm 1973 yêu cầu các cơ quan liên bang cung cấp khả năng truy cập phần mềm và trang web cho người khuyết tật.

Bạn gần như đã có nó. Nó nên là thế này:

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

Giá trị trong forphải là id của phần tử bạn đang gắn nhãn.

Cấu trúc là hợp lệ và có thể truy cập được, nhưng forthuộc tính phải bằng với idphần tử đầu vào:

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

hoặc là

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

Các forthuộc tính là không bắt buộc trong phiên bản thứ hai (nhãn chứa đầu vào), nhưng IIRC có một số trình duyệt cũ mà không làm cho các nhấp chuột được văn bản nhãn, trừ khi bạn có nó. Phiên bản đầu tiên (nhãn sau khi nhập) dễ dàng tạo kiểu hơn với CSS bằng cách sử dụng bộ chọn anh chị em liền kề +:

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

(Trước tiên hãy đọc các câu trả lời khác đã giải thích fortrong các <label></label>thẻ. Chà, cả hai câu trả lời trên đều đúng, nhưng đối với thử thách của tôi, đó là khi bạn có một vài hộp radio, bạn nên chọn cho chúng một tên chung như name="r1" nhưng với các id khác nhau id="r1_1" ... id="r1_2"

Vì vậy, theo cách này, câu trả lời rõ ràng hơn và cũng loại bỏ xung đột giữa tên và id.

Bạn cần các id khác nhau cho các tùy chọn khác nhau của hộp 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>