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

时间:2018-08-13 18:18:42

标签: javascript html screen-readers

我想使用屏幕阅读器来实现可访问性,以便阅读列表中的文本。我在网络上找到了一些示例,当<li>的项目用{{1 }}。

我尝试了类似以下操作,但是它不起作用:

<a>

希望您能帮助我。

1 个答案:

答案 0 :(得分:1)

#1 rule for using ARIAaria-*属性和role属性)在没有必要的情况下使用。您的代码示例虽然有效,但咏叹调过多,所有这些都是多余的。

默认情况下,<ul>有一个role = list,spec专门说不设置角色。

<li>元素相同。

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

因此,您的代码示例与该代码段完全相同:

<h3>
通常,

列表不能在键盘上显示焦点,因此您不会使用 TAB 键导航到这些列表。我认为这就是为什么您提到将列表项包装在锚标签<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 到链接的原因。

屏幕阅读器用户导航到列表的方式是使用快捷键。 JAWS和NVDA都使用 L 键导航到列表,并使用 I (“ eye”)键导航到列表项。屏幕阅读器用户还可以使用向上/向下箭头键浏览DOM。 iOS设备上的VoiceOver用户可以将其转子设置为“列表”,然后可以向上/向下滑动到下一个列表。

因此,如果您尝试使用键盘强制列表变得可聚焦,那么屏幕阅读器用户将受到损害,因为他们不习惯以这种方式导航到列表。非交互式元素(例如<a><ul><p>)不能放在键盘上。