我目前正在尝试使具有一到多个子元素的 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 不将元素识别为触发此消息的组。
最佳答案
(由于评论中的讨论解决了问题，因此将我所有的评论从评论部分移至答案部分。)
我认为对于屏幕阅读器 (SR) 的工作方式以及 SR 用户如何浏览网页可能存在一些误解。
你的
tabindex="0" 但 "authors should only make elements focusable if they act as interactive controls".
因此除非用户实际上可以与
tabindex="0"。
如果用户可以与
角色(参见前面的角色 URL >) 以便 SR 将正确地宣布该元素，并且用户将了解如何与该元素进行交互。
对于非交互式元素，SR 用户可以通过多种方式在页面中导航，以便他们可以访问页面上的其他文本。
一种更常见的导航方式是使用 up 和 down 箭头键在 DOM 中移动。 (实际上，您并不是在遍历 DOM，而是遍历 Accessibility Tree，它基本上是 DOM 的一个子集。例如，隐藏元素 (CSS display:none) 在DOM 但不在辅助功能树中。)
无论如何，向上/向下箭头键让 SR 用户可以找到显示屏上的每一段文本。您所有的标题、段落、列表等。
还有单字母快捷键，允许 SR 用户导航到特定类型的元素。例如，
- H 将带我到下一个标题
- T 会带我去下一张 table
- L 将带我到下一个列表
- B 将带我到下一个按钮
但这些键只有在您使用语义 html 时才有效，例如