NVDA 屏幕阅读器读取文本上的可点击单词

Question

知道为什么 NVDA 在 html 示例中的文本中读取可点击单词：

<h1 tabindex="1"> testing </h1>

NVDA 将读取可点击测试

Answer 1

简短的回答：

tabindex 属性暗示了某些屏幕阅读器的功能。

长答案：

屏幕阅读器用户浏览网页的两种主要方式是跳过交互式元素或标题。 交互元素是链接、按钮、表单域和用户将在您的页面上启动的任何其他功能。 这些是通过使用“tab”键来导航的。

他们浏览您页面的另一种主要方式是通过标题。 事实上，webaim 的一项调查将标题列为绝大多数导航页面以查找信息的主要方法（来源）。 在您的示例中，您为标题提供了一个 tabindex，这会给人一种它具有某些功能或交互性的印象。 据我了解，JAWS 和 NVDA 都会在具有 tabindex 的元素上读出“可点击”，因为它们很容易（并且通常会）有一些在屏幕阅读器中不明显的javascript点击处理程序。

Answer 2

首先请记住，tabindex 在 a11y 中不是一个好习惯，而且标题不需要 tabindex NVDA 提供了带有 H 键的标题导航。 关于可点击，根据我的经验，我可以说是 NVDA 的一个已知问题，如果您检查在其他 SR（Voice over 或 Chromebox）中是否应该正确读取

Answer 3

回答：

这是因为属性tabindex使此元素键盘可聚焦。 可以通过按键盘上的 TAB 键来聚焦它。

提示#1：通常应避免使用值大于 0 的属性tabindex ！

不要使用tabindex="1" 、 tabindex="2"等等。 在某些情况下，只有tabindex="0"或tabindex="-1"才有用。 否则，您可能会为用户体验造成一团糟。

阅读更多：

• Google： 使用大于 0 的 tabindex 被视为反模式。
• WebAIM（可访问性）：这几乎总是一个坏主意。
• MDN： 避免使用大于 0 的 tabindex 值。

提示#2：通常不需要制作用户无法与之交互的可聚焦元素。

在特定情况下，如果用户无法与其交互，则使标题元素键盘可聚焦是没有意义的。

如果您担心屏幕阅读器，用户就不用担心，因为他们阅读不可聚焦的内容就好了。 来自辅助功能开发人员指南的引用：与仅使用键盘的用户相反，屏幕阅读器用户通常不使用 Tab 键来阅读页面！ 阅读“屏幕阅读器浏览和聚焦模式”以了解使用箭头键和 Tab 键导航之间的区别。

但是......规则的例外存在

存在规则的例外情况，如果开发人员将tabindex="-1"为他们希望以编程方式移动焦点以实现可访问性的标题，这可能是一个好主意。 例如，这种情况是在单页应用程序中使用 AJAX 更新新鲜内容。 焦点将移至标题，以便用户了解内容更新并能够从那里开始。 当当前关注的内容即将从 DOM 中删除（例如删除当前关注的表条目）或在表单提交试用后将焦点移动到错误摘要标题时，它也很有用。

Answer 4

就我而言（MacOS 上的 VoiceOver），似乎 H1 仅在 Firefox 上被宣布为可点击。 在 Chrome 上，它已正确宣布。

这让我相信这是一个 Firefox 错误。