关联checkbox的label元素是否应添加role="button"属性？

背景与问题 #

MDN对ARIA button role的解释如下：
button角色适用于用户激活时会触发响应的可点击元素。添加role="button"会告知屏幕阅读器该元素是按钮，但不提供按钮功能。

我之前的理解是：当用户可点击某非元素触发操作时，应为其添加role="button"。但遇到如下场景：用包裹时，点击文本即可切换复选框状态，代码示例：

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

这里是可点击的非

元素且能触发响应，那是否需要给它添加role="button"？我没找到相关示例，怀疑自己对该ARIA角色的理解有误。

解答 #

不需要给关联了表单控件的添加role="button"，核心原因如下：

• 原生语义优先：是HTML原生的表单关联元素，屏幕阅读器能直接识别它的作用——触发对应表单控件的交互，完全不需要用ARIA角色覆盖原生语义。ARIA的使用原则是：能靠原生HTML解决的，就不用ARIA。
• 避免语义混淆：如果给加上role="button"，屏幕阅读器会把它播报成“按钮”，但它实际功能是控制复选框，这会误导辅助技术用户，让他们无法正确理解元素的真实用途，反而破坏无障碍体验。
• 原生已具备完整无障碍支持：关联表单控件的不仅支持鼠标点击切换，还能配合键盘操作（比如聚焦到复选框后用空格键切换状态），这些无障碍特性都是原生内置的，无需额外补充ARIA。

你的理解偏差在于：不是所有可点击的非

元素都需要加role="button"，只有那些没有原生语义、需要模拟按钮交互的元素（比如用

或实现自定义可点击操作），才需要添加这个ARIA角色。而属于有明确原生语义的元素，完全不需要额外添加。

---

内容的提问来源于stack exchange，提问作者machineghost