可访问性：`tabindex="-1"` 是否意味着该元素对屏幕阅读器不可见（类似于 `aria-hidden="true"`）

Question

我有一个网页，其中一个对话框 <section role="dialog"> 元素在内容顶部打开，导致下面的元素/内容无法访问。

当对话框打开时，下面的所有内容都会收到tabindex="-1" 以保持对话框内的选项卡焦点。

下面的内容还接收一个模糊元素的 CSS 类，并将 pointer-events 设置为 none，因此这些元素不能用鼠标点击，但这些元素仍然全部存在并在 DOM 中可见（它们未设置到display: none)。

两个问题：

1. 我还需要将aria-hidden="true" 添加到所有这些元素吗？
   • 我知道内容将不再可通过 Tab 键获得焦点，但我不确定屏幕阅读器是否仍会尝试阅读内容。
2. 如果我在这些元素上设置aria-hidden="true"，然后又恢复为aria-hidden="false"，屏幕阅读器会发现发生了这种变化吗？
   • 我担心设置aria-hidden="true"意味着屏幕阅读器不会再次考虑该元素，即使我稍后将其设置为aria-hidden="false"。
   • 我是否需要在共享父元素（对话框和内容都存在）上使用aria-live？
   • 即使使用aria-live，屏幕阅读器也会考虑以前设置为aria-hidden="true" 的元素吗？

注意：对话框是一个带有提交按钮的表单。有时它可能包括一个Dismiss 按钮，但并非在所有情况下都如此。该对话框可以充当需要提交表单才能继续的大门。

Answer 1

可访问性：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 等进行导航，它们无论如何都无法聚焦但仍可以通过虚拟光标访问。

如果我在这些元素上设置 aria-hidden="true"，然后又恢复为 aria-hidden="false"，屏幕阅读器会发现发生了这种变化吗？

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

你需要考虑什么

管理焦点 - 当您关闭对话框时，请确保焦点恢复到打开它的按钮，因为这是预期的行为。 （确保在在您将父项/项目设为aria-hidden="false" 之后执行此操作，否则可能会导致意外行为）

Esc 关闭 - 确保 Escape 键关闭对话。

如何轻松构建页面

实现所有这些的简单方法（如果您能够重组所有内容）是将所有对话添加到主要内容之外（您可能会在运行时收到“所有项目应包含在地标中”的警告通过可访问性检查器检查您的网站，但忽略该指南，因为无论如何在页面加载时您的对话都不应访问）。

例如

<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 个项目，因此易于维护。

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