Recaptcha... If you can!

Spam is a tedious thing. Both for those who receive it in the inbox and for companies who deal with junk messages every day.

Most of the attempts to avoid robots submitting forms crash often with accessibility. Those attempts go under the name of Captcha or Re-captcha.

As users, we have been asked to repeat almost unrecognizable sequences of numbers or letters. We got frustrated to not be able to find all those hydrants or traffic lights, not to mention the blurry busses or foggy planes. But internet users are very resilient, users got used to the captcha process too.

But what about those who did not make it through? Who did not manage to apply for a job or submit a claim for a failed product, because of the reduced capability to read that invisible sequence of numbers. Sometimes a temporary headache is enough to not be able to read the captcha challenge.

And why have I never met any re-captcha thing to buy a product online?

Of course, the act of submitting our credit card number makes us more human than ever, we are not at the point robots are in possession of credit cards, yet. But still, there are users who did not manage to send an important form, because of the unrecognize blurry busses.

The methods Google uses now to recognize robots, which work combine with our behavior browsing the net, make things easier but we have to pay the price of giving Google again a lot of information.

Browsers should be more intelligent to sunder human behavior from robots without asking for additional private information.

Despite the convenience browsers have in collecting our data, by now, are robots more intelligent than browsers.

As developers, we can only try to deal with robots if we do not want to damage nor the user experience in our applications or the accessibility.

I recently took advantage of a technique to minimize the auto submitting a form by robots, it is called Honey-pot.

The concept is simple: robots try to fill every field of a form they encounter on their crawling. If we technically hide to humans one of the fields of a form, we suppose that field to be empty when the form submit, right?

Since the field is visible in the HTML code the robot will try to fill it anyway. So if the human hidden field is not empty on submitting, that means it was not a human submitting the form.

if(myName !== '') {return 'Hi robot!'}

The form field looks like this:

<input type="text" class="iamhere" name="myName" aria-hidden="true" />

And the "iamhere" stylesheet looks like this:

.iamhere {
position: absolute;
opacity: 0;
top: -1000px;
left: -1000px;
}

Don't forget to add an attribute aria-hidden to true, in order to avoid the screenreader mentioning the field to users with impaired vision.

Until the robots get more intelligent, the result of this solution was a good compromise.