It achieves this by encoding and obfuscating the email address in the page source, and only decoding it in response to an action by the user:
- User mouses over the obfustated email address (can change to require an explicit click).
- User navigates with keyboard to obfuscated email address and presses enter.
The user experience supports mouse, touch, keyboard control and is speech reader compliant (tested with NVDA). Also works on iOS (iPhone and iPad) and Android browsers. (If you find any issues, especially with an assistive technology, please let me know... ideally with a pull request to fix it!).
Requires developer to manually encode email addresses using ROT13 before inclusion in the markup.
The goal is to make the addresses clickable, and not require a user to convert from an image or remove words/change the address in any way.
How to use
Simply copy the script from the
<head> of the sample document into your page where you want email addresses to be protected.
It must preceed the display of any email addresses (so place it either in the
<head> of your page, or before the first reference.
To encode an email address
- visit ROT13 or similar and encode the address.
- (optionally) replace the @ with a * to further obfuscate the email address.
To display an email address
Insert a small snippet as follows into the source of the web page:
The parameters are as follow:
- Obfuscated Email Address: ROT13 encoded email address
- (optionally) the @ may be replaced with a * (the rot13 function looks for that)
- (optionally) when creating the parameter you may further obfuscate it, eg
- Require User Action:
- true: will require user action to reveal email address (recommended, default if not supplied)
- false: will show the email address without requiring interaction
- Message: Text to over-ride the default text hiding an email address. This can either be just text, or HTML (eg includes styling or images). Remember, if using HTML to ensure it is A11y friendly and suitable for cross-platform display.
- name of the class that should be applied to the email address when visible
- if require user action is true, this will be the fourth parameter (if you don't want to override the Message simply leave the third parameter as an empty string
""). If require user action is false, this will be the third parameter
In order to reduce the ease with which spambots can get around this (helping preserve the value for everyone!), please rename the functions
jsNSemail in your deployment,
and/or consider using a JS minification/uglification service to further obscure things.
By requiring the user to interact to expose the email address, you reduce the risk of a DOM crawler finding the mail as it would need to trigger the action.
Also, you don't have to use plain ROT13 as the only encoding scheme. There are simple variations which rotate forward/backward a different number of letters
or you can use a different cipher scheme altogether.
If you do make use of this it would be great it you could comment here just so I can get an idea of how useful people find this.
If you make use of this and like it and want to give something back... I wrote a book! :)
This project can be forked from Github. Please issue pull requests from feature branches.
See Licence file in repo, or refer to http://unlicense.org