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 first link is active and the rest n-1 links are href="#". Based on some logic, the other links are activated individually. How do I make a screen reader understand that the link is disabled or deactivated?
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.