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.
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.
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.
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