Different Options for Empty Web Links

While working on yesterday’s post I noticed, apparently after far too long, that the Intro link on my site’s main page failed to run the animation when clicked. More accurately, it would run a frame or two of it and then stop. I dug around in the debugger, looked at various browser log (which led me to fixes for a couple of other minor items), and generally drove myself batty until I traced the problem back to the source.

The original form of the link worked like this, in keeping with the format of the other links on the top navigation bar:

The issue involves firing the introClick() function, which makes the intro_div element visible and kicks off the animation. When the animation finishes it sets the display mode from “block” back to “none,” rendering the div invisible. The problem was that the animation would run a frame or three and then the whole thing would disappear. I couldn’t step through it or find anything in the log. This was all the more frustrating because it doesn’t happen when running the page from local disk, it only happens when running from a server. In any case I kept digging until I realized that the animation was being cut off because the entire page was getting reloaded. I then looked around to see what might be causing that issue. That’s when I spotted the likely culprit.

I can’t remember the exact chain of ideas that came to mind but I know from developing the main static pages of my site that clicking on empty links causes the page to reload. For simple pages this isn’t a big deal and it’s not an issue because the links were all eventually populated. If you look at the bottom item in the above HTML, though, what do you see? That’s right, an empty link. Clicking on the “Intro” item at the right end of the menu on the main page kicked off a page reload request. It might be delayed long enough to all the animation to run a handful of frames but ultimately the reload was going to squash everything.

I then looked for alternative solutions. Making the text a span resulted in something that couldn’t be clicked on and needed extra CSS to make the formatting consistent. I used a pure anchor element with custom CSS and without an href property, which worked but the behavior of the mouse cursor was inconsistent (a text selector vs. the standard selection pointer). I thought about using a button but making the format consistent would have been painful. I did some light reading about the pros and cons of different approaches and found none of them to be ideal, but the least bad option is shown below.

This solution leverages the simplicity and consistency of the anchor and link approach while allowing keyboard activation support and not throwing too big a monkey wrench into accessibility support. The approach work in the way akin to how astronomers describe comets, or at least their tails: “A comet is the closest thing you can have to nothing and still be something.” Using the javascript:void(0); statement for the link gives you all the benefits of a link while suppressing all of the undesirable features of an empty link or a linkless anchor. It is a something that is very close to being nothing, and that works for me.

I’ve seen this in use over time one sites where links should work but don’t. I’m guessing that in many cases the site’s maintainers were actively working on something in the background. It’s also possible for the value to be generated as a default placeholder if some kind of automated content is not being generated correctly. I will have a much better understanding of this going forward.