How do i tell a screen reader that a link is disabled

Question

I have a page with n sections. The sections are hidden and can only be shown by clicking their respective links.

On page load only the 1st link is active and the rest n-1 links are href="#". Based on some logic the other links are activated individually. Now my question is, how do I make a screen reader understand that the link is disabled or deactivate ?

Answer 1

Assuming you would want screen readers to know that they are there, just disabled, I would use a button or link like so:

<button disabled>Section name</button>

<a href="#" role="button" aria-disabled="true">Section name</a>

That would be good for a set of show/hide areas that are controlled by some external logic.

Once enabled, you should also consider some attributes to let people know how it works:

<a href="#" role="button" aria-pressed="false">Section name</a>
<div aria-expanded="false">Content to show</div>

When selected:

<a href="#" role="button" aria-pressed="true">Section name</a>
<div aria-expanded="true">Content to show</div>

On the other hand, if it is an accordion (one at a time) then I would use the accordion here: http://whatsock.com/tsg/

You might not want to take on that framework, but just read the notes for accordions to understand it better.

Answer 2

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

So, if using an A tag with an href attribute, you can use role=button and aria-disabled=true and it will be announced correctly. I recommend using tabindex="-1" to remove it from the tab order as well to follow the standard behavior of a disabled active element.

E.G

<a href="#" tabindex="-1" role="button" aria-disabled="true"> Label </a>

Also, when using aria-pressed, you must also include role=button, otherwise it will not work correctly since this defines an ARIA Toggle control.