How Not to Use Links
mirror of http://tom.me.uk/scripting/links.asp
Accessible scripting index | tom.me.uk home
They put the hypertext in the markup language. They are what glue the web together. They are the A Element, or hypertext links. But - yet again - they are used wrongly. A lot.
The Problem
Put very simply, links should be used for navigating between pages and objects - not for just triggering script events. For example...
<a href="#" onclick="doSomething(); return false;">Link text</a>
...and...
<a href="javascript:doSomething();">Link text</a>
...and...
<a href="javascript:void(0);" onclick="doSomething();">Link text</a>
...are all very poor usage of the A element.
The Solution
You have two options, depending on the circumstances of the link. If it is part of an interface the user would only get to if you had scripting (such as a document.write'ed interface), use:
<span onclick="doSomething();">Link text</span>
However, if the link is just part of a normal page, then most of the time you can provide a server-side alternative to whatever the scripting does:
<a href="nonScriptingPage.cgi" onclick="doSomething(); return false;">Link text</a>
The page that link goes to can then either do whatever the scripting would have (doing the same calculations or displaying the same information), but server-side. If you really can not provide an alternative (for instance, a scripting-powered game), then that page could tell the user how to enable scripting.
If the link is for opening a pop-up window, please see the Pop-up Windows article.
Gimme Some Style
What's that I hear you say? You'd like your span to look like a link? Well we can do that too! Simply place this bit of CSS within the <head> section of your page:
<style type="text/css">
.link {
color: #00f;
text-decoration: underline;
cursor: pointer;
cursor: hand;
}
</style>
That declares the CSS class "link" (we declare cursor twice to make sure it works in older versions of IE), so to use it you simply do:
<span class="link" onclick="doSomething();">Link text</span>
Which does something along the lines of:
Link text
If you wish to make it act more like a link, so you get keyboard navigation and those little dots around it in Win95/98, then simply add a tabindex:
<span class="link" tabindex="0" onclick="doSomething();">Link text</span>
However, this is not HTML 4 or XHTML compliant - and only (to my knowledge) works in IE on Windows. There is a W3C CSS 3 proposal for a tab-index property, however sadly this is not currently supported by any browsers. So it's up to you - make a valid or more accessible (to IE users, anyway) site.
Back to Contents - Articles Copyright © Tom Gilder 2002