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

Question

I've created a page using Bootstrap with a standard layout of next and previous page links. On the first page, I disable the 'previous page' link as follows:

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

It seems like screen readers (JAWS, NVDA and VoiceOver) aren't seeing the aria-disabled="true" flag, even though the W3C WAI-ARIA spec states:

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.

If I add aria-disabled="true" to the link:

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

then it works as I'd hoped, with the screen reader describing the link as 'disabled'.

Am I misunderstanding the WAI-ARIA spec, or is this a 'feature' of screen reader implementation? In his comment on 'How do i tell a screen reader that a link is disabled', Bryan Garaventa mentions:

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

Can aria-disabled only be applied to focusable elements?

Ats

Seems like you have uncovered bugs in the implementations, please report this bug with the browser vendors – Begum

Answer 1

With JAWS 16, both IE and Chrome have the problem you describe, but FF 38 works correctly (not sure about previous versions of FF). When I tab to the link where the <li> has aria-disabled="true" and there's not an aria-disabled="true" on the <a>, FF 38 and JAWS 16 says "previous page unavailable link".

It doesn't actually prevent me from activating that link, because that's not what aria-disabled is for, but JAWS seems to know the child element is disabled because the parent is disabled.

It also works in VoiceOver on iOS 8.3 on an ipad2. VO says "previous page dimmed link"

This might be a case where you have to decide whether to keep the properly formatted html and let the user agent fix the bug, or if you should try to code around the problem, which in your case was putting the aria-disabled on the link itself.

Screeching

Answer 2

As per WCAG, aria-disabled is not allowed on 'li' element. Apply it on 'a' tag directly.

Noyes

Please cite your reference. WCAG has no such specification. WCAG is technology agnostic and doesn't dictate how to implement anything. If you look at the HTML spec for <li>, w3.org/TR/html53/grouping-content.html#the-li-element, you'll see that all global ARIA attributes are allowed on an <li>, and aria-disabled is a global attribute, w3.org/TR/html53/dom.html#global-aria--attributes. – Screeching