未读取菜单小部件的 ARIA 标签

Question

UA：Mozilla Firefox 28.0； AT：JAWS 14.0.1534 和 NVDA 2014.1； 操作系统：MS Windows 7 Professional SP1

鉴于以下简单的 ARIA 增强菜单小部件，为什么永远不会读取相关的“去哪里”标签？据我了解，与可聚焦元素相关的标签应在收到焦点时公布。相反，只会读取菜单项的文本。

<div role="application">
<ul id="main-menu" role="menu" aria-label="Where to go" aria-activedescendant="item-1" tabindex="0">
    <li id="item-1" role="menuitem"><a href="page-1.html" tabindex="-1">First page</a></li>
    <li id="item-2" role="menuitem"><a href="page-2.html" tabindex="-1">Second page</a></li>
    <li id="item-3" role="menuitem"><a href="page-3.html" tabindex="-1">Third page</a></li>
</ul>
</div>

是否有某种“优化”以防止每次菜单获得焦点时向用户读取过多信息？就像，“menuitem”的内容将优先于包含菜单小部件的标签。当然，这只是一个疯狂的猜测。有没有人有更多细节可以帮助澄清上述情况？

一个基于相同代码示例的相关问题：我发现取消包含 div（具有 role="application" 属性的那个）绝对不会改变小部件的行为（有 Javascript 代码用于控制键盘交互和更新 UL 的 aria-activedescendant 属性）。你什么时候真正需要一个带有role="application"的容器？

Answer 1

根据示例，它看起来不像是菜单。

菜单角色适用于弹出子菜单的应用程序样式菜单。见this menubar example。

在切换到菜单时，您可以使用箭头键导航，而不是使用选项卡。

您所拥有的（至少到目前为止）是简单的导航，而在网站上最合适的机制是标准链接。

  <nav aria-label="Where to go">
  <ul id="main-menu">
     <li><a href="page-1.html">First page</a></li>
     <li><a href="page-2.html">Second page</a></li>
     <li><a href="page-3.html">Third page</a></li>
  </ul>
  </nav>

屏幕阅读器可能会或可能不会读出 aria-label（在简短的测试中，NVDA 没有，VoiceOver 做到了），如果这很重要，请在菜单上方隐藏一个屏幕外标题。但是，如果用户通过“地标”导航，则会使用该标签。

如果您想要一份完整的菜单，我会试试accessible Adobe mega-menu。