SiteLint documentation and guidelines

Captcha should be fully accessible

Description

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a security mechanism designed to differentiate between human users and automated bots. Google reCAPTCHA is a widely used CAPTCHA service that helps protect websites from spam and abuse. While effective for security purposes, CAPTCHAs can present significant accessibility challenges for users with disabilities. Ensuring that CAPTCHAs are accessible is crucial to providing an inclusive user experience.

Disabilities impacted

  • Visual impairments: users with visual impairments may struggle to see or interpret CAPTCHA images and may rely on audio alternatives.
  • Cognitive disabilities: users with cognitive disabilities may find CAPTCHAs confusing or difficult to complete.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices may find it challenging to interact with CAPTCHA interfaces.
  • Hearing impairments: users with hearing impairments may not be able to use audio CAPTCHAs.

Why it matters

CAPTCHAs are necessary for security, but they should not prevent users with disabilities from accessing content. Ensuring that CAPTCHAs are accessible helps provide a secure yet inclusive experience, allowing all users to interact with the website without unnecessary barriers.

Coding problems and solutions

Common coding problems

  • Inaccessible visual CAPTCHAs: CAPTCHAs that rely solely on visual content without providing accessible alternatives.
  • Complicated audio CAPTCHAs: audio CAPTCHAs that are difficult to understand or interpret.
  • Lack of keyboard accessibility: CAPTCHAs that are not fully navigable or operable using a keyboard.

How to fix it

Use accessible reCAPTCHA

Implement Google reCAPTCHA v2 or v3, which includes accessibility features.

Correct example
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Incorrect example
<img src="captcha-image.png" alt="CAPTCHA Image">

Provide accessible alternatives

Ensure that reCAPTCHA provides accessible alternatives such as audio CAPTCHAs.

Correct example
<!-- Google reCAPTCHA automatically provides accessible alternatives -->
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Ensure keyboard accessibility

Test reCAPTCHA to ensure it can be fully navigated and completed using a keyboard.

Correct example
<!-- Google reCAPTCHA is designed to be keyboard accessible -->
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Known limitations

  • Complex audio CAPTCHAs: audio CAPTCHAs can still be difficult for users with hearing impairments or cognitive disabilities. Providing a balance between security and accessibility can be challenging.
  • Continuous updates: accessibility features in CAPTCHA services may need continuous updates to keep up with best practices and new standards.
  • Testing across devices: ensure CAPTCHAs are tested across different devices and assistive technologies to verify accessibility.

Resources