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

Question

如果我有以下 html，当标签具有焦点时按空格键，为什么不检查与其关联的 radio ？

<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 属性，当此控件获得焦点时，您将能够使用空格键检查 radio 控件。

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

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