如何使屏幕阅读器读取列表？

Question

如何使屏幕阅读器读取列表？

3

我希望使用屏幕阅读器来提高无障碍性，以便在列表中读取文本。我在网上找到了一些例子，当<li>的项目用<a>包装时可以正常工作。

我尝试了以下内容，但它没有起作用：

<ul role="list">
  <li role="listitem">
    <div><h3 aria-label="item 1">item 1</h3></div>
  </li>
  <li role="listitem">
    <div><h3 aria-label="item 2">item 2</h3></div>
  </li>
  <li role="listitem">
    <div><h3 aria-label="item 2">item 3</h3></div>
  </li>
  <li role="listitem">
    <div><h3 aria-label="item 4">itwem 4</h3></div>
  </li>
</ul>

Hope you can help me with that.

- zb22

1

你的标记看起来很好 - 准确地说发生了什么？你使用的是哪种屏幕阅读器软件？当你运行它时，准确地发生了什么？ - Dai

我使用MacOS的VoiceOver，它选择了列表的第一项，但没有朗读它或任何其他项。 - zb22

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slugolicious · Accepted Answer

#1 rule for using ARIA (aria-* 属性和 role 属性) 是：如果不需要使用它，请不要使用。您的代码示例虽然有效，但使用了过多的 ARIA，所有这些都是多余的。

<ul> 元素默认具有 role=list，而规范明确指出不要设置 role。

<li> 元素同理。

根据“可访问名称和描述计算”第2F步骤，标题（<h3>）的可访问名称将来自标题的文本内容，因此在 <h3> 上使用 aria-label 不是必须的。

因此，您的代码示例与此代码片段完全相同：

<ul>
  <li>
    <div>
      <h3>item 1</h3>
    </div>
  </li>
  <li>
    <div>
      <h3>item 2</h3>
    </div>
  </li>
  <li>
    <div>
      <h3>item 3</h3>
    </div>
  </li>
  <li>
    <div>
      <h3>item 4</h3>
    </div>
  </li>
</ul>

总的来说，列表本身不能聚焦到键盘上，所以您无法使用 TAB 键导航到它们。我认为这就是您提到将列表项包装在锚标签中 <a>，以便允许您使用 TAB 键转到链接的原因。

屏幕阅读器用户将使用快捷键导航到列表。JAWS和NVDA都使用 L 键导航到列表和 I （'eye'）键导航到列表项。屏幕阅读器用户还可以使用上/下箭头键遍历DOM。iOS设备上的VoiceOver用户可以将其旋转器设置为“列表”，然后向上/向下滑动到下一个列表。

因此，如果您试图强制使列表可以使用键盘进行聚焦，那么对于屏幕阅读器用户而言将会是一种不利的体验，因为他们习惯了使用快捷键进行导航。非交互式元素（例如<ul>或<p>或<h3>）不应该具有键盘焦点。