辅助功能：`tabindex="-1"` 是否意味着该元素对屏幕阅读器不可见（类似于 `aria-hidden="true"`）
Accessibility: does `tabindex="-1"` mean the element is not visible to screenreaders (similar to `aria-hidden="true"`)
我有一个网页，其中的对话框 <section role="dialog"> 元素在内容顶部打开，导致下面的 elements/content 无法访问。
当对话框打开时，下面的所有内容都会收到 tabindex="-1" 以将选项卡焦点保持在对话框中。
下面的内容也收到一个 CSS class 来模糊元素，并将 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”是否表示该元素对屏幕reader不可见（类似于aria-hidden=“true”）
tabindex="-1" 表示一个项目只能以编程方式获得焦点。
aria-hidden="true" 表示该项目已从辅助功能树中完全删除。
它们可能看起来相同，直到您认为屏幕 reader 用户可以通过 <h1> 导航到 <h6>（例如）。添加 tabindex="-1" 没有任何区别，因为标题无论如何都不可聚焦，而 aria-hidden="true" 本质上与说 display: none 相同，意味着屏幕 reader 根本无法访问它.
考虑到这一点，您的问题的答案就变得简单了：
我是否还需要向所有这些元素添加 aria-hidden="true"？
是的，您确实需要添加 aria-hidden="true"，因为人们可能仍会尝试通过 Headings、Links 等进行导航，这些无论如何都无法聚焦，但仍然可以通过虚拟光标访问。
如果我在这些元素上设置 aria-hidden="true"，然后恢复为 aria-hidden="false"，屏幕 reader pick-up发生了这种变化？
是的，屏幕 reader 不会有这个问题。您不需要像 aria-live 这样的东西来让屏幕 reader 知道更改。事实上，如果您添加了 aria-live，您会降低访问的难度，因为每次对整个部分中的 DOM 进行更改时它都会宣布。
你需要考虑什么
管理焦点 - 当您关闭对话框时，确保焦点恢复到打开它的按钮，这是预期的行为。 （确保你在 在 完成 parent / 项目 aria-hidden="false" 之后执行此操作，否则可能会导致意外行为）
Esc 关闭 - 确保 Escape 键关闭对话框。
如何轻松构建页面
实现所有这些的一个简单方法（如果您能够重组所有内容）是将所有对话添加到主要内容之外（当 [=84 时，您可能会收到 'all items should be contained by landmarks' 的警告=] 通过可访问性检查器检查您的网站，但请忽略该准则，因为无论如何在页面加载时都不应访问您的对话）。
例如
<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>
这样你只有 4 个项目需要添加/切换 aria-hidden 所以可维护性很容易。
此外，为了向前兼容，您可以考虑使用 <dialogue> element
我有一个网页，其中的对话框 <section role="dialog"> 元素在内容顶部打开，导致下面的 elements/content 无法访问。
当对话框打开时，下面的所有内容都会收到 tabindex="-1" 以将选项卡焦点保持在对话框中。
下面的内容也收到一个 CSS class 来模糊元素，并将 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”是否表示该元素对屏幕reader不可见（类似于aria-hidden=“true”）
tabindex="-1" 表示一个项目只能以编程方式获得焦点。
aria-hidden="true" 表示该项目已从辅助功能树中完全删除。
它们可能看起来相同，直到您认为屏幕 reader 用户可以通过 <h1> 导航到 <h6>（例如）。添加 tabindex="-1" 没有任何区别，因为标题无论如何都不可聚焦，而 aria-hidden="true" 本质上与说 display: none 相同，意味着屏幕 reader 根本无法访问它.
考虑到这一点，您的问题的答案就变得简单了：
我是否还需要向所有这些元素添加 aria-hidden="true"？
是的，您确实需要添加 aria-hidden="true"，因为人们可能仍会尝试通过 Headings、Links 等进行导航，这些无论如何都无法聚焦，但仍然可以通过虚拟光标访问。
如果我在这些元素上设置 aria-hidden="true"，然后恢复为 aria-hidden="false"，屏幕 reader pick-up发生了这种变化？
是的，屏幕 reader 不会有这个问题。您不需要像 aria-live 这样的东西来让屏幕 reader 知道更改。事实上，如果您添加了 aria-live，您会降低访问的难度，因为每次对整个部分中的 DOM 进行更改时它都会宣布。
你需要考虑什么
管理焦点 - 当您关闭对话框时，确保焦点恢复到打开它的按钮，这是预期的行为。 （确保你在 在 完成 parent / 项目 aria-hidden="false" 之后执行此操作，否则可能会导致意外行为）
Esc 关闭 - 确保 Escape 键关闭对话框。
如何轻松构建页面
实现所有这些的一个简单方法（如果您能够重组所有内容）是将所有对话添加到主要内容之外（当 [=84 时，您可能会收到 'all items should be contained by landmarks' 的警告=] 通过可访问性检查器检查您的网站，但请忽略该准则，因为无论如何在页面加载时都不应访问您的对话）。
例如
<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>
这样你只有 4 个项目需要添加/切换 aria-hidden 所以可维护性很容易。
此外，为了向前兼容，您可以考虑使用 <dialogue> element