Enhance reCaptcha accessibility with disabled images
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>)
And that’s it. The people with disabled images will be able to properly use the reCaptcha now.