aria-disabled 只能应用于可聚焦元素吗？它是否也适用于子元素？

Question

我使用 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>

屏幕阅读器（JAWS、NVDA 和 VoiceOver）似乎没有看到 aria-disabled="true" 标志，尽管 W3C WAI-ARIA spec 声明：

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

如果我在链接中添加aria-disabled="true"：

    ...
    <li class="previous disabled" aria-disabled="true">
      <a href="#" aria-disabled="true">Previous page</a>
    </li>
    ...

然后它按我希望的那样工作，屏幕阅读器将链接描述为“已禁用”。

我是否误解了 WAI-ARIA 规范，或者这是屏幕阅读器实现的“功能”？在his comment on 'How do i tell a screen reader that a link is disabled'、Bryan Garaventa 中提到：

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

aria-disabled只能应用于可聚焦元素吗？

Answer 1

对于 JAWS 16，IE 和 Chrome 都存在您描述的问题，但 FF 38 可以正常工作（不确定以前版本的 FF）。当我点击<li> 具有aria-disabled="true" 并且<a> 上没有 aria-disabled="true" 的链接时，FF 38 和 JAWS 16 显示“上一页 不可用链接”。

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

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

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

Answer 2

根据 WCAG，“li”上不允许使用 aria-disabled 元素。直接将其应用于“a”标签。