On December 3rd, Google announced its new no CAPTCHA reCAPTCHA. reCAPTCHA is a free service to guard websites from spam and abuse. It uses an advanced risk analysis engine and adaptive CAPTCHAs to keep malicious web-crawling bots locked out of protected sites while letting humans pass through without the need to type individual characters into a box.
For the blind and visually impaired, reCAPTCHA provides an audio CAPTCHA option. Legitimate users will find regular audio CAPTCHAs easy to solve while bots will be tasked with a much harder audio CAPTCHA designed to block them.
reCAPTCHA was given well deserved recognition when it won in the CAPTCHA Alternatives category of the FCC’s 4th annual Awards for Advancement in Accessibility held yesterday in Arlington, Virginia.
A lesser known offshoot of reCAPTCHA is Mailhide. It transforms your email address into an encrypted link wrapped in HTML. When people click on the link, they’re presented with a reCAPTCHA which they must solve before your email address is revealed.
Mailhide is an excellent anti-spam measure if you own a blog or post to forums and want a way to share your email address without leaving yourself open to abuse.
Unfortunately, while using Internet Explorer 11 with JAWS 13 on a Windows 7 machine, I found navigating Mailhide with a screen reader to be unintuitive in places. But with a little trial and error, I came up with simple solutions to these issues and posted them below as step-by-step instructions.
How to Reveal an Email Address
Click on the link below and a new window will open. (NB: IE users, before you click on the link, make sure the ActiveX Filtering option in the Tools menu is unchecked.)
This is the reCAPTCHA. Arrow down the page past the visual challenge until you hear the phrase, Get an audio challenge. JAWS 13 thinks it’s a graphic (your mileage may vary depending on the screen reader you’re using). It’s actually a link. Click on it.
When you do, you’ll hear five numbers spoken one at a time by five different voices. The sound quality is similar to a long distance phone call. I had no difficulty understanding the numbers, but the level is low so turn the volume up a little.
When the audio finishes, focus is on the type what you hear edit field. If you want to replay the audio challenge, arrow up once or twice to the phrase, Play sound again. JAWS does not announce this as a link, but it behaves like one nonetheless (again, ymmv).
When you’re satisfied you’ve heard the numbers correctly, type them into the edit field and tab down to the Reveal email address button and press <Enter>.
A new page will load with the focus on the copyright notice at the bottom of the screen. Move to top (<Ctrl+Home>) and read the page. There will be no sign of the decrypted email address (at least, this has been my experience). Don’t panic! ;)
Refresh the screen (<Ins+Esc>) and the following message will be revealed:
The email address that you were looking for is:
And there it is! All these precautions may seem extreme, but they help to ensure that Mailhide only reveals an email address to a human.
How to Protect an Email Address
Minimise everything on the desktop (<WinKey+M>) before launching Notepad and your web browser of choice.
Open the browser and go to the reCAPTCHA website. You’ll be prompted for your Google credentials if you’re not already signed in.
Look for the Mailhide link near the bottom of the page and click on it.
Enter an email address (eg,
email@example.com) in the form field under the Protect an Email Address heading and click on the Protect It! button.
On the next screen, the form field under the HTML Code heading will contain something like this:
<a href="http://www.google.com/recaptcha/mailhide/d?k=01PQMluf1ZR3VuOZuo7PF4ng==&c=lTrlSb_oKsrjUYd6w4kFh7SY2PsG9kRmerWj0pvgdHQ=" onclick="window.open('http://www.google.com/recaptcha/mailhide/d?k\\07501PQMluf1ZR3VuOZuo7PF4ng\\75\\75\\46c\\75lTrlSb_oKsrjUYd6w4kFh7SY2PsG9kRmerWj0pvgdHQ\\075', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">n...</a>@gmail.com
Ugh! Don’t worry. Much of this spaghetti is unnecessary, imho. We’ll reduce it to something more manageable later on. For now, enter the form field, select all (<Ctrl+A>), and copy to clipboard (<Ctrl+C>).
Switch to Notepad (<Alt+Tab>), and paste (<Ctrl+V>) the copied text into the editor.
Edit the HTML so it resembles the following:
<a target="_blank" title="Solve reCAPTCHA to Reveal Email Address" href= "http://www.google.com/recaptcha/mailhide/d?k=01PQMluf1ZR3VuOZuo7PF4ng==&c=lTrlSb_oKsrjUYd6w4kFh7SY2PsG9kRmerWj0pvgdHQ=">No One's Email Address</a>
and save the file as
My Documentsor your folder of choice.
Some notes on the HTML code:
target="_blank": Causes the link to open in a new window when clicked. Not required, but recommended.
title="message": Displays message as a tooltip. Not used by screen readers. May be omitted.
href="URL": Extremely long URL for the reCAPTCHA. Make sure it doesn’t wrap. Every URL is unique (ie, the URL in the example above will not work for your email address).
No One's Email Address: Replace this text with your name or whatever you prefer.
The next time you want to disclose your email address on a public forum, all you have to do is paste
Mailhide.html into the form and you can be confident that the only replies you’ll receive will be from real people.