Axe 开发工具引发不必要的违规行为

Question

所以我的导航栏具有以下结构：

我遵循的结构与https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/中存在的结构相同 （可访问性标准）

但是，当我运行 Axe devtools 时，它会抛出以下错误：

• 某些 Aria 角色必须包含特定的子角色

  • 确保需要子角色的具有 ARIA 角色的元素包含它们
  • 要解决此问题，您至少需要修复以下 (1) 项： - 元素具有不允许的子元素：[role=none] - 元素在显示加载程序时使用 aria-busy="true"

• 某些咏叹调角色必须包含在特定的父级中（显示 span 元素的错误）

  • 确保具有需要父角色的 ARIA 角色的元素包含在其中
    • 不存在必需的 ARIA 家长角色：菜单、菜单栏、组

当我在 w3.org 站点中运行 ax devtools 时，它不会抛出此类错误。我不明白我哪里出了问题。我遵循网站中提到的相同语义结构。我能看到的唯一区别是我有一个 span 元素。这就是导致问题的原因吗？ 为什么在 w3.org 站点中角色相同时不允许使用 none 角色。我无法在这个主题中找到太多信息。任何意见都将受到高度赞赏。

Answer 1

axe-core 抛出错误的原因是由于表现角色冲突。本质上，任何具有全局 ARIA 属性或可聚焦的元素都必须可供辅助技术使用。由于 role=presentation 和

role=none

会从辅助技术中删除该元素，因此它们完全忽略该角色并使用该元素的隐式角色，就好像

role

属性不存在一样。因此，列表中具有

li

属性（全局 ARIA 属性）的最后一个

aria-labelledby

不是演示性的，因此菜单包含一个不支持的子菜单 (

listitem

)，并且

menuitem

的

li

有一个它不允许的父级（再次是

listitem

）。Axe 还应该显示

presentation-role-conflict

的违规行为，这将标记

li

。