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

（自评论中的讨论解决了问题以来，我所有的评论都从评论部分移至答案部分。）

我认为对于屏幕阅读器（SR）的工作方式以及SR用户如何浏览网页可能会有一些误解。

您的

上有tabindex="0"，但是

没有role，并且不是交互式元素。 tabindex spec的警告内容为：

“作者只有在充当交互控件时才应使元素具有焦点”。

因此，除非用户可以与

进行实际交互，否则它不应具有tabindex="0"。

如果用户可以与

进行交互，则

也将需要一个role（请参见role的先前网址），以便SR将正确地宣布该元素，并且用户将了解如何与该元素进行交互。

对于非交互式元素，SR用户可以通过多种方式在页面上浏览，以便他们可以访问页面上的其他文本。

更常见的导航方式之一是使用上和下箭头键来遍历DOM。（实际上，您本身并不是在走DOM，而是走Accessibility Tree，它基本上是DOM的子集。例如，隐藏元素（CSS display:none）位于DOM中，但是不在可访问性树中。）

无论如何，向上/向下箭头键使SR用户可以访问显示屏上的每个文本。您所有的标题，段落，列表等。

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

H 带我进入下一个标题
T 将带我到下一张桌子
L 将带我进入下一个列表
B 将带我进入下一个按钮

但是这些键仅在使用语义html（例如

，，

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

1 个答案:

，，
，