咏叹调禁用只能应用于可聚焦元素吗?它不适用于子元素吗?

oed*_*rds 6 html5 accessibility screen-readers wai-aria twitter-bootstrap

我使用Bootstrap创建了一个页面,其中包含下一页和上一页链接的标准布局.在第一页上,我禁用了"上一页"链接,如下所示:

<div role="navigation">
  <ul class="pager">
    <li class="previous disabled" aria-disabled="true">
      <a href="#">Previous page</a>
    </li>
    <li class="next">
      <a href="search.php?page=2">Next page</a>
    </li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

屏幕阅读器(JAWS,NVDA和VoiceOver)似乎没有看到aria-disabled="true"旗帜,即使W3C WAI-ARIA规范指出:

被禁用的状态适用于当前元素和应用了aria-disabled属性的元素的所有可聚焦后代元素.

如果我添加aria-disabled="true"到链接:

    ...
    <li class="previous disabled" aria-disabled="true">
      <a href="#" aria-disabled="true">Previous page</a>
    </li>
    ...
Run Code Online (Sandbox Code Playgroud)

然后它按照我的希望工作,屏幕阅读器将链接描述为"禁用".

我是否误解了WAI-ARIA规范,或者这是屏幕阅读器实现的"特征"?在他的评论"我如何知道的屏幕阅读器的链接已禁用",布莱恩Garaventa公司提到:

...使用aria-disabled最适合具有已定义角色的元素,例如role = button.

可以aria-disabled 适用于可聚焦的元素呢?

slu*_*ous 1

使用 JAWS 16,IE 和 Chrome 都有您描述的问题,但 FF 38 可以正常工作(不确定以前版本的 FF)。<li>当我切换到有aria-disabled="true"但没有aria -disabled="true" 的链接时<a>,FF 38 和 JAWS 16 表示“上一页不可用链接”。

它实际上并没有阻止我激活该链接,因为这不是 aria-disabled 的用途,但 JAWS 似乎知道子元素被禁用,因为父元素被禁用。

它也适用于 ipad2 上 iOS 8.3 的 VoiceOver。VO 说“上一页链接变暗

在这种情况下,您可能必须决定是否保留格式正确的 html 并让用户代理修复错误,或者您是否应该尝试围绕问题进行编码,在您的情况下,将 aria-disabled 放在链接上本身。