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

Question

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

HTML

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

即使没有提供 aria-label，我也能听到文本被阅读。但是，我听说“文本需要阅读组”。我想知道如何避免它说“组”？我没有为 div 标签设置组角色。

另一个例子

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

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

在任何浏览器中运行上面的 sn-p。它使屏幕阅读器宣布它为“Live, group”。 有什么办法可以减轻这种行为。预期的行为应该就像屏幕阅读器应该将其读取为“实时”

Answer 1

这里发生了很多事情。

首先，网页上的所有文本可供屏幕阅读器使用，无需tabindex="0" 即可阅读。屏幕阅读器提供lots of shortcut keys 导航到不同类型的元素（标题、表格、列表等）。对于没有直接导航键的元素，屏幕阅读器用户可以使用向上/向下箭头键遍历accessibility tree（类似于 DOM）。

其次，关于tabindex="0"，它只能设置在interactive元素上。 tabindex spec 说：

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

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

与此相关，您提到了aria-label。 aria-label 仅适用于具有适当角色的元素。见“2.10 Practical Support: aria-label, aria-labelledby and aria-describedby”。

鉴于所有这些，回答您的问题有点困难，因为您的简单示例不够具体。没有角色的<div> 不应读作“组”。组通常是role="region"（或<section>）。您听到的行为可能取决于您使用的浏览器、屏幕阅读器、屏幕阅读器的导航方式（tab 或 arrow 或 quicknav键）。