How to tell the screen reader that the link is disabled

Question

I have a page with n . Sections are hidden and can only be displayed by clicking on the corresponding links.

Only the 1st link is active on page loading, and the remaining n-1 links are href="#" . Based on some logic, other links are activated individually. Now my question is: how to make the screen reader understand that the link is disabled or deactivate ?

Answer 1

Assuming you want the readers on the screen to know that they are, just disabled, I would use a button or link, for example:

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

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

After inclusion, you should also consider some attributes so that people know how this works:

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

When choosing:

 <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 may not want to use this structure, but just read the notes for accordions to better understand it.

Answer 2

As with FYI, using aria-disabled works best for items with a specific role, such as role=button .

Thus, if you use the A tag with the href attribute, you can use role=button and aria-disabled=true and it will be declared correctly. I recommend using tabindex="-1" to remove it from the sequence of tabs, and also follow the standard behavior of the disabled active element.

EG

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

In addition, when using aria-pressed you must also enable role=button , otherwise it will not work correctly, since this defines the ARIA Toggle control.