accessibility - 父级上的 Aria-hidden=true 不会使其子代也隐藏 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,"

我尝试了以下代码段，但仍然可以访问 anchor 标记(即使我在其父级上放置了 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

取决于您所说的链接仍然“可访问”是什么意思。添加 aria-hidden="true" 将阻止元素包含在可访问性树中(类似于 DOM)，因此屏幕阅读器用户在浏览可访问性树 时将无法找到链接 (通常使用向上/向下箭头完成)键)。

ARIA 属性影响屏幕阅读器访问元素的方式。它不提供任何行为。在您提供的“咏叹调使用规则”链接中，进一步查看“What Adding a Role Does Not Do”。

因此，虽然添加 aria-hidden="true" 会阻止元素插入可访问性树中，但 不会 将元素从正常的键盘 Tab 键顺序中删除。您仍然可以选择链接并选择它。您必须将 tabindex="-1" 添加到链接以防止跳转到它。

我知道您的示例代码段仅用于测试目的，但希望您没有遇到屏幕阅读器用户隐藏交互式元素(例如链接)的情况。 aria-hidden 应该用于从屏幕阅读器中隐藏不重要的东西(装饰性的东西)，或者如果您在视觉上暂时隐藏某些东西并且还希望从屏幕阅读器中隐藏该东西，例如，如果您有一个展开/折叠的东西以及当元素已折叠，您通过将其移出屏幕(而不是使用 display:none )来直观地隐藏内容，您也希望在内容上设置 aria-hidden="true" 。