可访问性：`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=\xe2\x80\x9c-1\xe2\x80\x9d意味着该元素对屏幕阅读器不可见（类似于aria-hidden=\xe2\x80\x9ctrue\xe2\x80\x9d）

\n

tabindex="-1"意味着某个项目只能以编程方式聚焦。

\n

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

\n

它们可能看起来相同，直到您考虑到屏幕阅读器用户可能会导航到<h1>（<h6>例如）。添加tabindex="-1"没有任何区别，因为标题无论如何都不可聚焦，而aria-hidden="true"本质上与所说相同display: none，意味着屏幕阅读器根本无法访问它。

\n

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

\n

我是否还需要将 aria-hidden="true" 添加到所有这些元素中？

\n

是的，您确实需要添加aria-hidden="true"，因为人们可能仍然尝试通过 等导航Headings，Links无论如何都无法聚焦，但仍然可以通过虚拟光标进行访问。

\n

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

\n

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

\n

你需要考虑什么

\n

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

\n

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

\n

如何轻松构建页面

\n

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

\n

例如

\n

<header aria-hidden="false"></header>\n<main aria-hidden="false"></main>\n<footer aria-hidden="false"></footer>\n<section class="dialogue" role="dialogue" aria-hidden="true"></section>\n

\n

切换到

\n

<header aria-hidden="true"></header>\n<main aria-hidden="true"></main>\n<footer aria-hidden="true"></footer>\n<section class="dialogue" role="dialogue" aria-hidden="false"></section>\n

\n

这样，您只需添加/切换 4 个项目，aria-hidden因此可维护性很容易。

\n

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

\n