Question

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

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

我认为以下列表应该为屏幕阅读器用户做好最佳准备：

演示代码1

＆＃13;

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

＆＃13;

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

导航地标的开头

开始列表第1级 ＆＃34;产品导航＆＃34; 包含两个元素

＆＃34;产品A＆＃34; 链接

开始列表第2级 ＆＃34;子菜单产品A＆＃34; 包含两个元素

＆＃34;规格＆＃34; 链接

＆＃34;附件＆＃34; 链接

列表结尾第2级 ＆＃34;子菜单产品A＆＃34;

＆＃34;产品B＆＃34; 链接

开始列表第2级 ＆＃34;子菜单产品B＆＃34; 包含两个元素

＆＃34;规格＆＃34; 链接

＆＃34;附件＆＃34; 链接

列表结尾第2级 ＆＃34;子菜单产品B＆＃34;

列表结尾第1级 ＆＃34;产品导航＆＃34;

结束导航地标

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

＆＃34;规格＆＃34; 链接级别2 列表＆＃34;子菜单产品B＆＃34;

但不幸的是，这不适用于画外音，对讲或NVDA。

不会说出列表标签和列表级别。

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

我也认为听到＆＃34;开始列表＆＃34;非常令人困惑（至少对我而言）和＃34;列表的结尾＆＃34;多次没有提示，什么样的列表开始或结束 - 特别是当你在手机或平板电脑上并用手指随机发现显示内容时。

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

我的一个发现：至少画外音（在iOS上）告诉<ul>元素的咏叹调标签，但仅限于在以下代码中定义显式role="list"时。 但这仅适用于未使用<nav>容器的情况 - 语音转换（在iOS上）忽略了在{{1}内使用<ul>时完全存在列表的事实}}。因此，当使用<nav>地标时，列表在配音中消失，也无法通过旋转器/列表导航器访问。

演示代码2

＆＃13;

<nav>

＆＃13;

我认为在使用嵌套列表时，告诉盲用户嵌套级别和列表标签（至少对于子级别列表，因此您知道它是子级别列表）非常重要 - 目前是否存在解决这个问题的方法？

如果不可能，我会说在<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>中使用嵌套列表导航...或嵌套列表不是一个好建议吗？

修改1：更新了演示代码

编辑2：更多调查结果

在this answer to another question中明确指出，屏幕阅读器应该如何处理/读取aria-label没有固定的规则。

<nav>和<nav>是分组元素 - 根据答案，标签更有可能被阅读 - 遗憾的是，当导航地标中存在嵌套列表时，我的测试中不会这样做。

我还找到了一个page listing some screen reader test results for unordered nested lists - 一开始他们说明应该宣布什么＆＃34;＆＃34;所以它是可选的。：/此页面的画外音结果对iOS 9上的画外音无效，嵌套级别未在我的测试中公布。

在NVDA GitHub问题跟踪器上还有multiple discussions about the way to implement support for aria-label。我还发现了这篇关于the ridiculous complicated world of aria-label的长篇但非常有趣的文章。

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

Answer 1

您未获取标签的原因是您的代码中的arial-label代替aria-label。如果您将其更改为aria-label，则会在屏幕阅读器浏览文档时将其读取。但是，如果要通过链接进行制表，则不会读取列表元素的aria标签，因为它不是可聚焦元素。屏幕阅读器应该正确处理嵌套而无需额外的标签 - 我已经在NVDA中测试了它并且它按预期工作 - 它将宣布列出两个项目＆＃39;当我选择产品A＆＃39;进入＆＃34;规范＆＃39;。希望这可以帮助。

Answer 2

您不会通过向用户提供嵌套级别编号来帮助用户，或者让他们记住他们所在的菜单部分。

如果您真的想帮助用户，请告诉他们到处都是。见https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-link.html

<nav>
   <h2>Product navigation</h2>
   <ul>
    <li><a href="product-a.html">Product A</a>
      <ul>
        <li><a href="product-a-spec.html" title="Specifications of Product A">Specifications</a></li>
        <li><a href="product-a-acce.html" title="Accessories for Product A">Accessories</a></li>
      </ul>
    </li>
    <li><a href="product-b.html">Product B</a>
      <ul>
        <li><a href="product-b-spec.html" title="Specifications of Product B">Specifications</a></li>
        <li><a href="product-b-acce.html" title="Accessories for Product B">Accessories</a></li>
      </ul>
    </li>
  </ul>
</nav>

您可以将title属性与aria-label属性结合使用，以便与大多数屏幕阅读器兼容，并且可供非屏幕阅读器用户访问。

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

不会说出列表标签和列表级别。

2 个答案: