嵌套菜单列表和子菜单项不会被屏幕阅读器读取为菜单和菜单项

Question

我有一个菜单容器，其中包含菜单1，菜单2等元素列表。现在每个菜单项都有一个子菜单列表(菜单 1 有子菜单 1、子菜单 2 等)。下面给出了带有角色属性的代码片段：

<div role="application">
<div role="menu" class="loContainer">
<a href="" class="loTitle">Menu1</a>
<div role="menuitem">
<a href="" ng-click="setTopicIdx($index)">Submenu1</a>
</div>
<div role="menuitem">
<a href="" ng-click="setTopicIdx($index)">Submenu2</a>
</div>
</div>
</div>

这被 JAWS 16 在 IE11 中读作">

菜单菜单 1 链接、菜单子菜单 1 链接、菜单子菜单 2 链接"而在VoiceOver(iPAD AIR iOS11)中，由"Menu1 menuItem menuItem"读取，这与JAWS行为完全相反。确切的角色是什么，以便它显示为">

菜单菜单 1、菜单项子菜单 1、菜单项子菜单 2"？

Answer 1

role="menu"

的所有子项都应该有一个role="menuitem"。 您的第一个菜单项("Menu1")只是一个链接。 尝试将其包装在子菜单之类的<div role="menuitem">中。

<div role="menuitem">
<a href="" class="loTitle">Menu1</a>
</div>

此外，出于测试目的(也许您的代码片段只是为了发布此问题)，请避免在示例文本中使用"菜单"一词。 如果您正在收听"菜单"一词，因为您正在测试role="menu"和role="menuitem"，并且您的文本包含"菜单"，那么"菜单"一词的来源会令人困惑。 是角色导致了它还是实际的文本？ 在我的示例中，我使用了：

<div role="application">
<div role="menu" class="loContainer">
<div role="menuitem">
<a href="" class="loTitle">alpha</a>
</div>
<div role="menuitem">
<a href="" ng-click="setTopicIdx($index)">beta</a>
</div>
<div role="menuitem">
<a href="" ng-click="setTopicIdx($index)">gamma</a>
</div>
</div>
</div>

我注意到您正在使用role="application". 您很少需要使用该角色。 大多数屏幕阅读器会自动在">浏览模式"和">表单模式"之间切换，具体取决于您按 Tab 键选择的对象。role="menu"是导致切换的对象之一。 (您可以更改屏幕阅读器设置，以便切换不是自动的，但我试图保持简单。

当屏幕阅读器切换到">表单模式"(这是role="application"强制屏幕阅读器执行的操作)时，所有击键都将传递到应用程序(您的 JavaScript 代码)，而不是通过屏幕阅读器。 这允许箭头键在菜单中导航，而不是通过 DOM。 但是，使用role="application"并不能真正对旁白执行任何操作，但它会影响您的 PC 用户。 WebAIM 有一篇文章解释了模式以及它如何影响旁白。

无论如何，我建议您从您的第一<div>中删除role="application"，并确保您的菜单仍然可以与 PC 屏幕阅读器(如 JAWS 或 NVDA)正常工作。

请记住，当您使用role="menu"时，您承诺自己管理键盘焦点。 也就是说，当用户按 Tab 键转到菜单并且屏幕阅读器用户听到"菜单"时，他们将假设他们可以使用向左/向右箭头键浏览菜单。 如果不允许箭头键导航，则不应使用role="menu"。 有关 WAI-ARIA 创作实践 1.1 中的菜单设计模式，请参阅"键盘交互"部分。