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

Question

Khi sử dụng thông số "nhãn cho" trên các nút radio, là 508 compliant *, sau đây có đúng không?

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

hoặc đây?

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

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

* Mục 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 phần mềm và khả năng truy cập trang web cho người khuyết tật.

Answer 1

Bạn gần như đã nhận được. Phải là:

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

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

Answer 2

Với việc sử dụng id chính xác và cho (như được Marc W nêu trong một câu trả lời khác), thực tế CẢNH phù hợp với 508. Đây là số example using labels in different ways, cho rằng thực tế là tuân thủ.

Answer 3

Hoặc cấu trúc có giá trị và dễ tiếp cận, nhưng các thuộc tính for nên bằng với id của yếu tố đầu vào:

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

hoặc

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

Thuộc tính for 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ũ hơn không làm cho văn bản nhãn có thể nhấp được trừ khi bạn đã bao gồm nó. Phiên bản đầu tiên (nhãn sau khi đầu vào) là dễ dàng hơn để phong cách với CSS bằng cách sử dụng anh chị em liền kề selector +:

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