我有一个网页，其中对话框<section role="dialog">元素在内容顶部打开，导致下面的元素/内容无法访问。
当对话框打开时，下面的所有内容都会收到tabindex="-1"，以将选项卡焦点保留在对话框中。
下面的内容还会收到一个 CSS 类，该类模糊了元素，并将pointer-events设置为 none，因此元素无法用鼠标单击，但这些元素仍然存在并在 DOM 中可见(它们未设置为display: none(。
两个问题：
- 我是否还需要向所有这些元素添加
aria-hidden="true"？- 我知道使用 Tab 键将不再聚焦内容，但我不确定屏幕阅读器是否仍会尝试阅读内容。
- 如果我对这些元素进行
aria-hidden="true"设置，然后恢复到aria-hidden="false"，屏幕阅读器会发现发生了此更改吗？- 我担心设置
aria-hidden="true"意味着屏幕阅读器不会再次考虑该元素，即使我稍后将其设置为aria-hidden="false". - 我是否需要
aria-live共享父元素(对话框和内容都存在(？ - 即使有
aria-live，屏幕阅读器会考虑以前设置为aria-hidden="true"的元素吗？
- 我担心设置
注意：该对话框是带有提交按钮的表单。有时它可以包括一个Dismiss按钮，但并非在所有情况下。该对话框可以充当需要提交表单才能继续的入口。
可访问性：tabindex=“-1”是否意味着该元素对屏幕阅读器不可见(类似于aria-hidden=“true”(
tabindex="-1"意味着项目只能以编程方式聚焦。
aria-hidden="true"表示该项目已从辅助功能树中完全删除。
在您认为屏幕阅读器用户可能会<h1>导航到<h6>(例如(之前，它们可能看起来相同。添加tabindex="-1"没有区别，因为标题无论如何都无法聚焦，而aria-hidden="true"本质上与说display: none相同，意味着屏幕阅读器根本无法访问它。
考虑到这一点，您的问题的答案变得简单：
我是否还需要将aria-hidden="true"添加到所有这些元素中？
是的，您确实需要添加aria-hidden="true"，因为人们可能仍然会尝试通过Headings、Links等进行导航，这些、等无论如何都无法聚焦，但仍可以通过虚拟光标访问。
true"，然后恢复为 aria-hidden="false"，屏幕阅读器会发现发生了此更改吗？
是的，屏幕阅读器对此没有问题。您不需要类似aria-live的东西来让屏幕阅读器知道更改。事实上，如果你添加了aria-live你会使事情变得不那么容易访问，因为它会在每次对整个部分中的 DOM 进行更改时宣布。
您需要考虑什么
管理焦点- 关闭对话框时，请确保焦点恢复为打开它的按钮，这是预期行为。(请确保在将父项/项aria-hidden="false"后执行此操作，否则可能会导致意外行为(
Esc 关闭 - 确保Esc键关闭对话框。
如何轻松构建页面
实现所有这些目标的一种简单方法(如果您能够重组所有内容(是在主要内容之外添加所有对话(通过可访问性检查器运行您的网站时，您可能会收到"所有项目都应包含在地标中"的警告，但忽略该指南，因为无论如何页面加载时您的对话框都无法访问(。
例如
<header aria-hidden="false"></header>
<main aria-hidden="false"></main>
<footer aria-hidden="false"></footer>
<section class="dialogue" role="dialogue" aria-hidden="true"></section>
切换到
<header aria-hidden="true"></header>
<main aria-hidden="true"></main>
<footer aria-hidden="true"></footer>
<section class="dialogue" role="dialogue" aria-hidden="false"></section>
这样，您只需要添加/切换aria-hidden4 个项目，因此易于维护。
此外，为了向前兼容，您可以考虑使用<dialogue>元素