首页 文章

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

提问于
浏览 次
2

What is best practice to enhance the semantic accessibility of a website <nav> landmark with a nested <ul> list for screen reader users? （所有屏幕阅读器目前不发音aria-label和列表级别）

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

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

Demo code 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”

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

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

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

我还认为，在没有提示的情况下，多次听到“列表开头”和“列表结尾”非常混乱（至少对我而言）是什么样的列表开始或结束 - 尤其是当您使用手机或平板电脑时并用手指随机发现显示内容 .

我做了一个测试系列并尝试了不同的变化，例如我添加了显式 role="list" 和 "listitem" . 我还将 aria-level="1" 和 "2" 添加到列表项目中，如this example所示 - 没有成功 . Are list levels supported by any screen reader software?

我的一个发现：至少Voiceover（在iOS上）告诉 <ul> 元素的aria-label，但仅限于在下面的代码中定义显式 role="list" . But this also only works when the <nav> container is not used - 在 <nav> 中使用 <ul> 时，画外音（在iOS上）忽略了完全列表的事实 . 因此，当使用 <nav> 地标时，列表在画外音中消失，也无法通过旋转器/列表导航器访问 .

Demo code 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> 中的嵌套列表用于导航...或嵌套列表是不是一个好建议？

Edit 1: 更新了演示代码

Edit 2: 更多调查结果

在_2468783中明确指出，关于屏幕阅读器应如何处理/读取aria-label没有固定的规则 .

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

我也找到了一个page listing some screen reader test results for unordered nested lists - 一开始他们说的是"should be announced"，所以它是可选的 . ：/此页面的配音结果对iOS 9上的画外音无效，嵌套级别未在我的测试中公布 .

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

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

html accessibility nested-lists wai-aria screen-readers

3 回答

  • 4

    我知道Stack Overflow上有些人每天都需要使用屏幕阅读器软件，而我只是用它进行测试 . 因此，如果他们中的任何一个与我的答案相矛盾，请继续他们的建议

    但对我来说，你想要添加的所有额外ARIA只会使菜单更长时间听 . 内容本身就是明确这些子菜单（当存在真实内容而不是示例内容时），因此不需要aria-label属性 . 这对你来说很困惑，但请记住，你只在你 Build 的网站上使用屏幕阅读器，而不是每个网站 . 与网络的其他部分导航保持一致帮助人们更快地了解您的网站 .

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

    因此，在这种情况下，您需要使用语义正确的HTML来创建完美的accessibile菜单 . 在构建不寻常的小部件之前，不需要添加ARIA，而不是标准链接和文本 .

    回复于
  • 1

    您没有读取标签的原因是因为您在代码中将它们设置为 arial-label 而不是 aria-label . 如果您将其更改为aria-label，则会在屏幕阅读器浏览文档时将其读取 . 但是，如果你通过链接进行制表，那么列表元素的aria标签将不会被读取，因为它在NVDA中测试了它并且它按预期工作 - 当我从'Product A'到“规范”时，它将宣布'list with two items' . 希望这有帮助 .

    回复于
  • 1

    您不会通过向用户提供嵌套级别编号来帮助用户，也不会要求他们记住他们所使用的菜单部分 .

    如果你真的想帮助用户，告诉他们到处都是 . 见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 属性结合使用，以便与大多数屏幕阅读器兼容，并且可供非屏幕阅读器用户访问 .

    回复于

相关问题