问题
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 ?
回答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.
回答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.
来源：https://stackoverflow.com/questions/19856393/how-do-i-tell-a-screen-reader-that-a-link-is-disabled