屏幕阅读器应该读取“主页、链接、菜单项”还是“主页、菜单项”答案

【问题标题】：Should Screen Reader reads "Home, Link, Menu Item" or "Home, Menu Item"屏幕阅读器应该读取“主页、链接、菜单项”还是“主页、菜单项”
【发布时间】：2021-09-22 23:50:29
【问题描述】：

如果菜单项是链接，屏幕阅读器应该将其读作“主页、链接、菜单项”还是“主页、菜单项”？

目前，屏幕阅读器将其读取为“主页、链接、菜单项”，但我收到的有关它的信息不一。一些信息说它应该是“主页、链接、菜单项”，因为我们希望用户知道该按钮是一个链接。但是，有人说它应该只是宣布为“主页，菜单项”

这是我的代码：

<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>

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

【问题讨论】：

除非你的菜单是操作系统风格的弹出菜单，否则你不应该使用 role=menu/menuitem。特别是，您不应该将这些角色用于网站经典菜单。使用 role=menu/menuitem 意味着您正确地对箭头键做出反应，输入和退出，而您可能没有。
@QuentinC 如果我不使用菜单/菜单项，我应该使用什么来代替？
不要使用任何角色。 <ul> 和 <li> 的隐含角色在大多数情况下对于网站菜单来说是完全令人满意的。记住 ARIA 的黄金法则：仅在确实需要时使用它。
听起来您在征求更多意见，因为对于“应该”如何阅读内容没有硬性规定。这是您和使用屏幕阅读器的客户之间的事情。

标签： html menu accessibility screen-readers

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

对于偶然发现这一点的任何人，aria-role="menu" 和 aria-role="menu-item" 不用于站点导航（此处似乎就是这种情况）。

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

对于站点导航，正确（而且更简单）的标记是简单地将 <nav> 元素与嵌套的 <ul> 一起使用（除非您支持 HTML4...即使那样，<ul> 也可能是够了！）。

此外，在上面给出的示例中实际上不需要aria-label，因为aria-label 与程序可确定的文本相同（网络浏览器可以确定“主页”文本在@987654329 内@ 元素，因此将通过可访问性树将该信息呈现给屏幕阅读器）。

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

<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"上有一个ID，最后不要忘记当菜单关闭时，您必须将焦点返回到打开它的按钮。

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

【讨论】：