E-mail Obfuscation

E-mail Obfuscation

How to use:

@kvcc.edu links

@mail.kvcc.edu links

Click the above code to copy it.

Robot Unreadable Links





More Realistic Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices eros in cursus turpis. Quis blandit turpis cursus in hac habitasse platea. Id volutpat lacus laoreet non curabitur. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Lectus proin nibh nisl condimentum id venenatis. Sapien et ligula ullamcorper malesuada. Aenean sed adipiscing diam donec adipiscing tristique risus. Nulla malesuada pellentesque elit eget. Risus pretium quam vulputate dignissim suspendisse in est . Ac tortor dignissim convallis aenean et tortor. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Libero nunc consequat interdum varius sit amet mattis vulputate enim.


Implementation

Robots constantly crawl our site. They look at the actual code outputted to the page client-side, typically without ever actually rendering the content. Which means that if an e-mail address is in an "a" tag with just a "mailto:" in front of it, or any other text that is typically one continuous word that looks like "anything@anything.anything" it is easily harvestable by bad robots.

To combat this, we need to never have rendered the e-mail address in actual code, while still allowing it to function as an e-mail address link. Which has been devised above.

Accessibility

According to this w3c article the elements represented as emails hidden to robots above should be compliant for accessibility practices, as they have:

  • The ARIA specification of "role=link".
  • A JavaScript listener to handle the "onclick" event.
  • A JavaScript listener to handle the "keypress"/"onkeydown" event.
  • The element has a tabindex of 0.
  • The element has an "aria-label", which we've substituted for a "title" attribute.
    They are functionally similar, but aria-label can produce redundancies or completely replace the content. So it's unfortunately more harmful than helpful in this fringe case.