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

Answer 2

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

如果您使用JavaScript驱动的等效项替换复选框，那么您应该做的是使替换元素的行为类似于复选框。换句话说，允许它接收标签焦点，并在按下空格键时将其切换为检查状态。将标签留作标签。

Answer 3

这是一种解决方法，可保留tabindex的可访问性，并允许使用空格键检查输入按钮

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之类的软件的BTW残疾用户会使用特殊的键盘快捷方式来处理Web表单，因为他们知道使用Tab键和空格键通常不起作用。

为什么不按空格键，而`标签'在`[for =＆＃34;＆＃34;]`attr？中有焦点检查单选按钮？

3 个答案: