问可访问性：`tabindex=“-1”是指屏幕阅读器看不到的元素(类似于‘`aria隐含=“true”’)

EN

可访问性：tabindex=“-1”是否意味着该元素对屏幕阅读器不可见(类似于aria-hidden=“true”)

tabindex="-1"意味着一个项目只能通过编程实现可聚焦。

aria-hidden="true"意味着该项将从可访问性树中完全删除。

在您考虑到屏幕阅读器用户可以通过<h1>导航到<h6> (例如)之前，它们可能看起来是一样的。添加tabindex="-1"并没有什么区别，因为标题是不可聚焦的，而aria-hidden="true"与表示display: none本质上是一样的，这意味着屏幕阅读器根本无法访问它。

记住这一点，你的问题的答案就变得简单了：

我也需要在所有这些元素中添加aria-隐含=“true”吗？

是的，您确实需要添加aria-hidden="true"，因为人们仍然可能尝试通过Headings、Links等导航，这些都是不可聚焦的，但仍然可以通过虚拟游标访问。

如果我在这些元素上设置了咏叹调-隐藏=“真”，然后返回到咏叹调-隐藏=“假”，屏幕阅读器会发现这个变化发生了吗？

是的，屏幕阅读器对此没有问题。您不需要任何类似aria-live的东西来让屏幕阅读器知道更改。实际上，如果添加了aria-live，就会使事情变得更难访问，因为每次在整个部分中对DOM进行更改时，它都会宣布。

你需要考虑什么

管理焦点-当您关闭对话时，确保焦点恢复到打开它的按钮，因为这是预期的行为。(确保在创建父/项后执行，否则可能会导致意外行为)

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-hidden的4个项，因此可维护性就很容易了。

另外，为了向前兼容性，您可以考虑使用 element