嵌套列表导航：屏幕阅读器支持列表标签和嵌套级别

Question

使用屏幕阅读器用户<nav>的嵌套<ul>列表增强网站地标的语义可访问性的最佳做法是什么？（aria-label 和 list level 目前并非所有屏幕阅读器都能发音）

我在 iOS 9 上使用 Voiceover、Android 5 上的 Talkback 和 Win10（在 Firefox 中）上的 NVDA 2016-1 进行了测试。我在屏幕阅读器应用程序中使用了（大部分）默认设置。

我认为以下列表应该是为屏幕阅读器用户准备的最佳选择：

演示代码 1

<nav>
  <ul aria-label="product navigation">
    <li><a href="product-a.html">Product A</a>
      <ul aria-label="sub menu Product A">
        <li><a href="product-a-spec.html">Specifications</a></li>
        <li><a href="product-a-acce.html">Accessories</a></li>
      </ul>
    </li>
    <li><a href="product-b.html">Product B</a>
      <ul aria-label="sub menu Product B">
        <li><a href="product-b-spec.html">Specifications</a></li>
        <li><a href="product-b-acce.html">Accessories</a></li>
      </ul>
    </li>
  </ul>
</nav>

预期结果：屏幕阅读器这样说：

• 导航地标的起点
• 具有两个元素的开始列表级别 1 “产品导航”
• “产品 A”链接
• 具有两个元素的起始列表级别 2 “子菜单产品 A”
• “规格”链接
• “附件”链接
• 列表级别 2 的 结尾“子菜单产品 A”
• “产品B”链接
• 具有两个元素的起始列表级别 2 “子菜单产品 B”
• “规格”链接
• “附件”链接
• 列表级别 2 的 结尾“子菜单产品 B”
• 列表级别 1 “产品导航”的结尾
• 结束导航地标

我还希望在触摸桌子/电话上的子菜单项时获得详细信息，例如

• “规格”链接级别2列表“子菜单产品B”

但不幸的是，这不适用于 Voiceover、Talkback 或 NVDA。

列表标签和列表级别都没有说出来。

当使用屏幕阅读器并从列表跳转到列表时（例如使用l键或列表旋转器/导航），您不知道自己在哪个列表中。如果子列表的元素具有相似的链接（如演示中代码）这个问题对我来说似乎更糟。

我还认为（至少对我而言）多次听到“列表开头”和“列表结尾”而没有任何提示、什么样的列表开始或结尾是非常令人困惑的（至少对我而言）——尤其是当你使用手机或平板电脑时并用手指随机发现显示内容。

我做了一个测试系列并尝试了不同的变化，例如我添加了显式role="list"和"listitem". 我还添加了aria-level="1"和"2"到列表项，如本例所示- 没有成功。任何屏幕阅读器软件都支持列表级别吗？

我的发现之一：至少 Voiceover（在 iOS 上）会告诉<ul>元素的 aria-label ，但仅role="list"在如下代码中定义显式时才如此。但这也仅在<nav>不使用容器时才有效- Voiceover（在 iOS 上）忽略了<ul>在<nav>. 因此，当使用<nav>地标时，列表在 Voiceover 中消失了，也无法通过旋转器/列表导航器访问。

演示代码2

<ul role="list" aria-label="product navigation">
  <li role="listitem"><a href="product-a.html">Product A</a>
    <ul role="list" aria-label="sub menu Product A">
      <li role="listitem"><a href="product-a-spec.html">Specifications</a></li>
      <li role="listitem"><a href="product-a-acce.html">Accessories</a></li>
    </ul>
  </li>
  <li role="listitem"><a href="product-b.html">Product B</a>
    <ul role="list" aria-label="sub menu Product B">
      <li role="listitem"><a href="product-b-spec.html">Specifications</a></li>
      <li role="listitem"><a href="product-b-acce.html">Accessories</a></li>
    </ul>
  </li>
</ul>

我认为在使用嵌套列表时，重要的是告诉盲人用户嵌套级别和列表标签（至少对于子级别列表，所以你知道它是一个子级别列表） - 目前有没有办法解决这个？

万一这是不可能的，我会说使用嵌套列表<nav>进行导航不是一个好建议......或者根本没有嵌套列表？

编辑 1：更新演示代码

编辑 2：更多发现

在这个对另一个问题的回答中很清楚，关于屏幕阅读器应该如何处理/读取 aria-label 没有固定的规则。

<nav>并且<ul>正在对元素进行分组 - 根据答案，标签更有可能被阅读 - 不幸的是，当导航地标中存在嵌套列表时，我的测试中没有。

我还发现了一个页面，列出了一些无序列表的屏幕阅读器测试结果——一开始他们说明了“应该宣布什么”，所以它是可选的。:/ 此页面的 Voiceover 结果对 iOS 9 上的 Voiceover 无效，我的测试中未公布嵌套级别。

在 NVDA GitHub 问题跟踪器上也有很多关于实现 aria-label 支持的方式的讨论。我还发现了这篇关于aria-label 荒谬而复杂的世界的长篇但非常有趣的文章。

无论如何，现在我知道我不能指望默认情况下会宣布嵌套级别或 aria-labels。当屏幕阅读器软件不支持此功能时，我仍然想知道是否有办法增强盲人用户的可访问性...

Answer 1

我知道 Stack Overflow 上有些人每天都需要使用屏幕阅读器软件，而我只将其用于测试。因此，如果其中有人与我的回答相矛盾，请采纳他们的建议。

但对我来说，你想要添加的所有额外 ARIA 只会让菜单变得更难听。内容本身清楚地表明这些是子菜单（当有真实内容而不是示例内容时），因此不需要 aria-label 属性。这让您感到困惑，但请记住，您只在您构建的站点上使用屏幕阅读器，而不是每个站点。与网络导航的其余部分保持一致有助于人们更快地了解您的网站。

此外，在您的第二个示例中，ARIA 角色旨在更改向屏幕阅读器报告 HTML 元素的方式（例如，行为类似于按钮的 div）。由于您正在添加匹配的角色，因此您增加了工作量，而不会增加任何人的可用性。

因此，在这种情况下，您只需使用语义正确的 HTML 即可制作出完美无障碍的菜单。在您构建不寻常的小部件（而不是标准链接和文本）之前，无需添加 ARIA。