Question

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

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

我要问的是，在第二个例子中，“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" ，但要使用不同的名称ids id="r1_1" ... id="r1_2"

这样，答案就更加清楚了，并且还消除了名称和ID之间的冲突。

对于单选框的不同选项，您需要使用不同的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>

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

3 个答案: