It has become increasingly popular to make use of a Captcha in online web forms where registration and payment processes are required. This is what it looks like over at MSN Passport:

A Captcha is an image depicting letters and number that the user is asked to type in a text field. All characters are somewhat distorted, in poor contrast with psychedelic backgrounds and curvy lines.

Captcha separates man from machine

The purpose is to separate humans from machines. All evil, automated systems that send spam and automatically register themselves will hit a wall: They can not interpret the characters. If one does not complete the Captcha correctly that is where the communication ends.

Captchas exclude humans with disabilities

The problem is that many people also have problems completing the process. People with cognitive handicaps, sight impairments, color blindness - they are all excluded from these systems. Even I sometimes have trouble interpretating the funny-looking characters and sometimes I have to try two or three times before I succeed in moving on.

So, a Captcha tests if I am a normal-sighted human with a cognitive ability to interpret purposely distorted characters.

Paypal tries a "sound" alternative

At PayPal, MSN Passport and Hotmail the user can listen to a voice reading the characters. This sounds honorable and like a step in the right direction, but the implementation can be even more confusing, especially when opening a pop-up (as with PayPal) and the voice is distorted.

An article at CNet describes how four of their reporters, with normal hearing, could not make sense of the recording.

Stop using Captchas

It would seem that this is obviously the wrong way to go when fighting spam. As we are struggling to make information on the net available to all people, suddenly the requirement is that I have to be an alert, sighted person with a reasonable amount of internet experience to take part in the game! Near-sighted? Sorry, you go stand on the sidelines.

Alternatives to Captchas

WAI have two working groups trying out alternatives to Captchas. Also read W3C's article about the inacessibility of Captchas.

The best implementation of Captchas

W3C recommends logical puzzles as an alternative since these can be posed to all humans. For example: What is the second letter in this website's name?

The problem is that logical questions require a certain level of logical thinking and above all an understanding of why you get that type of question in the middle of a registration process.

Surely, it is kind of weird that after typing your address you also have to work out how many apples Carl has left after Lisa ate 2?

The best alternative is of course not to have any such demands on the user at all; the logic to distinguish humans from computers is not something the humans should have to be involved in!

An automated tool could evaluate:

• Content: Is the content in the form reasonable?
• Behavior: How long does it take to fill out the form, for example.

From this you could quickly make some assumptions about whether there is a human in the other end.

Protest

By implementing a Captcha you are basically saying go f*ck yourself to a great deal of people. At present my recommendation is that we stop insulting people.

Here you can sign a petition asking Google to stop using Captchas, which they do on Blogger and in other verification processes.

• Google Word Verification Accessibility Petition

(If you have the Flash 6 player and JavaScript enabled, you will see a slideshow of flowers instead of a single image above.)

This example shows how Flash content should be embedded in a web page in a way that promotes accessibility as well as searchability.

Invisible jump code

First off there is an invisible image above the Flash movie that allows users of text readers to skip straight to the content. If you have relevant text content in your "flashcontent"-div (see below) this may not be necessary.

Ordinary div

There is an ordinary div with an id of "flashcontent" containing html code for an ordinary image. The content in this div is replaced with the Flash movie if the user has the required version of Flash. If Flash is not shown, the div is rendered as part of the page.

Detection and embedding with JavaScript

In this example I am embedding content using JavaScript. If JavaScript is deactivated, or if the user does not have the required Flash player, the user is presented with a static image. The alternative content could be anything you prefer.

External XML File data

Images to be loaded are defined in an XML file. Which XML file is defined in a URL parameter when embedding the Flash move. This means that the same Flash movie can be re-used and updated without Flash coding. When possible, use external data loading with XML; this makes your solution so much more useful.

Voila!

As you can see, even search engines can read the content in the div - and people who can see the Flash movie will see it. What else could we ask? Well perhaps that Flash detection could be performed with something other than JavaScript.

But that's another story...

Now, read how you can use this method with FlashObject.

Important about accessibility

Even with this technique you should of course ensure that you have provided a name and/or description using the built-in accessibility features of Flash.

Compulsory Reading: Creating Accessible Macromedia Flash Content.

Thanks

• Thanks to Geoff Stearns of deconcept for the JavaScript, aka FlashObject.
• Thanks to Todd Dominey of What do I know for the Flash slideshow component (modified by me).

I have also written a Swedish guide to FlashObject.
There is also a Swedish version of this page.

Files

Files are referenced in the source code.

(Browser note: If you are using Firefox and can not see the Flash movie, chances are you need to disable Object-tabs in the plug-in known as Adblock.)