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

Question

我目前正在尝试使具有一到多个子元素的 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 不会将元素识别为触发此消息的组。

Answer 1

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

我认为可能对屏幕 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 时才有效，例如

、、

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

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

html

accessibility

wai-aria

voiceover

screen-readers

、、
、