html - ARIA 角色是否仅限于某些元素？

Question

在使用包含此标记的 validator.w3.org 验证我的网站时：

<h4 role="button" aria-controls="panel-1">...</h4>
<ul id="panel-1" role="tabpanel">...</ul>       

...我收到以下错误：

Error: Bad value button for attribute role on element h4.

Error: Bad value tabpanel for attribute role on element ul.

当然，两个 ARIA 角色都存在。分别改变这两个元素<h4>。<ul>解决<div>错误。但是：我违反了什么规则？我浏览了https://www.w3.org/TR/wai-aria/#roles和 MDN，并没有看到关于哪些元素可以接收哪个角色的任何限制。

有什么我没看到的还是验证器太严格了？

标签： htmlaccessibilitywai-aria

Answer 1

您违反了ARIA 使用的第二条规则。

不要改变原生语义，除非你真的必须这样做。

例如：开发人员想要构建一个作为选项卡的标题。

不要这样做：

<h2 role=tab>heading tab</h2>
 

做这个：

<div role=tab><h2>heading tab</h2></div>

在你的情况下，你应该把 a<button>放在里面<h4>并完全避免使用role。