November 21, 2008

Pages


Search Site


Topics



Archives

Tweets

2 Easy Ways To Make CAPTCHA Easier For Your Users

October 31 2007 by Adam
It occurred to me the other day, while filling out a CAPTCHA to leave a comment on a friends blog, that there is further room for improvement in most implementations, putting aside for the moment the fact that there are better alternatives. But if you have ever used a CAPTCHA before, chances are you've asked yourself this question: Is it case-sensitive? And is it? Who knows?!

The solution!

Hardly anyone goes out of their way to indicate whether the CAPTCHA response is case sensitive, and, even worse, some even use fonts where the lower-case-L and upper-case-i — and this isn't the only set of easily confused letters — look essentially the same. As long as they're not getting spammed, that's good enough for them. Sadly, the solution is so easy that the careless among us are only hurting themselves. A simple CSS addition can make a world of difference.

Step 1:

Only use capital letters. This alone won't solve your problems, but capital letters are much more easily distinguished from one another in most fonts. Even if you don't have a nice pretty configuration screen for your CAPTCHA asking for a set of characters to choose from, I guarantee you it's in the code and would be a piece of cake to change. For example: [viewcode] src="captcha.cfm.txt" showsyntax=no geshi=cfm[/viewcode]

Step 2:

Add a text-transform property to your CSS for the CAPTCHA response input field. Specifically, text-transform: uppercase;. This takes away almost any doubt a person might have over case sensitivity. Try it yourself; type some text in this box and see how much better life with CAPTCHA can be:

Extra credit:

Add a small line of text next to your CAPTCHA explaining that case doesn't matter. If you have the ability, choose a font with unambiguous characters.

Posted in HTML/CSS | Misc |