父母的Aria-hidden = true不会使其子女也隐藏咏叹调

Question

我正在读一点关于咏叹调的用法,并且遇到了这篇文章:ARIA使用的第四条规则.我不清楚的一个部分是:

"将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-hidden="true" 不避免的元件将被插入的辅助树,它并没有删除从普通键盘Tab键顺序的元素.您仍然可以选择链接并选择它.您必须添加tabindex="-1"到链接以防止标签.

我知道您的示例代码段仅用于测试目的,但希望您没有从屏幕阅读器用户隐藏交互式元素(如链接)的情况. aria-hidden应使用从屏幕阅读器隐藏非重要的东西(装饰事情),或者如果你是视觉上暂时隐瞒了什么,也想从屏幕阅读器隐藏的东西,例如,如果你有一个展开/折叠的事情,当元素为折叠后,您通过将内容移出屏幕(而不是使用display:none)来直观地隐藏内容,您也希望aria-hidden="true"设置内容.