Jonathon Delacour the heart of things

Accessibility tip 08: Use real links

Mark Pilgrim directs our attention to “the scourge of web design.” It’s the javascript: link, “a pseudo-link that executes a piece of Javascript code when you click on it.” In weblogs, including mine until today, this is commonly used to display comments in a separate (smaller) window. Unfortunately, anyone whose browser doesn’t support JavaScript couldn’t make a comment on any of my posts.

The default templates in Movable Type and Radio UserLand don’t rely on JavaScript but my templates are derived from older versions that I’ve subsequently modified. Happily, implementing Mark’s fix took less than ten minutes.

Searching the template code for “javascript” also revealed that I was using JavaScript to create a spam-proof email link. Clicking on the word “Contact” in my navigation panel automatically opens the visitor’s email client (via a mail:to link) and creates a new message with my email address inserted in the To: field. Since spammers harvest email addresses from these mail:to links, I was using the following JavaScript to encode my email address, using character entities rather than actual text:

<script type="text/javascript">
<!--
document.write('<a href="mailto:&#106;&#111;&#110;&#97;&#116;&#104;&#111;&#110;
&#64;&#100;&#101;&#108;&#97;&#99;&#111;&#117;&#114;&#46;
&#110;&#101;&#116;" title="Send me an email message">Contact<\/a>');
// -->
</script>

But there doesn’t appear to be any reason to use a JavaScript document.write() command to accomplish this relatively simple task—or, if there is, I’m certain someone will quickly draw my attention to it. So I simply replaced the JavaScript with the encoded mail:to link:

<a href="&#109;&#097;&#105;&#108;&#116;&#111;&#058;&#106;&#111;
&#110;&#097;&#116;&#104;&#111;&#110;&#064;&#100;&#101;&#108;
&#097;&#099;&#111;&#117;&#114;&#046;&#110;&#101;&#116;"
title="Send me an email message">Contact</a>

This also fixed a problem with Mozilla 1.0, caused by the escaped forward slash (<\/a>) in the link.

And no, in case you’re worrying, you don’t have to encode your email address manually. The fantomas mailShield™ will do it for you.

Permalink