Mathieu Agopian

The Problem

The four prerequisites for email obfuscation are:

1. Don't penalise the user: make the mail clickable
2. Don't penalise the user: make the mail copy/pastable
3. Don't penalise the user: the mail address must remain accessible (in text mode, without css and/or without js)
4. Hardly retrievable by spambots

The order isn't a coincidence: the aim of obfuscation is of course to prevent spambots from gathering the email address, but this shouldn't ever penalise the user.

The different mail obfuscation methods that are around on the web, sadly, fail at least on one of those four points.

The Solution

Webkit users with javascript deactivated, please check the limitations.

<a href="/contactform.html" id="emailaddress">
    first.last<img src="" alt="@" />example.com
</a>
<script> type="text/javascript">
    mail = new Array("first.last", "example.com").join("@");
    ea = document.getElementById("emailaddress");
    ea.href = "mailto:" + mail;
    ea.innerHTML = mail;
</script>

And here's the result: first.lastexample.com

The Explanation

If javascript is activated, the href attribute and the content of the link are modified, making the obfuscation invisible. Nothing new here.

If javascript is activated, using the alternative content of the missing image to replace the "@", has several interesting outcomes:

• Screen readers will read the alt attribute for the image, so the mail is easily understandable
• The alt is displayed, make the obfuscation invisible, even in text mode of without css
• The address is copy/pastable without any issue
• The mail is still clickable, even though the link is now pointing to a contact form

A huge advantage of using an html tag attribute is that it counters spambots that only gather the text, and not the html tags, in order not to fall for obfuscation based on inserting comments or invisible tags in the address.
Here, dropping the <img> means loosing the "@" capital information.

The Limitations

As of the date of this post, there's two unresolved bugs in Webkit:

• Bug 5566 - ALT attribute value not displayed when image is missing
• Bug 11200 - Image alt text not included in plain-text version when copying

The consequences are then visible on a Webkit based browser, with javascript deactived:

Moreover, the address isn't copy/pastable anymore, but the link (to the contact form) is still available.

A solution would be to use a real image representing the "@", but that could cause styling issues (color, font family, font size, anti-aliasing...):

Note

It's possible to display the alt attribute of the image under Webkit, by forcing the size of the image to be big enough:

<img src="" style="height: 60px; vertical-align: top;" alt="@" />

It's ugly, but it's still readable, and it only impacts the few percents of Webkit users that have javascript deactivated.

Conclusion

So here's a new email address obfuscation method, which should be effective (at least as much as the actual ones) against spambots, but which impacts the end user as less as possible.
And above all, the address is still accessible to screen readers!