aria-disabled 只能应用于可聚焦元素吗?它不也适用于子元素吗?

Can aria-disabled only be applied to a focusable element? Doesn't it also apply to child elements?

我使用 Bootstrap 创建了一个页面,其下一页和上一页的标准布局 links。在第一页,我禁用 'previous page' link 如下:

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

屏幕 reader(JAWS、NVDA 和 VoiceOver)似乎没有看到 aria-disabled="true" 标志,即使 W3C WAI-ARIA spec 声明:

The state of being disabled applies to the current element and all focusable descendant elements of the element on which the aria-disabled attribute is applied.

如果我将 aria-disabled="true" 添加到 link:

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

然后它按我希望的那样工作,屏幕 reader 将 link 描述为 'disabled'。

我是否误解了 WAI-ARIA 规范,或者这是 'feature' 屏幕 reader 实现?在 his comment on 'How do i tell a screen reader that a link is disabled', Bryan Garaventa 中提到:

... the use of aria-disabled works best for elements that have a defined role, such as role=button.

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

对于 JAWS 16,IE 和 Chrome 都存在您描述的问题,但 FF 38 可以正常工作(不确定以前版本的 FF)。当我切换到 link 时 <li>aria-disabled="true"not 上有 aria-disabled="true" <a>、FF 38 和 JAWS 16 表示 "previous page unavailable link"。

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

它也适用于 iOS 8.3 ipad2 上的 VoiceOver。旁白说 "previous page dimmed link"

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

根据 WCAG,'li' 不允许禁用 aria-disabled 元素。直接将其应用于 'a' 标签。