The Accessibility Demand for Audio CAPTCHA

August 2013. by Matej Saric

Image-based Captcha challenges are a staple of web anti-spam protection, and for a reason. When implemented properly, they are a minor speed-bump for human users, but keep various bots and automated scripts dumbfounded. If spammer mischief mandates such a "human interaction proof" in the first place, what could be easier and more natural for your visitors than simply looking at a picture and reading several characters? But this ease-of-use is based on a pretty big assumption: that all visitors have flawless vision...

Important CAPTCHA Accessibility Concerns

It is a sort of a shameful public secret that there are many bad image Captcha implementations, which don't meet basic readability standards and can frustrate anybody – regardless of how healthy and sharp their eyes. But even assuming you are using decently readable Captcha protection most people solve in a few seconds, the fact remains that most people is still a far cry from every visitor you want to serve.

The Need for Accessible Web Content

The Web is important because it is an open, universal medium, that should allow everybody to easily access a wealth of information and interact with friends & family, business partners – or sometimes even their government. And as numerous usability and accessibility initiatives show, this also includes many people whose special needs should be seriously considered to make the Web experience truly open and universal.

Making the Web Friendly to Visually Impaired People

Millions of people in the world today are blind or legally blind, but can still access the Web using assistive technology such as screen readers which read web pages for them.

source: http://www.nei.nih.gov/CanWeSee/

Tens of millions affected with color blindness can still browse websites with properly designed color schemes. And hundreds of millions whose vision is "merely" poor (myself included) can use screen magnifiers or modern browser zoom features to adjust text size to what is comfortable for them.

This highly-desirable accessibility of web content is far from automatic though, and requires discipline and adherence to well-documented design guidelines. Some of those guidelines – such as W3C WCAG – are merely a helpful reference for considerate webmasters. Others are far more serious – such as the mandatory, legally enforceable Section 508 applying to US Federal agencies, or the US civil law requirements of ADA.

Accessibility Pitfalls of CAPTCHA Images

Adding image Captcha protection to your pages does wonders when it comes to preventing automated spam submissions, but it also introduces a complication into making them accessible:

The default accessibility guideline for visual content such as images is to provide a plain text equivalent which can be read by screen readers; this is achieved by adding appropriate text as the alt attribute of the <img> Html element.
However, this option is not possible for Captcha images, since inserting a plain-text representation of the Captcha code into the page would also enable bots to effortlessly bypass the Captcha challenge – defeating the reason for using Captcha protection in the first place.

Obviously, a different approach is needed to make Captcha-protected forms fully accessible. Fortunately, such an alternative is easily available...

Making CAPTCHA Accessible with an Audio CAPTCHA Alternative

The most common and accepted solution to accessibility pitfalls of Captcha images is to provide audio Captcha functionality, which allows visitors to request a pronunciation of the Captcha code. Whether users are blind, color-blind, near-sighted, or have trouble reading the Captcha code for any other reason – they can still solve the Captcha challenge by typing the spoken code.

BotDetect audio Captcha pronounces the Captcha code

To remain effective at bot detection and neutralization, the Captcha code pronunciation must still be resistant to common forms of automated analysis. For this purpose, Captcha sounds also contain audible background noises and use various sound effects to "mask" the voice pronouncing the Captcha code. Ideally, human visitors will have no trouble hearing and isolating the Captcha code, while bots won't be able to make heads or tails of the sound file contents.

Sample BotDetect Audio CAPTCHA Sound Styles

Dispatch	HiveMind	Industrial	Pulse	Radio
RedAlert	Robot	Scratched	Synth	Workshop
Collapse	Seeker

Leaving a complete explanation of all the steps necessary to implement Captcha protection completely compliant with major accessibility standards for another time (Section 508 Captcha, WCAG Captcha), we'll be satisfied with knowing that audio Captcha plays a very important role in that task...

[back to the top of the page]

Optimizing the Audio CAPTCHA User Experience

The basic idea behind audio Captcha is very simple – pronounce the code shown in the Captcha image, and visitors with sight impairments but sound of hearing will be able to solve it as easily as anybody else. Equal opportunity, universal access, an accessibility win-win! But achieving true accessibility is not as simple as letting people download a sound file and calling it a day – some thought needs to be put into designing the audio Captcha user experience just right.

