时间戳

首页 > 解决方案 > 如何让屏幕阅读器阅读列表？

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

问题描述

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

希望你能帮助我。

标签： javascripthtmlscreen-readers

解决方案

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

默认情况下， A<ul>有一个 role=list，并且规范明确规定不要设置角色。

与<li>元素相同。

根据“可访问名称和描述计算”的步骤 2F，您的标题 ( <h3>) 的可访问名称将来自标题的文本内容，因此不需要为.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>or<p>或<h3>）不应该是键盘可聚焦的。

推荐阅读