我应该使用 role="button" 作为连接到复选框的标签吗？

Question

MDN 对 ARIA 按钮作用有如下解释：

按钮角色适用于可点击元素，当用户激活时会触发响应。添加 role="button" 告诉屏幕阅读器该元素是一个按钮，但不提供按钮功能。

如果我理解正确的话，基本的想法是，当用户可以单击某些东西来使事情发生时，并且该东西不是

<button>

，你应该给它

role="button"

。

这让我想到：当您将

<label>

元素与

<checkbox>

一起使用时，如下所示：

<label>
  <input type="checkbox"/>
  Click me
</label>

这样您就可以单击标签文本来单击复选框。换句话说，标签是一个非

button

可点击元素，当用户激活时会触发响应……所以它不应该获得 ARIA 角色吗？

我问这个是因为我在网上找不到任何这样的例子，所以我想我可能误解了这个角色。

Answer 1

有趣的问题。

不，您不应该将

<label> 

制作为按钮。

主要原因是标签元素只是一种 delegate 或另一个交互元素的助手，例如一个复选框。它是一个助手，本身并不需要处理交互。

在大多数情况下，标签元素上发生的任何单击事件都会发送到关联的交互元素。

document.querySelector('input').addEventListener('click', _ => alert("Checkbox was clicked"));

<label>
  <input type="checkbox">
  Click this text
</label>

标签元素的 HTML 标准提到了这一点：

对于针对标签元素的交互式内容后代以及这些交互式内容后代的任何后代的事件，标签元素的激活行为必须不执行任何操作。

<label>

的主要目标是为交互元素提供一个易于访问的名称。任何激活行为都留给平台。

通过使标签可点击来获得更大的目标很方便，因此大多数平台将点击重新路由到关联的元素。

对于焦点导航或辅助技术，标签通常是完全透明的，即被忽略。因此，

<label>

的隐含角色是

none

。

按钮根本没有这样的功能。它处于关注的中心，预计不会委托其激活。