UPDATE: A more recent version of this article was posted on CSS-Tricks: How to Disable Links.
The topic of disabling links popped up at work again this week. Somehow, a disabled anchor style was added to our typography styles last year when I wasn't looking.
The problem is that there is no real way to disable links. Why would you even want to do it, links and navigation are the basis of the web?
At a certain point, it looked like people were not going to accept this fact and 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/ code to support such an unconventional interaction, but I feared that by showing that it could be done they would ignore all my warnings and just use my example as proof that it was ok. Instead, I pushed back a little more. I got the sound of crickets as response, so not sure where this is going to land.
JUST DON'T DO IT!
A disabled link is not a link, its just text. You need to really need to rethink your design if it calls for disabling a link.
Yes, I know Bootstrap has examples of applying the
.disabled class to anchor tags, and I hate
them for it. At the very least they mention that the class only provides a disabled style, but this is just
misleading. You need to do way more than just make a link look disabled.
How to disable a link
If you have decided that you are going to ignore my warning and proceed with disabling a link, then
href attribute is the best way I know how.
Straight from the official spec:
An easier to understand definition from MDN:
Styling this via CSS is also pretty straightforward:
That's all you need to do!
That's not enough, I want something more complex so that I can look smarter!
If you just absolutely have to over-engineer some extreme solution, here are some things to consider. Hopefully you will take heed and recognize that what I am about to show you is not worth the effort.
First things first, like Bootstrap, we need to style our link so that it looks disabled.
First pass at our disabled link class. Setting
currentColor should reset
the font-color back to your normal, non-link text font-color. I am also setting the mouse cursor to
not-allowed to display a nice indicator on hover that the normal action is not allowed.
Already, we have left out non-mouse users that can't hover, mainly touch and keyboard, so they won't get
this indication. Next the opacity is cut to half. Next the opacity is cut to half. According to WCAG, disabled elements
do not need to meet color contrast guidelines. I think this is very risky since it's basically text at this
point, another reason I hate this. Lastly, the text decoration underline is removed as this is usually the
best indicator something is a link. Now this looks like a disabled link!
But it's not really disabled! A user can still click/ tap on this link. I hear you screaming about
pointer-events. After all, isn't that what Bootstrap does?
Ok, we are done! Disabled link accomplished! Except, it's only really disabled for mouse users clicking,
and touch users tapping. What about browsers that don't support
pointer-events? According to caniuse this is not supported for Opera Mini and
IE<11. IE11 and Edge actually don't support
inline-block. Also, setting
none overwrites our nice
not-allowed cursor, so now mouse users will not get that
additional visual indication that this link is disabled. This is already starting to fall apart. Now we have
to change our markup and CSS...
Wrapping the link in a
span and adding the
isDisabled class gives us half of our
disabled visual style. A nice side-affect here is that the disabled class is now generic and can be used on
other elements, like buttons and form elements. The actual anchor tag now has the
text-decoration set to
What about keyboard users? Keyboard users will use the
ENTER key to activate links.
pointer-events are only for pointers, there is no
keyboard-events. We also need to
prevent activation for older browsers that don't support
pointer-events. Now have to introduce
Ok, now our link looks disabled and does not respond to activation via clicks, taps, and
key. But we are still not done! Screen reader users have no way of knowing that this link is disabled. We
need to describe this link as being disabled. The
disabled attribute does not work on links,
but we can use
Now I am going to take this opportunity to style the link based on the
attribute. I like using ARIA attributes as hooks for CSS because having improperly styled elements is an
indicator that accessibility is missing.
Ok, now our links look disabled, act disabled, and are described as disabled. Unfortunately, even though
the link is described as disabled, some screen readers (JAWS) will still announce this as clickable. It does
that for any element that has a click listeners. This is because of developer tendency to make
non-interactive elements like
span as pseudo-interactive elements with a
simple listener. Nothing we can do about that here. Everything we have done to remove any indication that
this is a link is foiled by the assistive technology we were trying to fool, ironically because we have
tried to fool it before.
But what if we moved the listener to the body?
Are we done? Well, not really. At some point we will need to enable these links so we need to add additional code that will toggle this state/ behavior.
Seriously folks, just DON'T do it!