使用 ARIA 将 HTML 文本标记为装饰的正确方法

Question

在 http://getbootstrap.com/components/#pagination page/section 的早期版本中，它的代码为：

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span role="presentation">&larr;</span> Older</a></li>
    ...
  </ul>
</nav>

已更改为：

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    ...
  </ul>
</nav>

左箭头 (←) 纯粹是装饰性的，不需要通过屏幕显示 reader。根据http://www.w3.org/TR/wai-aria/roles#presentation:

presentation (role)

Example use cases:

An element whose content is completely presentational (like a spacer image, decorative graphic, or clearing element);

An image that is in a container with the img role and where the full text alternative is available and is marked up with aria-labelledby and (if needed) aria-describedby;

...

鉴于：

aria-hidden (state)

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

我明白'role=presentation'其实是在讲元素的语义意思，但是左箭头好像直接类似于'a spacer image, decorative graphic, or clearing element' , 并且肯定是 'visible or perceivable to any user'.

这里正确的设计模式是什么？ 'aria-hidden' 的含义是否更改以允许 'role=presentation' 的这一特定限制？

Answer 1

role 属性用于覆盖 HTML 元素角色到无障碍树的默认映射。这对元素的文本内容没有影响。

例如，div 上的角色="button" 将允许 div 作为按钮公布，但不会改变 [=23] 的文本这一事实=]（例如 "Submit"）仍将作为可访问名称公布。

在 ARIA 1.1 中，表示角色已被赋予 "none" 的同义词，以更好地表示其语义 http://www.w3.org/TR/wai-aria-1.1/#none

属性 aria-hidden 用于在可访问性树中隐藏元素本身和元素的内容（可访问名称），同时在文档中保持可见。这种语义一直如此。没变。

Answer 2

unobf 是正确的，但如果您考虑屏幕 reader 用户的体验，有时它会有所帮助。考虑这个简单的例子：

<div role='button' tabindex=0>alpha</div>
<br>
<div role='presentation' tabindex=0>beta</div>
<br>
<div role='button' tabindex=0>gamma</div>
<br>
<div role='button' tabindex=0 aria-hidden='true'>delta</div>
<br>
<div role='button' tabindex=0>epsilon</div>

如果您在 JAWS 中使用 VoiceOver 或虚拟 PC 光标，两者都可以让您将注意力放在角色='presentation' 项目上，不会说明角色，但会显示 'beta'. （我喜欢 unobf 在 1.1 规范中指出的新角色='none'。它更清楚地表明屏幕 reader 在设置为 'none' 时不应声明任何角色。作为spec 说，使用 'presentation' 有点令人困惑。）所以演示项目并没有真正隐藏在屏幕上 reader。您只是在告诉屏幕 reader 它没有作用。

另一方面，Aria-hidden 将它从屏幕上完全删除 reader，除了我糟糕的示例（这是故意的）。如果您在 JAWS 中使用 VoiceOver 或虚拟 PC 光标，两者都会跳过 aria-hidden 按钮。屏幕 reader 用户不会知道它在那里。但是，如果 JAWS 用户在页面中使用 TABBING，他们将登陆 aria-hidden 按钮，因为它是一个制表位。但由于它是 aria-hidden，JAWS 对要说什么感到有点困惑。当我尝试它时（FF 38 和 JAWS 16），它说 'beta'，这是来自先前 <div> 的文本。通常，您不希望 aria 隐藏某些内容，而是使其可通过键盘访问。这只是一个奇怪的场景。

回到 bootstrap 的旧示例，因为他们使用了 role='presentation' 并且它是一个 <span> 标签，所以 VoiceOver 和虚拟 PC 光标 JAWS 用户都可以将注意力放在 <span> 元素上，这可能不是他们想要的。由于箭头只是装饰，所以 aria 隐藏它是有道理的。

使用 ARIA 将 HTML 文本标记为装饰的正确方法

Correct way to mark HTML text as decorative with ARIA

html

accessibility

screen-readers

wai-aria