h4设button、ul设tabpanel验证报错，ARIA角色有元素限制吗？

你遇到的报错是违反了HTML规范中ARIA语义重写的限制规则，并非验证器规则过于严格，也不是你用的ARIA角色本身非法，核心原因是你修改了自带强隐式语义的HTML元素的默认角色，引发了语义冲突：

两个报错的具体原因 #

• h4使用role="button"报错
  标题元素（h1~h6）属于自带强内容语义的非交互元素，HTML规范明确禁止给这类内容展示类元素直接覆盖button这类交互角色。这种写法会让读屏等辅助设备识别混乱：原本应该被识别为四级标题的内容，突然被标记为按钮，会完全破坏用户对页面内容层级的认知。
  符合规范的写法是把交互元素放在标题内部，保留原生语义：

  <h4><button aria-controls="panel-1">...</button></h4>
  

• ul使用role="tabpanel"报错
  ul的隐式语义是无序列表，默认仅能容纳li子元素，且辅助设备会默认统计列表项数量、告知用户这是列表内容；而tabpanel是面板容器角色，需要容纳任意类型的面板内容，两者语义完全冲突，因此规范不允许重写ul的默认语义为tabpanel。

为什么换成div就不报错 #

div是无原生语义的通用容器，本身没有任何隐式ARIA语义，因此给div设置任意合法的ARIA角色都不会触发语义冲突的校验规则。

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