Aria-hidden=true 在 parent 上不会使其 children 也 aria-hidden

Question

我正在阅读一些关于 aria 用途的文章，并看到了这篇文档：Fourth Rule of ARIA Use。我不清楚的一部分是：

"Applying aria-hidden to a parent/ancestor of a visible interactive element will also result in the interactive element being hidden,"

我尝试了以下代码片段，但仍然可以访问锚标记（即使我在其 parent 上放置了 aria-hidden）。我在这里错过了什么？

body, html {
  background-color: #333;
  height: 100%;
}

#main {
  margin: 0 auto;
  width: 80%;
  background-color: #fff;
  height: 100%;
  padding: 50px;
}

.test {
  border: 1px solid #555;
  padding: 10px;
}

<div id="main">
  <div tabindex="0">Woohoo</div>
  <div class="test" aria-hidden="true" role="presentation">
    <div class="one" aria-hidden="true">
        <span aria-hidden="true">
          <a href="#">Testing</a>
        </span>
    </div>
  </div>
</div>

Answer 1

取决于您所说的 link 仍然是 "accessible" 的意思。添加 aria-hidden="true" 将阻止元素包含在可访问性树中（类似于 DOM），这样屏幕 reader 用户将无法找到 link 遍历辅助功能树时（通常使用up/down箭头键完成）。

ARIA 属性会影响屏幕 reader 访问元素的方式。它不提供任何行为。在您提供的 "rules of aria use" link 中，进一步向下看“What Adding a Role Does Not Do”。

因此，在添加 aria-hidden="true" 时会阻止元素被插入到辅助功能树中，它不会删除来自正常键盘 Tab 键顺序的元素。您仍然可以跳转到 link 和 select 它。您必须将 tabindex="-1" 添加到 link 以防止跳转到它。

我知道您的示例片段仅用于测试目的，但希望您不会遇到交互元素（例如 link 从屏幕中隐藏的情况 reader用户。 aria-hidden 应用于从屏幕 readers 中隐藏不重要的东西（装饰性的东西），或者如果您暂时在视觉上隐藏某些东西并且还希望从屏幕 readers 中隐藏东西，例如，如果你有一个 expand/collapse 的东西，当元素折叠时，你通过将它移出屏幕（而不是使用 display:none）来在视觉上隐藏内容，你会想要 aria-hidden="true" 也设置了内容。

Aria-hidden=true 在 parent 上不会使其 children 也 aria-hidden

Aria-hidden=true on parent does not make its children also aria-hidden

accessibility

wcag

wcag2.0