Email Obfuscation, the Accessible Way

Below I explain an email obfuscation solution I devised that:

  • is accessible for people using screen readers;
  • degrades gracefully for browsers without JavaScript; and
  • works just like a normal, clickable email address for browsers with JavaScript enabled.

Here is what an email address looks like in the text-only web browser, Lynx:

zingming.ho AT utoronto DOT ca

The idea is to start with accessible, readable email addresses, and then use JavaScript regular expression replacement to recreate normal, clickable e-mail addresses. Since the regular expressions are processed on the client-side (web browsers with JavaScript enabled), it does not add any extra burdens to the web server.

Basically, all instances of text that match the pattern of email AT domain DOT tld are replaced with the hyperlinked, usable versions, using the magic of regular expressions.

Here the JavaScript and HTML source of the basic idea.

<html>
<head>
<script type="text/javascript">
function MagicEmailAddresses()
{
	var obj = document.getElementById('content');
	var rep = '<a href="mailto:$1@$2.$3">$1@$2.$3</a>';
	var str = obj.innerHTML.replace(/([a-zA-Z0-9._%+-]+)\sAT\s([a-zA-Z0-9.-]+)\sDOT\s([a-zA-Z]{2,4})/g, rep);
	obj.innerHTML = str;
}
</script>
</head>
<body onload="MagicEmailAddresses()">
<div id="content">
<p>zingming.ho AT utoronto DOT ca</p>
</div>
</body>
</html>

I have a working demo of it here. The email addresses must appear inside the div with the id that is the parameter in the Javascript function document.getElementById. In this example, the id is “content”.

Although email addresses of the form email AT domain DOT tld can be retrieved with a simple Google Search, simple wildcard matching picks up natural phrases as well, and proper regex matching is computationally expensive. My method, in my opinion, provides a nice balance between human accessibility and email-harvester obstruction.

User Error Handling

If you are integrating email obfuscation into a CMS, you can add also user error handling to prevent users from posting naked email addresses. For example, if the user posts “someone@somewhere.com” in plain text, they would get this client-side error message:

Error - Feeding spambots. The e-mail address someone@somewhere.com is visible to e-mail harvesters. This is bad. To fix the error, please edit the post (or page). Remove the hyperlink (if it exists) and change the e-mail address to the form: someone AT somewhere DOT com

Here is the example source code of the improved MagicEmailAddress script:

<html>
<head>
<script type="text/javascript">
function MagicEmailAddresses()
{
	var obj = document.getElementById('content');
	var fail = obj.innerHTML.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/);
	var str = '';

	if (fail)
	{
		var addr = fail[0];
		var win =  addr.replace(/([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,4})/, '$1 AT $2 DOT $3');
		str = '<div style="color:red;padding:10px;">&nbsp;<h2>Error: Feeding spambots</h2><p>The e-mail address <strong>' + addr + '</strong> is visible to e-mail harvesters. This is bad.</p><p>To fix the error, please edit the post (or page). Remove the hyperlink (if it exists) and change the e-mail address to the form: <strong>' + win + '</strong></p><p></p></div>';
	}
	else
	{
		var rep = '<a href="mailto:$1@$2.$3">$1@$2.$3</a>';
		str = obj.innerHTML.replace(/([a-zA-Z0-9._%+-]+)\sAT\s([a-zA-Z0-9.-]+)\sDOT\s([a-zA-Z]{2,4})/g, rep);
	}

	obj.innerHTML = str;
}
</script>
</head>
<body onload="MagicEmailAddresses()">
<div id="content">
<p>someone@somewhere.com</p>
</div>
</body>
</html>

Here is a working demo of the consequences of just posting “someone@somewhere.com” (the example source code above), and here is another demo where the text “E-mail” links to “mailto:someone@somewhere.com”. Both demos have the same error message, but they are handled by the same improved MagicEmailAddresses script.

In practice, this would be useful on dynamic websites. A real working demo is within the WordPress theme I developed for The Centre for Women and Trans People at U of T. If the blogger posts an email address in plain text, they will encounter the error message and will have to reconfigure the email address to make the error message go away. Previously, I found that my reminders not to post naked email addresses were not always followed, so I hope that by automating the corrective feedback, it will save me future work from manually reminding or manually correcting the posts.

Update: Judging from the statistics on the effectiveness of email obfuscation methods, my method should prevent over 99 percent of spam. My email obfuscation method is also much more simple and direct than A List Apart’s method.

About these ads
This entry was posted in Development and tagged , , , , , . Bookmark the permalink.

One Response to Email Obfuscation, the Accessible Way

  1. Pingback: WordPress Plugins: ShushThatNoise and HumansNotBots | Zing-Ming

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s