Enhance reCaptcha accessibility with disabled images

Published on November 26, 2010 by , in Javascript

I’ve encountered an accessibility problem these days… default reCaptcha isn’t properly accessible when the images are disabled.

A solution is to detect the availability of images, and if they are disabled to manually adjust the styling of the problematic elements.
Basically doing this:
reCaptcha made accessible

Now to share how that was accomplished.

1. Uploaded 2 files:

  • blank.gif to the root of the domain
  • captcha-accessiblity-enhancer to the root of the domain (it’s better to store all your JS file in a designated folder, but that is irrelevant for demo purposes)

2. Embeded the JS (before the body closing tag – </body>)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/captcha-accessiblity-enhancer.js" type="text/javascript"></script>

And that’s it. The people with disabled images will be able to properly use the reCaptcha now.