为什么不按空格键而``label`在`[for =""]`attr中有焦点检查单选按钮？

Question

如果我有以下html,当标签有焦点时按空格键,为什么与它关联的无线电不能被检查？

<input type="radio" name="first-radio" id="first-radio-id">
<label for="first-radio-id" tabindex="1">The first radio</label>

这使得可访问性变得更加困难,是否有非JavaScript的解决方法？

这是一个JSFiddle示例:https://jsfiddle.net/atwright147/q0t53v78/

Answer 1

标签元素无意接收键盘焦点。

因此，只需删除该tabindex属性，当该控件获得焦点时，您就可以使用空格键检查该无线电控件。

如果您想控制与输入关联的标签的视觉效果，您可以将 CSS 更改为：

input:focus + label {
  outline: 1px dotted red;
}