Javascript 可访问性：“tabindex=”是否-“1”表示元素对屏幕阅读器不可见（类似于'aria hidden='true'`）

我有一个网页，其中一个对话框

元素在内容顶部打开，导致下面的元素/内容无法访问

对话框打开时，下面的所有内容将接收

tabindex=“-1”

，以保持选项卡在对话框中的焦点

下面的内容还接收一个CSS类，该类会模糊元素，并将

指针事件设置为“无”，这样就不能用鼠标单击元素，但这些元素仍然存在并在DOM中可见（它们没有设置为
显示：无
）

两个问题：

我是否也需要向所有这些元素添加
aria hidden=“true”
？

我知道使用tab键将无法聚焦内容，但我不确定屏幕阅读器是否仍会尝试阅读内容

如果我在这些元素上设置了
aria hidden=“true”
，然后又恢复到
aria hidden=“false”
，屏幕阅读器会发现发生了这种更改吗？

<> Li >我担心设置<代码> ARIAL隐藏=“true”<代码>意味着屏幕阅读器将不再考虑该元素，即使我稍后将其设置为<代码> ARIAL隐藏=“false”<代码> > 
我是否需要共享父元素（对话框和内容都存在的地方）上的
aria live
<> LI>即使使用<代码> ARI Leals<代码>，屏幕阅读器会考虑以前设置为<代码> ARIAL隐藏=“true”<代码> < /LI>的元素吗？

注意：该对话框是一个带有提交按钮的表单。有时，它可能包括一个
解除
按钮，但不是在所有情况下。该对话框可能充当一个门，需要提交表单才能继续。
可访问性：是否
tabindex=“-1”
表示元素对屏幕阅读器不可见（类似于
aria hidden=“true”
）
tabindex=“-1”
表示一个项目只能通过编程聚焦

aria hidden=“true”
表示该项已从辅助功能树中完全删除

它们可能看起来是一样的，直到您认为屏幕阅读器用户可以通过<代码> <代码>导航到<代码> <代码>（例如）。添加
tabindex=“-1”
没有区别，因为标题无论如何都不可聚焦，而
aria hidden=“true”
本质上与说
display:none
相同，这意味着屏幕阅读器根本无法访问它

考虑到这一点，您的问题的答案变得简单：

我是否也需要向所有这些元素添加aria hidden=“true”？
是的，您确实需要添加
aria hidden=“true”
，因为人们仍然可以尝试通过
标题
、
链接等进行导航，这些链接无论如何都不可聚焦，但仍然可以通过虚拟光标访问

如果我在这些元素上设置了aria hidden=“true”，然后又恢复到aria hidden=“false”，屏幕阅读器会发现发生了这种更改吗？
是的，屏幕阅读器对此没有问题。您不需要任何类似于
aria live
的东西来让屏幕阅读器知道更改。事实上，如果您添加了
aria-live
，就会降低访问性，因为它会在整个部分中每次对DOM进行更改时宣布

你需要考虑什么？
管理焦点-当您关闭对话时，确保焦点恢复到打开它的按钮，这是预期的行为。（确保在使父项/项目
aria hidden=“false”
之后执行此操作，否则可能导致意外行为）

Esc关闭-确保退出键关闭对话

如何轻松地构建页面
实现这一切的一个简单方法（如果你能够重组所有内容）是在主要内容之外添加所有对话（当通过可访问性检查器运行站点时，您可能会收到“所有项目都应包含在地标中”的警告，但请忽略该指导原则，因为页面加载时您的对话框不应可访问）

e、 g



切换到

<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 hidden
4个项目，以便易于维护

此外，对于前向兼容性，可以考虑使用
<header aria-hidden="true"></header>
<main aria-hidden="true"></main>
<footer aria-hidden="true"></footer>
<section class="dialogue" role="dialogue" aria-hidden="false"></section>