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:
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.