在单选按钮上使用"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>

我问的原因是在第二个例子中,"label"只包含文本而不是实际的单选按钮.

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

Answer 1

你几乎得到了它.它应该是这样的:

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

值in for应该是您标记的元素的id.

Answer 2

这两种结构都是有效且可访问的,但该for属性应该等于idinput元素的属性:

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