How do I prevent the screen reader from saying "group" when reading this div tag's text?
在我的网页上,我有一个 div(如下所示),其中包含我希望屏幕阅读器阅读的文本。
HTML
1
| "text needs to be read" |
即使没有提供 aria-label,我也能听到文本被阅读。但是,我听说"文本需要阅读组"。我想知道如何避免它说"组"?我没有为 div 标签设置组角色。
另一个例子
这是另一个更清晰地描述问题的示例
1
| <span class="jw-icon jw-icon-inline jw-button-color jw-reset jw-text-live" tabindex="-1" data-clicked="true">Live</span> |
在任何浏览器中运行上述代码段。它使屏幕阅读器将其宣布为"Live, group"。
有什么办法可以减轻这种行为。预期的行为应该就像屏幕阅读器应该将其读取为"实时"
- 哪个屏幕阅读器软件
-
这里发生了很多事情。
首先,网页上的所有文本都可供屏幕阅读器使用,并且不需要 tabindex="0" 即可使其可供阅读。屏幕阅读器提供了许多快捷键来导航到不同类型的元素(标题、表格、列表等)。对于没有直接导航键的元素,屏幕阅读器用户可以使用向上/向下箭头键浏览可访问性树(类似于 DOM)。
其次,关于tabindex="0",它应该只设置在交互元素上。 tabindex 规范说:
authors should only make elements focusable if they act as interactive controls or widgets. In addition, authors should ensure that these focusable elements have an appropriate ARIA role attribute.
关于规范引用第二句中的 ARIA 角色,如果您的元素确实获得焦点,如果它不是本机可聚焦的元素(例如 或 <button> 或 <input>),那么它需要有一个适当的角色,以便屏幕阅读器用户知道如何与之交互。
与此相关,您提到了aria-label。 aria-label 仅适用于具有适当角色的元素。请参阅"2.10 实用支持:aria-label、aria-labelledby 和 aria- describeby"。
鉴于所有这些,回答您的问题有点困难,因为您的简单示例不够具体。没有角色的 不应读作"组"。组通常是 role="region"(或 <section>)。您听到的行为可能取决于您使用的浏览器、屏幕阅读器、屏幕阅读器的导航方式(tab 或 arrow 或 quicknav 键)。
这里发生了很多事情。
首先,网页上的所有文本都可供屏幕阅读器使用,并且不需要 tabindex="0" 即可使其可供阅读。屏幕阅读器提供了许多快捷键来导航到不同类型的元素(标题、表格、列表等)。对于没有直接导航键的元素,屏幕阅读器用户可以使用向上/向下箭头键浏览可访问性树(类似于 DOM)。
其次,关于tabindex="0",它应该只设置在交互元素上。 tabindex 规范说:
authors should only make elements focusable if they act as interactive controls or widgets. In addition, authors should ensure that these focusable elements have an appropriate ARIA role attribute.
关于规范引用第二句中的 ARIA 角色,如果您的元素确实获得焦点,如果它不是本机可聚焦的元素(例如 或 <button> 或 <input>),那么它需要有一个适当的角色,以便屏幕阅读器用户知道如何与之交互。
与此相关,您提到了aria-label。 aria-label 仅适用于具有适当角色的元素。请参阅"2.10 实用支持:aria-label、aria-labelledby 和 aria- describeby"。
鉴于所有这些,回答您的问题有点困难,因为您的简单示例不够具体。没有角色的 不应读作"组"。组通常是 role="region"(或 <section>)。您听到的行为可能取决于您使用的浏览器、屏幕阅读器、屏幕阅读器的导航方式(tab 或 arrow 或 quicknav 键)。
- 我知道了。我删除了 tabIndex,我对它使用 NVDA 和 Chrome 没有任何问题。但是,如果我使用 Edge Narrator,如果我使用选项卡或箭头,屏幕阅读器将无法读取 div 中的文本。我应该赋予 div 什么样的角色,以便叙述者可以阅读它? div 仅包含 Web 应用程序标头中的一些信息。
-
一个更完整的代码示例会有所帮助。如果嵌入在 <header> 中(它有一个隐含的 role="banner"),你不应该需要任何其他东西。您正在使用 narrator 中的向下箭头来遍历 DOM?它跳过了 ?你在任何地方都有 aria-hidden="true" 吗?