为什么在 `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 属性，当此控件获得焦点时，您将能够使用 space 栏检查无线电控件。

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

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

Answer 2

让用户按下标签上的空格键的方法的问题（除了它不起作用！）是这样做不是自然行为，所以键盘用户不会'不要这样做。

如果您要用 JavaScript 驱动的等效项替换复选框，您应该做的是让您的替换元素表现得像一个复选框。换句话说，允许它接收选项卡焦点，并在按下空格键时切换选中状态。将标签留给只是一个标签。

Answer 3

这里有一个解决方法，它保留 tabindex 的可访问性，并允许使用 spacebar

检查输入按钮

HTML

<form>
    <label id="radio1" tabindex="0">
        <input type="radio"><span class="label-text"></span></input>
    </label>
    <label id="radio2" tabindex="0">
        <input type="radio"><span class="label-text"></span></input>
    </label>
    <label id="radio3" tabindex="0">
        <input type="radio"><span class="label-text"></span></input>
    </label>
</form>

JS

document.addEventListener('keypress', (event) => {
    if(event.keyCode == '32'){
        if (document.activeElement.tagName.toLowerCase() == "label"){
            document.activeElement.childNodes[1].checked = true;
        }
    }
});

唯一的缺点是用户需要按两次 Tab 键才能从一个输入转到另一个。

顺便说一句，拥有 NV Access 或 Jaws 等软件的残障用户会为 Web 表单使用特殊的键盘快捷键，因为他们知道使用制表符和 space 键通常不起作用。

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

Why doesn't pressing the spacebar whilst a `label` has focus check radio button in `[for=""]` attr?

html

label

accessibility