Question

在http://getbootstrap.com/components/#pagination页面/部分的早期版本中，它有代码：

<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>

左箭头（＆amp; larr;）纯粹是装饰性的，不需要由屏幕阅读器宣布。根据{{3}}：

演示文稿（角色）

用例示例：

内容完全呈现的元素（如间隔图像，装饰图形或清除元素）;

具有img角色的容器中的图像，以及全文替代品可用的图像，并标有aria-labelledby和（如果需要）aria-describedby;

...

鉴于：

aria-hidden（state）

表示该元素及其所有后代不可见   或由作者实现的任何用户可感知。

我理解＆＃39; role = presentation＆＃39;实际上是在谈论元素的语义含义，但似乎左箭头直接类似于间隔图像，装饰图形或清除元素，并且肯定是对任何用户都是可见的或可感知的。

这里的设计模式是什么？是什么意思？aria-hidden＆＃39;改变以允许这种特定的限制＆＃39; role = presentation＆＃39;？

Answer 1

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

例如，role =＆＃34; button＆＃34;在div上将允许div被宣布为按钮，但不会改变div的文本（例如＆＃34; Submit＆＃34;）仍将作为可访问名称公布的事实。

在ARIA 1.1中，演示角色被赋予了＆＃34; none＆＃34;更好地表示其语义http://www.w3.org/TR/wai-aria-1.1/#none

属性aria-hidden用于隐藏元素本身和元素的内容（可访问名称），使其在文档中可见。这种语义一直都是这种情况。它没有改变。

Answer 2

unobf是正确的，但有时如果你想到屏幕阅读器用户会遇到什么，它会有所帮助。考虑这个简单的例子：

<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光标，两者都可以让您专注于role ='presentation'项目，并且不会说明角色，但会说'beta'。（我喜欢unobf在1.1规范中指出的新角色='无'。当屏幕阅读器设置为'无'时，屏幕阅读器不应该说明任何角色更清楚。正如规范所说，这有点令人困惑使用'presentation'。）因此，屏幕阅读器并不真正隐藏演示项目。你只是告诉屏幕阅读器它没有角色。

另一方面，Aria-hidden完全将它从屏幕阅读器中删除，除了我的糟糕例子（这是故意的）。如果你在JAWS中使用VoiceOver或虚拟PC光标，两者都将跳过aria-hidden按钮。屏幕阅读器用户不会知道它在那里。但是如果JAWS用户正在通过页面进行TABBING，他们将落在aria-hidden按钮上，因为它是一个制表位。但由于它是隐藏的咏叹调，JAWS对于说些什么感到有些困惑。当我尝试它（FF 38和JAWS 16）时，它说'beta'，这是前一个<div>的文本。一般来说，你不希望咏叹调隐藏一些东西，但让键盘可以访问。这只是一种奇怪的情况。

回到bootstrap的旧例子，因为他们使用了role ='presentation'并且它是<span>标签，VoiceOver和虚拟PC游标JAWS用户都能够将注意力集中在{{1}上元素，这可能不是他们想要的。由于箭头仅用于装饰，因此咏叹调隐藏它是有意义的。

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

2 个答案: