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

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有一个警告说：

“如果作为互动控制，作者应该只使要素具有可聚焦性”。

因此，除非用户实际上可以与<div>进行交互，否则它不应该有tabindex="0"。

如果用户可以与<div>进行交互，那么<div>还需要一个role（参见role的前一个URL），这样SR就会正确地宣告该元素，用户将理解如何与该元素进行交互。

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

导航的一种常见方法是使用向上和向下箭头键来遍历DOM。 （实际上，你本身并没有走DOM，而是Accessibility Tree，它基本上是DOM的一个子集。例如，隐藏元素（CSS display:none）在DOM中，但不在辅助功能树中。）

无论如何，上/下箭头键让SR用户可以看到显示屏上的每一段文字。所有标题，段落，列表等

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

• H将带我到下一个标题
• T会带我到下一张桌子
• L将带我到下一个清单
• B会带我到下一个按钮

但是这些键仅在您使用语义html时才有效，例如<h2>，<table>，<ul>，<button>等，或者如果您使用的是适当的ARIA attributes。例如，如果有一个原因你不能使用 要做出真正的标题，您仍然可以通过使用ARIA告诉SR您有标题。

<span role="heading" aria-level="2">This is a custom h2 heading</span>

JAWS和NVDA是PC上常见的SR。他们将有类似的单键快捷键，可以在这里看到：

• JAWS shortcut keys
• NVDA shortcut keys
• VoiceOver shortcut keys（适用于Mac，不适用于iOS）。请注意，这些不是单键快捷键，如简单的H，但需要“VO”键（默认情况下为Ctrl + Option）与Cmd和H组合使用。

苹果有一个很好的tutorial on VoiceOver。

对于PC，Freedom Scientific（JAWS的制造商）有一个很好的tutorial on JAWS。

如果您对可访问性有疑问，那么在stackoverflow上发布肯定是一种方法，特别是如果您使用accessibility和其他可访问性相关标记（例如wai-aria或screen-readers，就像您在此问题上所做的那样）标记您的问题。

另一个资源是WebAIM community。任何人都可以加入，你可以“潜伏”，只是在他们进来或完全参与时阅读讨论。