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

Question

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

<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 中将其读取为“菜单 Menu1 链接、菜单子(monad)菜单 1 链接、菜单子(monad)菜单 2 链接”

并且在 VoiceOver (iPAD AIR iOS11) 中由“Menu1 menuItem menuItem”读取，这与 JAWS 的行为完全相反。确切的 Angular 色是什么，以便它显示为“menu Menu1，menitem submenu1，menitem submenu2”？

Answer 1

所有 role="menu" 的子级应该有 role="menuitem" 。您的第一个菜单项(“Menu1”)只是一个链接。尝试将其包装在 <div role="menuitem"> 中就像你的子菜单一样。

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

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

<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" 。您很少需要使用该 Angular 色。大多数屏幕阅读器会自动在“浏览模式”和“表单模式”之间切换，具体取决于您按 Tab 键选择的对象。 role="menu"是导致切换的对象之一。 (您可以更改屏幕阅读器设置，这样切换就不会自动进行，但我试图保持简单。)

当屏幕阅读器切换到“表单模式”(这就是 role="application" 强制屏幕阅读器执行的操作)时，所有击键都会传递到应用程序(您的 JavaScript 代码)，而不是传递给应用程序通过屏幕阅读器。这允许箭头键在菜单中导航，而不是在 DOM 中导航。但是，使用 role="application"实际上对 VoiceOver 没有任何作用，但它会影响您的 PC 用户。 WebAIM has an article解释了这些模式及其如何影响 VoiceOver。

无论如何，我建议删除 role="application"从你的第一个<div>并确保您的菜单在 JAWS 或 NVDA 等 PC 屏幕阅读器上仍能正常工作。

请记住，当您使用role="menu"时，您 promise 自己管理键盘焦点。也就是说，当用户点击菜单并且屏幕阅读器用户听到“菜单”时，他们会假设他们可以使用向左/向右箭头键来浏览菜单。如果您不允许允许使用箭头键进行导航，那么您应该不使用 role="menu" 。有关 keyboard interaction 中的菜单设计模式，请参阅“WAI-ARIA Authoring Practices 1.1”部分。 .