NVDA屏幕阅读器可以读取文本中可点击的单词。

Question

有没有想过为什么在HTML示例的文本中使用Tab键时，NVDA会朗读可点击的单词？

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

NVDA将会读取可点击的测试。

- allo

---

FYI - 虽然与此无关，但您为什么要在标题中添加tabindex？因为这会导致阅读顺序和DOM顺序不同，所以正面的tabindex因可访问性原因而受到不赞成。此外，即使没有tab键，NVDA也可以读取您的标题。 - iandotkelly

我需要去我的Windows机器上测试一下，但很可能是因为你在元素上设置了tabindex="1"。根本没有必要让标题可用于Tab键导航。NVDA用户将使用屏幕阅读器的标题导航功能来查找标题。 - iandotkelly

Answer 1

首先要记住，tabindex在a11y方面并不是一个好的实践，而且标题不需要tabindex。NVDA提供了使用H键进行标题导航。至于可点击的内容，根据我的经验，这对于NVDA来说是一个已知的问题，如果您在其他SR（Voice over或Chromebox）中检查，应该可以正确阅读。

- Camilo Rincon

---

在Mac上，VoiceOver也会将其读作“可点击”。 - Nicu Surdu

Answer 2

在我的情况下（MacOS 上的 VoiceOver），似乎只有 Firefox 把 H1 标题标记为可点击。在 Chrome 中，它被正确地标记。

这让我认为这是 Firefox 的一个 bug。

- Nicu Surdu

---

在 Windows 上，它也会在 Chrome 中宣布可点击。我不认为这是一个错误，NVDA 的公告可能很有用。 - Hrvoje Golcic

Answer 3

简短回答：

tabindex 属性对于某些屏幕阅读器意味着功能。

详细回答：

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

他们浏览您的页面的另一种主要方式是通过标题。实际上，来自 webaim 的一项调查显示，标题是浏览页面以查找信息的主要方法（source）。在您的示例中，您给标题赋予了 tabindex，这将给人留下它具有某些功能或交互性的印象。据我所知，JAWS 和 NVDA 都会在具有 tabindex 的元素上读出“可点击”，因为它们可能很容易（并且通常会）具有一些不明显的 JavaScript 单击处理程序，这些处理程序无法从屏幕阅读器中看到。

- Skerrvy

---

tabindex与H1被宣布为可点击无关。 - Nicu Surdu

Answer 4

答案：

这是因为属性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 中删除（例如删除当前聚焦的表格条目）或在表单提交尝试后将焦点移动到错误摘要标题时，它也可能很有用。

- Hrvoje Golcic

---

tabindex与H1被宣布为可点击无关。 - Nicu Surdu

@NicuSurdu，我可以百分之百确认我的答案仍然是正确的。在 Windows 10 上使用 NVDA 2022.2.1，给定的示例在焦点和浏览模式下仍然被宣布为“可点击”（刚刚重新生成）。这对于 NVDA 也是预期的。 - Hrvoje Golcic

是的，但这与 tabindex 有关吗？如果您删除 tabindex，它是否仍会宣布 h1 可点击？ - Nicu Surdu

@NicuSurdu 不太是。我没有在 MacOS 上尝试过，可能那里有所不同，但我在 Windows 上尝试了 Firefox、Chrome 和 IE。它并没有起作用。它还会宣布具有 tabindex 或 onclick 的可点击元素（否则不可交互），以提示此处正在发生某些事情，这也是有道理的。 - Hrvoje Golcic