如果屏幕 Reader 读取 "Home, Link, Menu Item" 或 "Home, Menu Item"

Question

如果菜单项是 links，屏幕 reader 应该将其读作“主页，link，菜单项”还是“主页，菜单项”？

目前屏幕 reader 正在将其读取为“主页，link，菜单项”，但我得到的有关它的信息很复杂。一些信息说它应该是“主页，link，菜单项”，因为我们希望用户知道该按钮是一个 link。然而，有人说它应该只被宣布为“主页，菜单项”

这是我的代码：

<ul role="menu">
        <li role="menuitem">
            <a aria-label="Home" href="/en-us/">
                <span class="">Home</span>
            </a>
        </li>
        <li role="menuitem">
            <a aria-label="Search" href="/en-us/">
                <span class="">Search</span>
            </a>
        </li>
</ul>

我想知道哪个版本是正确的？

Answer 1

如果您的 html 是正确的，那么不用担心屏幕 reader 是如何宣布的。 JAWS、NVDA、VoiceOver、Talkback、Narrator、ChromeVox 等可能都宣布它略有不同，但这没关系。只要代码正确就可以了

附带说明一下，如果您使用菜单角色，那么您将致力于实现箭头键导航。也就是说，将菜单角色视为老式桌面应用程序菜单，您可以在其中按 alt 进入顶部菜单（例如文件、编辑、查看），然后按 left/right 箭头在菜单中导航，up/down 箭头在子菜单中导航。在 Web 应用程序上这样做很好，但它会使代码更加复杂。我很少使用菜单角色，只是依靠基本的 Tab 键来浏览链接列表。

Answer 2

请注意，aria-role="menu" 和 aria-role="menu-item" 而非用于站点导航（此处似乎就是这种情况）。

=28=]

它们是为应用程序菜单设计的（例如带有命令的下拉菜单）。

对于站点导航，正确（并且更简单）的标记是简单地使用带有嵌套 <ul> 的 <nav> 元素（除非您支持 HTML4...即便如此，<ul> 可能就足够了！）。

此外，在上面给出的示例中，实际上不需要 aria-label，因为 aria-label 与程序可确定的文本相同（Web 浏览器可以计算出“主页”文本位于 <a> 元素内，因此将通过可访问性树将该信息显示到屏幕 reader）。

因此，对于站点导航，只需以下内容：

<nav>
  <ul>
    <li>
      <a href="/en-us/">
        <span class="">Home</span>
      </a>
    </li>
    <li>
      <a href="/en-us/">
        <span class="">Search</span>
      </a>
    </li>
  </ul>
</nav>

不要使用 WAI-ARIA，除非您探索了所有其他选项或者您需要支持旧版浏览器！

额外

有了 aria-role="menu"，您不仅需要实现箭头键导航。您还应该添加功能以确保：-

可以使用 Esc 键关闭菜单。
您可以使用字母跳到选项（因此 d 可能会跳到“详细信息”，下一次按 d 可能会跳到如果这些是菜单选项，则“删除”。
Home 应该跳到列表的开头
End 应该跳到列表中的最后一项

终于

如果这确实是一个下拉菜单并且您已经实现了上述所有内容，那么您的标记无论如何都相当不正确。

<li> 应该有 role="presentation none" (use both "presentation" and "none" as per guidance) 来删除语义，role="menu-item" 应该在锚点本身上。

<ul role="menu" id="some-menu">
  <li role="presentation none">
    <a role="menuitem" aria-label="Home" href="/en-us/">
      <span class="">Home</span>
    </a>
  </li>
  <li role="presentation none">
    <a role="menuitem" aria-label="Search" href="/en-us/">
      <span class="">Search</span>
    </a>
  </li>
</ul>

另外不要忘记，您需要将打开菜单的 <button> 与菜单本身相关联，因此您必须在 role="menu"，最后不要忘记当菜单关闭时你必须 return 聚焦到打开它的按钮。

<button aria-haspopup="true" aria-controls="some-menu"><!--same ID as the menu above for aria-controls-->
   Open Menu 
</button>

如果屏幕 Reader 读取 "Home, Link, Menu Item" 或 "Home, Menu Item"

Should Screen Reader reads "Home, Link, Menu Item" or "Home, Menu Item"

html

accessibility

menu

screen-readers

额外

终于