Question

我正在阅读一些关于咏叹调的用法，并遇到了这份文档：Fourth Rule of ARIA Use。我不清楚的一部分是：

“将隐藏的aria应用于可见的互动对象的父/祖先元素还将导致交互式元素被隐藏，”

我尝试了以下代码段，但是该定位标记仍然可以访问（即使我在其父标记上隐藏了aria）。我在这里想念什么？

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"时可以防止元素插入到可访问性树中，但它不会不从常规键盘跳格顺序中删除该元素。您仍然可以选择链接并选择它。您必须将tabindex="-1"添加到链接中，以防止对其进行制表。

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

父母的Aria-hidden = true不会让其子女也成为aria-hidden

1 个答案: