A more accessible captcha widget

A couple of weeks ago, while browsing open support tickets, I noticed a customer report that the Friendly Captcha widget was not WCAG-compliant. In other words, something about the widget fell outside the set of recommendations provided by the Web Content Accessibility Guidelines (WCAG). Removing barriers to accessing the web is a primary value of Friendly Captcha, so we try hard to make our products as accessible as possible.

As luck would have it, right around the time of this customer report, we launched an in-house website accessibility checker. It allows anyone to input a website URL and receive a report with an accessibility score and a list of remediations to achieve compliancy with WCAG 2 and EN 301 549, two important accessibility standards.

I entered the URL of the Friendly Captcha demo. Sure enough, the report contained an issue: the <iframe> element that houses the Friendly Captcha widget was missing an accessible name. According to WCAG 2.0, all <frame> and <iframe> elements must have an accessible name, provided by the title attribute. The Friendly Captcha widget didn't have that attribute.

One pull request later, the Friendly Captcha widget had a (properly localized) title attribute with a descriptive name. After redeploying the demo, I checked it again using the accessibility checker.

This time, it earned a score of 100 and a big green checkmark. Now, the Friendly Captcha widget is even more accessible to those who use browser assistive technologies. If you're looking for a user-friendly and accessible captcha solution, consider trying Friendly Captcha. Or, if you'd like to see how your websites stacks up in terms of accessibility, try entering its URL in the accessibility checker!