html - 在单选按钮上使用“label for”

Question

在单选按钮上使用“label for”参数时，为了符合508 *，以下是否正确？

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

还是这个？

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

我问的原因是，在第二个示例中，“标签”仅包含文本而不包含实际的单选按钮。

* 1973 年《康复法案》第 508 条要求联邦机构为残疾人提供软件和网站可访问性。

Answer 1

你几乎明白了。应该是这样的：

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

中的值for应该是您要标记的元素的 id。

Answer 2

任一结构都是有效且可访问的，但for属性应等于id输入元素的属性：

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

或者

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

该for属性在第二个版本中是可选的（包含输入的标签），但 IIRC 有一些较旧的浏览器不会使标签文本可点击，除非您包含它。第一个版本（输入后的标签）使用相邻的兄弟选择器更容易使用 CSS 设置样式+：

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

Answer 3

（首先阅读标签中解释过的其他答案for。<label></label>好吧，两个最重要的答案都是正确的，但对于我的挑战，当你有几个单选框时，你应该为它们选择一个通用名称，name="r1" 但具有不同的 id id="r1_1" ... id="r1_2"

所以这样答案就更清楚了，也消除了 name 和 ids 之间的冲突。

对于单选框的不同选项，您需要不同的 id。

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