How to disable a link in an accessible manner

Examples

Styling is beyond scope, and up to the designer, so lets just consider the basic link:

<a role="link" aria-disabled="true">Disabled link (removed from keychain)</a>
<a role="link" aria-disabled="true" tabindex="0">Disabled link (remains in keychain)</a>
<a role="link" href="#h1" tabindex="0">"Back to top" - An example of a reactivated disabled link</a>

How to achieve

• Remove the href and its value completely, to prevent activation and remove from the keychain.
• If it is a requirement for the link to remain in the keychain, add tabindex="0"
• Add role="link" so it's still considered a link in the Accessibility Object Model.
• Add the aria-disabled attribute to inform assistive tech that the link is disabled.

And to re-enable:

• Remove the aria-disabled attribute.
• Add the href attribute, with a valid destination.

Please also consider:

• Consider adding an accessible tooltip, or title, to inform why the link is disabled.
• If the link does something, rather than goes someplace, use a button.
• If this is a disclosure, use details and summary elements instead.

In-page anchor targets

If the anchor target is not natively focusable, then it requires both a valid id and a tabindex="-1", otherwise keyboard focus remains on the activating link.

Also, consider adding :target {scroll-padding-block-start: 2rem;} to the targets CSS to keep it away from the viewport top.

What about disabling buttons?

The TLDR is just don't. It's bad for accessibility. See the references in the footer.

What to do instead

1. Write clear label and hint text so users understand the question
2. Start with one thing per page to reduce cognitive load
3. Enable the button so users always get feedback
4. Forgive trivial mistakes to avoid unnecessary errors
5. Give clear error messages to help users fix the issue

Adam Silver: The problem with disabled buttons and what to do instead