为什么在`label`获得焦点时按空格键不能检查带有 `[for=""]` 属性的单选按钮？

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/

- atwright147

Answer 1

元素不适合接收键盘焦点。

因此，只需删除 tabindex 属性，当该控件聚焦时，您就可以使用空格键检查单选框控件。

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

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

- Adam

---

嘿，我特别需要标签来触发其关联的单选框的选中状态。在我的应用中，实际的单选框被隐藏了，并且使用<span>来创建一个伪造的单选按钮。该单选框永远不能获得焦点。 - atwright147

如果收音机没有焦点，那么您应该重新构造您的问题以满足您的需求：如何使用ARIA模拟单选按钮？ 例如，请参见：http://wiki.accede-web.com/en/notices/interfaces-riches-javascript/boutons-radio-simules - Adam

你说得对，事实证明CSS中存在缺陷，这让我走了一条错误的路。解决方案与你的代码非常相似。非常感谢你 :) - atwright147

@jck 不，tabindex 已经在 input 元素上了。将 tabindex 应用于非交互元素会使其无法访问。 - Adam

@jck，你应该为此开一个新问题。从我看到的情况来看，你的“input”元素没有名称，因此它们属于同一组，只有第一个在按Tab键时会聚焦，并且你可以使用箭头键选择另一个元素。 - Adam

Answer 2

使用让用户按标签上的空格键的方法存在问题（除了它不起作用之外！），就是这不是自然的行为方式，所以键盘用户不会这样做。

如果您正在使用JavaScript驱动的替代复选框，那么您应该让替代元素表现得像复选框。换句话说，允许它接收Tab焦点，并在其上按下空格键时切换选中状态。将标签保留为标签即可。

- Fiona - myaccessible.website

---

这是完全正确的，你可以在这里检查我的解决方案，它可以保持可访问性。 - jck

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 这样的软件来操作网络表单时，会使用特殊的键盘快捷键，因为他们知道使用 Tab 和空格键通常不起作用。

- jck

---

虽然这种方法很有创意，而且确实回答了OP的问题，但我强烈反对这样做。将<label>设置为tabstop会降低可访问性，因为该标签没有role。只有交互式元素才应该是tab stop。仅仅因为标签有一个键盘处理程序并不意味着标签是一个“正常”的交互式元素。这会非常令人困惑。一些屏幕阅读器在焦点移动到标签时会说“可点击”，给屏幕阅读器用户一个提示，表明您可以选择该元素，但是，如果该元素没有角色，它将会令人困惑。 - slugolicious

@slugolicious 我花了几个小时和一个使用NV Access的残障人士在一起，这是我们目前找到的唯一解决方案。你能否fork我的fiddle来展示如何做到最佳实践？https://jsfiddle.net/uj7kgw65/ - jck

正如您在这里所看到的，删除tabindex属性会使表单中的Tab键无法使用：https://jsfiddle.net/9a5u34c1/ - jck

我在Firefox上使用NVDA（来自NV Access）运行了第二个小提琴示例（9a5u34c1），并能够通过Tab键到达每个单选按钮，并使用空格键进行选择。看起来工作得很好。单选按钮本身没有正确编码（所有按钮应具有相同的“name”属性），但对于初始测试来说还是可以的。单选按钮非常简单，如果坚持使用基本的HTML，它们就能很好地工作。 - slugolicious