I have come up with my own way to protect private data like email addresses, postal addresses or telephone numbers you want to or have to publish on your website. I was wondering if anybody else does it this way and what could be possible pitfalls. So please comment this post or write me if you have any remarks.

A simple solution would be hiding it via JavaScript (technically this would rather be “revealing via JS”) – but this does not work for me since I don’t want to exclude users with disabled JavaScript, for example blind people using screen reader. Plus, German law requires you to provide contact information barrier-free. The same holds for displaying the address as image.

My approach works with simple HTML+CSS only:

1. One long-known technique for “encryption” of email addresses which I included into my approach is the substitution of some characters in your HTML code by their hexadecimal counterpart, i.e. mail@example.com → mail@example.com. This will break poorly-programmed crawlers but it is a pretty old trick so I assume it is not that effective anymore.
2. Another simple method are HTML comments which won’t affect your readers but (hopefully) some crawlers: mail@example.com → ma<!-- just one comment -->il@example.com.
3. And here comes the new part: include invisible boxes containing useless text in your code: mail@example.com → mail@ex<span style="visibility:hidden;float:right;">useless</span>ample.com.
4. Please don’t forget to exclude sites with such disguised information from legitimate web crawlers via your robots.txt file – otherwise your site would look broken.

Altogether this disguises your email address as

ma&#105;&#108;&#64;<span style="visibility:hidden; float:right;"> useless </span>examp&#108;<!-- just one comment -->&#101;.com.

As you may notice this approach is not very pleasant for screen reader users either but I think if you include a personal message via

<div style="visibility:hidden; float:right; height:0px;">
Dear screen reader user. I have included some invisible boxes
in the following contact information to puzzle spam crawlers.
I apologize for your extra work but I am sure you will
be able to decode the text.
</div>

it will work for them. Displaying your address as image or disguising via JavaScript would not.