除了 tabindex="0" 之外,还有什么替代方法可以使页面内容可以按顺序浏览而不会丢失元素?

What alternative to tabindex="0" exists that makes page content browsable in sequential order without missing elements?

我有一个包含多个 HTML 元素的页面,当用户使用 Tab 键和屏幕 reader 从上到下浏览页面时,这些元素将被忽略和跳过。这是我能够通过将属性 tabindex="0" 添加到包含需要由屏幕读取的文本的 div reader 来解决的问题。一些评论说这样做不是正确的方法。哪个是推荐的替代方案?

我在 android 上使用 Talkback 导航页面,在 windows Jaws 和 Narrator 上,它们都有相同的行为,没有 tabindex 的元素将被忽略,它直接跳转到 <a> 元素跳过 <a> 标签周围的标题和文本。

使用屏幕阅读器的用户使用 tab 键转到可激活的元素。对于标准元素(如文本),他们可以使用其他导航快捷方式,这取决于他们的导航模式(浏览或焦点模式)、屏幕阅读器和他们自己的偏好,例如箭头()

在看到您围绕同一主题提出多个问题后,有一个共同的主题,您需要了解最终用户如何使用屏幕 reader 与行动不便的用户相比,因为这将使它成为以后您可以更轻松地实现辅助功能。

我认为人们对这样一个事实感到困惑,即所有活动内容都应该通过 Tab 键访问,以便行动不便的人绕过页面,并认为这是用户使用屏幕的唯一方式 reader(两个不同的用例)。

Tab 键对于行动不便的人非常有用,他们不需要屏幕 reader 来访问活动项目('skip links' 的真正原因),但他们会在视觉上消耗内容,因此您不需要使内容可聚焦(他们可能会使用 space 或向上和向下箭头键滚动页面)。

对于使用屏幕 reader 的 PC 用户,Tab 键实际上是一种辅助 导航方式。

一般来说,标题、表单、地标(例如 <main><div role="main">)和链接是用户在屏幕上发现您的页面内容和设计的方式 reader(因此他们可以按 NVDA 中的 1、2、3 键分别找到 1 级、2 级和 3 级标题,找到他们感兴趣的内容部分,感受一下页面结构和内容(这就是为什么不跳过标题级别)。

他们还可以浏览页面上的链接(以了解页面链接到的菜单结构和内容),这就是为什么链接需要具有有意义的内容(即不是 'click here')。

只要您的 HTML 在语义上是正确的,不可聚焦的内容仍然可以访问,所以不要担心试图通过 Tab 键访问它,它可以通过其他方法和屏幕访问 readers 有简单的方法从当前光标位置开始阅读。

This PDF from Deque shows a list of common keyboard commands for NVDA 这是学习如何使用屏幕 reader 的一个很好的起点,在 30 分钟内您很快就会看到屏幕 reader 用户真正重要的是什么将使您的无障碍之旅的其余部分变得更加轻松!

黄金法则 - 确保语义正确,默认情况下您的网站可访问率为 95%。