我们有一个基于Web的应用程序，该应用程序基本上由一堆父<div>（容器）内的一堆子<main>标签（屏幕）组成。每个子屏幕至少具有到另一个兄弟屏幕的一条路径，但有几个具有多个路径。一次只能激活一个屏幕。视觉上，屏幕从右侧滑入并向左退出。过渡完成后，所有未显示的屏幕均设置了hidden属性。 DOM的简化版本为：
<main>
<div data-screen-name="Intro"></div>
<div hidden data-screen-name="Getting started"></div>
<div hidden data-screen-name="Create an account"></div>
<div hidden data-screen-name="Learn more about XYZ"></div>
</main>
我们正在使用JS进行过渡/隐藏，但是在大多数情况下，没有AJAX，并且DOM的功能与服务器提供的HTML完全相同。
我的问题是，假设采用此设置，什么是让非视觉用户知道<main>有新内容的最佳方法？
我们正在研究aria-live以及在aria-atomic="true"上设置的<main>，但不确定是否会造成太大破坏。我们肯定在改变一些东西，但是我们认为警报可能太强大了。
答案 0 :(得分：2)
aria-live通常在添加/删除/更新内容时使用。如果父容器具有aria-live，则如果将新的子DOM元素添加到父容器中，则它将向屏幕阅读器宣布。如果现有的DOM元素已更新（例如，如果文本更改），它也会被宣布。
但是，如果您只是取消隐藏现有的DOM元素，则不会宣布隐藏/取消隐藏的行为。
听起来您好像拥有一个单页应用（SPA）或某种轮播。
用户是否发起内容更改？他们选择下一个按钮吗？隐藏的内容中是否包含任何可聚焦的元素？一种可能是将重点放在新内容的标题上。该标题将需要tabindex="-1"，以便您可以在其上调用focus（）。您不希望tabindex为0，因为那样会使普通的键盘制表键将焦点放在该索引上，并且您通常不希望焦点移到非交互式的位置。但是以编程方式将重点放在标题上是可以的。然后，用户可以 tab 到新内容中的下一个可聚焦元素。
如果您不将重点放在新内容的标题上，则可以将重点放在内容中的第一个可聚焦元素上，但这并不是一个好的解决方案。屏幕阅读器用户将必须弄清楚他们对这个新元素的上下文，并且可能会向后浏览DOM以查看它们的位置。通过以编程方式将重点放在标题上，您已经为他们完成了工作。