如何防止屏幕阅读器在阅读此 div 标签的文本时说出“组”？

Question

在我的网页上，我有一个div（如下所示），其中包含我希望屏幕阅读器阅读的文本。

超文本标记语言

<div tabIndex={0}>
    "text needs to be read"
</div>

我什至不需要提供咏叹调标签就可以听到文本被读取。不过，我听说“文字需要组读”。我想知道如何避免说“团体”？我没有为 div 标签设置组角色。

另一个例子

这是另一个更清晰地描述问题的例子

<span class="jw-icon jw-icon-inline jw-button-color jw-reset jw-text-live" tabindex="-1" data-clicked="true">Live</span>

在任何浏览器中运行上面的代码片段。它使屏幕阅读器将其宣布为“Live，group”。有什么办法可以减轻这种行为。预期的行为应该像屏幕阅读器应将其读作“实时”

Answer 1

这里发生了很多事情。

首先，网页上的所有文本都可供屏幕阅读器使用，并且不需要tabindex="0"使其可供阅读。屏幕阅读器提供了大量快捷键来导航到不同类型的元素（标题、表格、列表等）。对于没有直接导航键的元素，屏幕阅读器用户可以使用向上/向下箭头键来浏览辅助功能树（类似于 DOM）。

其次，关于tabindex="0"，只能设置在交互元素上。tabindex规范说：

作者应该仅在元素充当交互式控件或小部件时才使其可聚焦。此外，作者应确保这些可聚焦元素具有适当的 ARIA 角色属性。

关于规范引用中第二句话中的 ARIA 角色，如果您的元素确实获得焦点，如果它不是本机可聚焦的元素（例如 a<a>或<button>或<input>），那么它需要有一个适当的角色，以便屏幕阅读器用户知道如何与之互动。

与此相关，你提到了aria-label。只有aria-label具有适当作用的元素才会受到尊重。请参阅“ 2.10 实际支持：aria-label、aria-labelledby 和 aria-scribedby ”。

因此，考虑到所有这些，回答你的问题有点困难，因为你的简单例子不够具体。没有角色的A<div>不应被理解为“组”。组通常是role="region"（或<section>）。您听到的行为可能取决于您使用的浏览器、屏幕阅读器以及使用屏幕阅读器（tab或arrow快速导航键）进行导航的方式。