Skip to main content

30 steps to a more accessible website

Step 13: Using real links

The scourge of web design is the "javascript:" link, a pseudo-link that executes a piece of Javascript code when you click on it. The most common place this problem occurs in websites is in links to display popup windows, typically for comments, warnings, supplemental information or (sometimes) login forms. Why is it a problem? Because 13% of internet users don't use Javascript for one reason or another, including many disabled users whose browsers simply don't support it. These javascript pseudo-links won't work for them; use real links instead.

Although it's easy to describe and simple to fix, we can't stress enough how important this tip is. Some problems, like not having a "skip link" past your navigation bar, reduce usability to varying degrees, but at least your page can be read eventually. On the other hand, this problem actually makes entire chunks of important content completely inaccessible. If parts of your website are hidden behind a "javascript:" link, they may as well not exist.

Who benefits?

  1. Marcus benefits. Lynx does not support Javascript.
  2. Michael benefits. Links does not support Javascript.
  3. Lillian benefits. Although she uses Internet Explorer, her IT department has implemented a corporate-wide policy to disable Javascript on all but a small list of approved sites. Your web site is not on the list.
  4. Google benefits. Google wants to follow links to find and index more content, but it can't follow "javascript:" links, because it doesn't execute Javascript code as it indexes the web.

How to do it

In Javascript-enabled browsers, the best solution is to add an <a href> to the code where you have code associated with an "onclick" event. This should work in the same way as the original did, because the onclick attribute takes precedence over the href attribute. However, non-Javascript-enabled browsers (and Google) will ignore the onclick attribute entirely and follow the link specified in the href instead.

If you're using javascript pseudo-links for any other reason, stop. Just stop. Do not pass go, do not collect £200, etc. Apply the above technique to your own code so that non-Javascript-enabled browsers always have a chance to follow a real link.

Further reading

Postscript

Exactly the same argument applies to dynamic Javascript-based menu systems. They are essentially inaccessible to a significant proportion of site visitors. Use real links.

« Step 12: Using color safely | Contents | Step 14: Adding titles to links »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1