如何让屏幕阅读器不将元素识别为元素组?

How to make screenreader not recognise an element as an element group?

我目前正在尝试使具有一到多个子元素的 DOM 元素尽可能易于访问。该元素将包含使用多层背景图像的说明性内容。我目前正在使用子元素来提供图像描述,如 in this informative blog post about how to label illustrative content inside of a content group 所述。容器元素还可能包含其他包含文本内容的子元素。

示例元素当前如下所示:

<div tabindex="0" class="comic-panel">
  <span role="img" aria-label="There is a cat sitting in the window."></span>
  <div style="background-image: url(/assets/img/window.png);" class="comic-panel__layer"></div>
  <div style="background-image: url(/assets/img/cat.png);" class="comic-panel__layer"></div>
  <p class="speech-bubble">Meow!</p>
</div>

使用 OSX VoiceOver 进行测试,在切换到此元素后,图像描述和文本可以正常阅读,但随后还会出现以下通知:

是否可以通过某种方式更新此元素的标记,使此 group 公告不是由屏幕阅读器发布的?在几乎所有情况下,用户都无法在元素内部进一步探索或使用任何内容,因此此消息将是多余的,我希望 VoiceOver 不会将元素识别为触发此消息的组。

(由于评论中的讨论解决了问题,将我所有的评论从评论部分移至答案部分。)

我认为可能对屏幕 reader (SR) 的工作原理以及 SR 用户如何浏览网页存在一些误解。

您的

上有 tabindex="0",但
没有 role and is not an interactive element. The tabindex spec 警告说:

"authors should only make elements focusable if they act as interactive controls".

所以除非用户实际可以与

交互,否则它不应该 tabindex="0"

如果用户 可以

交互,则
也将需要 role(请参阅previous URL to role) 以便 SR 将正确地宣布元素并且用户将了解如何与该元素交互。

对于 non-interactive 元素,SR 用户可以通过多种方式在页面中导航,以便他们可以访问页面上的其他文本。

一种更常见的导航方式是使用 向上向下 箭头键来移动 DOM . (实际上,你不是在走 DOM,而是 Accessibility Tree,它基本上是 DOM 的一个子集。例如,隐藏元素(CSS display:none) 在 DOM 但不在辅助功能树中。)

无论如何,up/down 箭头键让 SR 用户可以找到显示屏上的每一段文本。您所有的标题、段落、列表等

还有单字母快捷键,允许 SR 用户导航到特定类型的元素。例如,

  • H 将带我到下一个标题
  • T 会带我去下一个 table
  • L 将带我到下一个列表
  • B 将带我到下一个按钮

但是这些键只有在您使用语义 html 时才有效,例如

、、