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

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

使用ARIA（aria-*属性和role属性）的＃1规则是不必使用它。您的代码示例虽然有效，但咏叹调过多，所有这些都是多余的。

<ul>默认情况下，A 具有一个role = list，并且规范专门说不设置角色。

与<li>元素相同。

您的标题可访问的名称（<h3>）将来自标题的文本内容，根据“步骤2F 残疾人专用名称和描述计算 ”，所以有一aria-label对<h3>是没有必要的。

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

<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>）不应该是键盘可获得焦点。