html - Hide Email Address from Bots - Keep mailto:

Question

tl;dr

Hide email address from bots without using scripts and maintain mailto: functionality. Method must also support screen-readers.

---

Summary

• Email obfuscation without using scripts or contact forms

• Email address needs to be completely visible to human viewers and maintain mailto: functionality

• Email Address must not be in image form.

• Email address must be "completely" hidden from spam-crawlers and spam-bots and any other harvester type

---

Desired Effect:

• No scripts, please. There are no scripts used in the project and I'd like to keep it that way.

• Email address is either displayed on the page or can be easily displayed after some sort of user interaction, like opening a modal.

• The user can click on on the email address which in turn would trigger the mailto: functionality.

• Clicking the email will open the user's email application.

  In other words, mailto: functionality must work.

• The email address in not visible or not identified as an email address to bots (This includes the page source)

• I don't have an inbox that's full of spam

---

What does NOT Work

• Adding a contact form - or anything similar - instead of the email address

  I hate contact forms. I rarely fill up a contact form. If there's no email address, I look for a phone number, and if that's not there, I start looking for an alternative service. I would only fill up a contact form if I absolutely have to.

• Replacing the address with an image of the address

  This creates a HUGE disadvantage to someone using a screenreader (please remember the visually impaired in your future projects)

  It also removes the mailto: functionality unless you make the image clickable and then add the mailto: functionality as the href for the link, but that defeats the purpose and now the email is visible to bots.

---

What might work:

• Clever usage of pseudo-elements in CSS

• Solutions that make use of base64 encoding

• Breaking up the email address and spreading the parts across the document then putting them back together in a modal when the user clicks a button (This will probably involve multiple CSS classes and the usage of anchor tags)

• Alterting html attributes via CSS

  @MortezaAsadi gracefully brought up the possibility in the comments below. This is the link to the full - The article is from 2012:

  What if We Could Use CSS to Alter HTML Attributes?

• Other creative solutions that are beyond my scope of knowledge.

---

Similar Questions / Fixes

• JavaScript: Protect your email address by Joe Maller

(This a great fix suggested by Joe Maller, it works well but it's script based. Here's what it looks like;

<SCRIPT TYPE="text/javascript">

  emailE = 'emailserver.com'

  emailE = ('yourname' + '@' + emailE)

  document.write('<A href="mailto:' + emailE + '">' + emailE + '</a>')

</script>



<NOSCRIPT>

  Email address protected by JavaScript

</NOSCRIPT>

Answer 1

The issue with your request is specifically the "Supporting screen-readers", as by definition screen readers are a "bot" of some sort. If a screen-reader needs to be able to interpret the email address, then a page-crawler would be able to interpret it as well.

Also, the point of the mailto attribute is to be the standard of how to do email addresses on the web. Asking if there is a second way to do that is sort of asking if there is a second standard.

Doing it through scripts will still have the same issue as once the page is loaded, the script would have been run and the email address rendered in the DOM (unless you populate the email address on click or something). Either way, screen readers will still have issues with this since it's not already loaded.

Honestly, just get an email service with a half decent spam filter and specify a default subject line that is easy for you to sort in your inbox.

<a href="mailto:no-one@no-where.com?subject=Something to filter on">Email me</a>

What you're asking for is if the standard has two ways to do something, one for bots and the other for non-bots. The answer is it doesn't, and you have to just fight the bots as best you can.