The topic of disabling links popped up at my work the other day. Somehow, a “disabled” anchor style was added to our typography styles last year when I wasn’t looking. There is a problem though: there is no real way to disable an
<a> link (with a valid
href attribute) in HTML. Not to mention, why would you even want to? Links are the basis of the web.
At a certain point, it looked like my co-workers were not going to accept this fact, so I started thinking of how this could be accomplished. Knowing that it would take a lot, I wanted to prove that it was not worth the effort and code to support such an unconventional interaction, but I feared that by showing it could be done they would ignore all my warnings and just use my example as proof that it was OK. This hasn’t quite shaken out for me yet, but I figured we could go through my research.
First, things first:
Just don’t do it.
A disabled link is not a link, it’s just text. You need to rethink your design if it calls for disabling a link.
Surefire way: remove the href
If you have decided that you are going to ignore my warning and proceed with disabling a link, then removing the
href attribute is the best way I know how.
Straight from the official Hyperlink spec:
href attribute on
area elements is not required; when those elements do not have
href attributes they do not create hyperlinks.
An easier to understand definition from MDN:
This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere.