让可访问的用户知道父容器有一个新的 "current" 子容器
Letting accessible users know that a parent container has a new "current" child
我们有一个基于 Web 的应用程序，它基本上由单个父 <main>（容器）内的一堆子 <div> 标签（屏幕）组成。每个子屏幕至少有一个到另一个同级屏幕的路径，但有几个有多个路径。一次只能激活一个屏幕。在视觉上，屏幕从右侧滑入并从左侧滑出。所有未显示的屏幕在转换完成后都设置了 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 来 transition/hide 东西，但在大多数情况下没有 AJAX 并且 DOM 与服务器提供的 HTML 完全一样。
我的问题是，假设此设置，让非视觉用户知道 <main> 有新内容的最佳方式是什么？
我们正在查看 aria-live 以及在 <main> 上设置的 aria-atomic="true"，但不确定这是否太具有破坏性。我们确实在改变一些东西，但我们认为警报可能太强了。
aria-live一般用在adding/removing/updating的内容。如果 parent 容器有 aria-live，那么如果一个新的 child DOM 元素被添加到 parent，它将被宣布到屏幕 readers。如果更新了现有 DOM 元素（例如，如果文本发生更改），也会公布。
但是，如果您只是取消隐藏现有的 DOM 元素，则不会公布 hiding/unhiding 的行为。
听起来您好像有一个单页应用程序 (SPA) 或某种旋转木马。
用户是否发起了内容更改？他们 select 有下一步按钮吗？未隐藏的内容中是否有任何可聚焦的元素？一种可能是将焦点设置在新内容的标题上。标题需要 tabindex="-1" 以便您可以在其上调用 focus() 。您不希望 tabindex 为 0，因为这将允许正常的键盘 Tab 键将焦点放在它上面，并且您通常不希望让焦点移动到非交互式的内容。但是以编程方式将焦点放在标题上是可以的。然后用户可以 tab 到新内容中的下一个可聚焦元素。
如果您不将焦点放在新内容的标题上，那么您可以将焦点放在内容中的第一个可聚焦元素上，但这不是一个好的解决方案。屏幕 reader 用户将不得不弄清楚他们与这个新元素的上下文，并且可能会向后浏览 DOM 以查看他们在哪里。通过以编程方式将焦点放在标题上，您已经为他们完成了工作。
我们有一个基于 Web 的应用程序，它基本上由单个父 <main>（容器）内的一堆子 <div> 标签（屏幕）组成。每个子屏幕至少有一个到另一个同级屏幕的路径，但有几个有多个路径。一次只能激活一个屏幕。在视觉上，屏幕从右侧滑入并从左侧滑出。所有未显示的屏幕在转换完成后都设置了 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 来 transition/hide 东西，但在大多数情况下没有 AJAX 并且 DOM 与服务器提供的 HTML 完全一样。
我的问题是，假设此设置，让非视觉用户知道 <main> 有新内容的最佳方式是什么？
我们正在查看 aria-live 以及在 <main> 上设置的 aria-atomic="true"，但不确定这是否太具有破坏性。我们确实在改变一些东西，但我们认为警报可能太强了。
aria-live一般用在adding/removing/updating的内容。如果 parent 容器有 aria-live，那么如果一个新的 child DOM 元素被添加到 parent，它将被宣布到屏幕 readers。如果更新了现有 DOM 元素（例如，如果文本发生更改），也会公布。
但是，如果您只是取消隐藏现有的 DOM 元素，则不会公布 hiding/unhiding 的行为。
听起来您好像有一个单页应用程序 (SPA) 或某种旋转木马。
用户是否发起了内容更改？他们 select 有下一步按钮吗？未隐藏的内容中是否有任何可聚焦的元素？一种可能是将焦点设置在新内容的标题上。标题需要 tabindex="-1" 以便您可以在其上调用 focus() 。您不希望 tabindex 为 0，因为这将允许正常的键盘 Tab 键将焦点放在它上面，并且您通常不希望让焦点移动到非交互式的内容。但是以编程方式将焦点放在标题上是可以的。然后用户可以 tab 到新内容中的下一个可聚焦元素。
如果您不将焦点放在新内容的标题上，那么您可以将焦点放在内容中的第一个可聚焦元素上，但这不是一个好的解决方案。屏幕 reader 用户将不得不弄清楚他们与这个新元素的上下文，并且可能会向后浏览 DOM 以查看他们在哪里。通过以编程方式将焦点放在标题上，您已经为他们完成了工作。