如何让屏幕阅读器阅读列表？

Question

我想将屏幕阅读器用于可访问性目的，以便阅读列表中的文本，我在网上找到了一些示例，当<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>

希望你能帮助我。

Answer 1

#1 rule for using ARIA（aria-* 属性和role 属性）是不要在您不需要时使用它。您的代码示例虽然有效，但有太多的咏叹调，所有这些都是多余的。

<ul> 默认有一个 role=list，spec 明确表示不要设置角色。

与<li> 元素相同。

标题的可访问名称 (<h3>) 将来自标题的文本内容，根据“Accessible Name and Description Computation”的步骤 2F，因此不需要为 <h3> 指定 aria-label .

因此，您的代码示例与此代码 sn-p：完全相同：

<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>）不应是键盘可聚焦的。