Aria-hidden=true on parent 不会使其子项也 aria-hidden

Question

我正在阅读有关 aria 使用的一些信息，并偶然发现了这段文档：Fourth Rule of ARIA Use。我不清楚的一个部分是：

"将 aria-hidden 应用于可见交互的父/祖先 元素也会导致交互元素被隐藏，”

我尝试了以下 sn-p，但仍然可以访问锚标记（即使我在其父项上放置了 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 属性影响屏幕阅读器访问元素的方式。它不提供任何行为。在您提供的“使用 aria 的规则”链接中，进一步查看“What Adding a Role Does Not Do”。

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

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