Usability Check 1: Localized Audio CAPTCHA Pronunciation

The Web is a truly global medium, and the fewer location-specific assumptions a website makes, the larger the audience it can effectively reach. If you want to make your website accessible to such a global audience, you have to consider many internationalization factors – including audio Captcha localization. After all, if a blind man can't sign up for your website just because the people he lives with pronounce the alphabet differently than you do, can your website really be considered accessible?

BotDetect CAPTCHA Audio Localization

To meet this requirement, BotDetect offers a variety of multi-language pronunciations usable for audio Captcha generation. And since the quality of sounds used for audio Captcha generation is important (the letters and digits of the Captcha code have to be enunciated clearly), each localized pronunciation is recorded by a native speaking voice-over artist in a professional recording studio.

To allow maximum flexibility in choosing locale support that suits your website requirements, these sound resources have been separated from the main Captcha component into external language-dependent sound packages. They can be downloaded from the BotDetect localizations page when you need them.

Sample BotDetect Audio CAPTCHA Localizations

French	German	Portuguese	Russian	Spanish
Chinese	Hebrew	Hindi	Japanese	Korean

Usability Check 2: Broadly Compatible Audio CAPTCHA Playback

Generating perfectly enunciated, localized Captcha sounds is a great first step – but won't help a visitor much if his device and browser of choice have trouble playing them. And despite the dizzying technological ride the Web has been ascending, such a simple operation as playing audio on a webpage can still get... tricky.

Designing the Audio CAPTCHA User Experience

Considering the workflow of user interaction with audio Captcha, what we'd like to do is keep the visitor on the Captcha-protected form and play the Captcha sound in the background, so she can also type the Captcha code as she hears it. When the user requests an audio Captcha (whether she does it through a mouse click, keyboard press, touchscreen tap, or a voice command), ideally she'd get the sound response and immediately be able to type it.

Unfortunately, not all browsers and devices support this idealized experience – and even if they do, they don't all support it using the same approach. So implementing this ideal workflow is not enough: we also have to make it degrade gracefully and intelligently adjust audio Captcha behavior to varying device capabilities.

BotDetect Audio CAPTCHA Browser Support

If you have any experience with making web pages cross-device and cross-browser compatible, you know that it can become quite an involved process... Fortunately, BotDetect developers take care of this for you, and our QA engineers have been testing audio Captcha functionality in major IE, Firefox, Chrome, Safari, and Opera versions released since 2001, as well as popular Android and iOS devices.

Usability Check 3: Re-playable CAPTCHA Sound

So we've made sure that the sound files themselves are easily understandable and adjusted to the visitor, and we used every last ounce of technical wizardry to make sure they play properly. But we're still not done with optimizing the audio Captcha user experience.

It is easily possible that a visitor listening to the audio Captcha sound file won't manage to retype the whole code after only hearing it once. If this seems obvious, consider that each generated Captcha image will always contain a different random Captcha code for security purposes. Then again, when an image is loaded in the browser, the user has plenty of time to re-examine it several times if needed, while sound playback is only transient by nature.

Since only allowing a single comprehension opportunity could hardly be considered accessible, BotDetect allows visitors to use the sound button as many times as they need and get a pronunciation of the same Captcha code – if their browser supports it. To meet Captcha security requirements, browsers that can't replay the exact same audio (older browsers that don't support Html5 Wav audio) will have to request a new Captcha code before playing the new audio. But proper audio Captcha security is a full-fledged topic of its own...

[back to the top of the page]

Conclusions & Further Reading

A well-implemented audio Captcha allows you to keep your web forms protected from automated spam submissions, without making them inaccessible to visually impaired visitors. Localized Captcha sound pronunciation allows you to go that extra mile into accommodating your audience, as does making sure audio Captcha sound playback is compatible with a broad range of browsers and devices.

If you want to check how does BotDetect live up to these claims, demo Captcha audio here and test it yourself: choose a localized Captcha pronunciation from the Locale drop-down, change the Sound Style, try it on different devices...