Is it possible to disable aria only for the focused element? Does this also apply to child elements?

Question

I created a page using Bootstrap with a standard layout of the following and previous page links. On the first page, I will 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 appears that screen readers (JAWS, NVDA and VoiceOver) do not see the aria-disabled="true" flag, although the W3C WAI-ARIA spec :

The disabled state is applied to the current element and to all focused elements of the child of the element on which the aria-disabled attribute is.

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 hoped with a screen reader that describes the link as "disconnected."

Am I misunderstanding the WAI-ARIA specification, or is it a “function” of a screen reader implementation? In his commentary on the section “How to tell the reader about screens that the link is disabled” , Brian Garaventa mentions

... using aria-disabled works best for items that have a specific role, such as the role = button.

Can aria-disabled only apply to custom items?

Answer 1

With JAWS 16, IE and Chrome have a problem that you describe, but FF 38 is working correctly (not sure about previous versions of FF). When I go to the link where <li> has aria-disabled="true" and there is no aria-disabled = "true" on <a> , FF 38 and JAWS 16 say "previous page inaccessible link".

Actually, this does not stop me from activating this link because it is not something that is disabled for the aria, but JAWS seems to know that the child is disabled because the parent is disabled.

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

This may be the case when you need to decide whether to store the correctly formatted html and let the user agent fix the error, or if you try to create code around the problem, which in your case puts the aria-disabled on the link itself.