CAPTCHA which stands for “Completely Automated Public Turing tests to tell Computers and Humans Apart” are found everywhere on the Web, primarily used to prevent web scrapers and bots from interacting with websites. They’re also useful in protecting websites from DDOS attacks, which can slow down a website and, in some cases, completely take them off the Internet.
They’re intentionally built to give users a hard time, meaning the user has to prove they’re human and not a bot. That requires them to overcome a challenge to gain access to a resource on a website or to submit information to the web server through a form.
There are three types of CAPTCHA challenges:
- Auditive
- Textual
- Visual
Each one of them offers a specific challenge to users and with this comes the issue of accessibility and inclusivity.
Generally speaking, traditional CAPTCHAs have always been a source of frustration for Web users. Especially those living with a disability, it is a known fact today that not all Web users have the same capacity and ability to navigate the web and this includes solving CAPTCHA challenges.
CAPTCHAs are a double-edged sword. On one side they protect your website from bots and spammers and on the other they can be problematic in terms of accessibility.
Let’s have a look at some common accessibility issues with traditional CAPTCHA methods and how you can solve them and some accessible alternatives you can use instead.
Table of Contents
Common Accessibility Issues With CAPTCHAS
The real problem with older CAPTCHA technology is that they were implemented without accessibility in mind and using them on your website can be a disaster for accessibility and user experience.
Because they’re built to be challenging to solve and to differentiate between humans and robots, they can be overwhelming to users with visual, cognitive and physical disabilities. This makes it extremely hard or in some cases impossible for them to solve those challenges. A web developer must be careful when choosing and implementing them on your website and ensure they’re inclusive to all users.
WCAG 2.2, under the AAA criterion, requires that whenever a CAPTCHA is used during authentication, you should at least provide an alternative method that doesn’t require the user to pass a cognitive test or provide assistance to complete the CAPTCHA.
Here are some alternative methods that can be used for authentication:
- Biometrics: Fingerprints, facial recognition or voice recognition
- USB Key: The user logs in using a USB token.
- Authentication Links: Enables a user to login without a password by providing their email address and receiving a link.
- SMS: Enables the user to login with SMS by sending them a code to confirm their identity.
WCAG also offers some optional steps you can take to make cognitive tests more accessible:
- Giving the user the option to choose between two different types of CAPTCHA at all times
- Not requiring authorized users to complete them
- Letting employees bypass them
Now let’s have a look at commonly used CAPTCHA methods and their issues in terms of accessibility:
1. Text CAPTCHA
This challenge presents to the user text in the form of an image that’s intentionally distorted and hard to see and asks them to enter the text in a form.
This is problematic to users with visual disabilities like partial or full blindness. Users with visual disturbances like severe astigmatism can also be negatively impacted by those challenges. Screen readers are also unable to process the text image because they don’t have an alt-text assigned to them by default which you can add with an alt
2. Audio CAPTCHA
This CAPTCHA challenge will play an audio with consecutive characters, letters or words and will ask the user to enter them in a form.
Users who are deaf cannot hear the audio being played making it impossible for them to solve the challenge and users with cognitive and learning disabilities will also have a hard time solving them. This can also be an issue for users in noisy environments where they cannot properly hear the audio.
It’s also proven that audio CAPTCHAs come with a heavier cognitive load to all humans, especially if the audio is highly distorted making them harder to solve for everyone.
3. Puzzle CAPTCHA
Puzzle CAPTCHAs are challenges based on logic where the user has to solve a logical problem to prove he’s not a bot. These can be questions such as, “What is 2×9?”, a spatial puzzle where you have to choose the right orientation of an object or a word puzzle where you have to fill in a missing word.
While screen readers can read questions aloud to visually disabled users, spatial puzzles will be harder for them to solve. Not everyone has the same cognitive capabilities, an individual with learning disabilities will find puzzles harder to solve.
4. Image CAPTCHA
This is a type of challenge where the user has to identify images such as identifying which image represents a dog or a bicycle.
Each user interprets and perceives images differently especially if the image is unclear. This is even more an issue for users with vision-related disabilities and cognitive processing disorders making these challenges nearly impossible for them to solve.
How To Solve Accessibility Issues with CAPTCHAs?
As you can see, whether it’s text, audio or puzzle CAPTCHAs, each one of them has downsides in terms of accessibility and aren’t fully inclusive to users. While you cannot make them fully accessible to every users, there are a couple ways you can make them more inclusive:
1. Offer Alternative CAPTCHA
Give your users the option of choosing the CAPTCHA method depending on their capabilities. Like being able to switch to an audio CAPTCHA if you’re visually impaired or an image CAPTCHA if you have a reading disability like dyslexia.
2. Add Alt-Text
Adding alternative text to CAPTCHA challenges is a simple way we can make them accessible to screen reader users. Such as describing the purpose of non-text CAPTCHA while not giving away hints because that would defeat the purpose of the challenge.
3. Avoid Time Limited CAPTCHA
These can be annoying to every user, disabled users in general take more time than usual to complete tasks like filling forms and this will timeout the CAPTCHA making them to start over again.
4. Don’t use CAPTCHA
The easiest and best solution is to not use them at all If there’s no need. If you have a small ecommerce website with little traffic CAPTCHA will be more of an annoyance to your users than anything. If you really want to protect your websites from bots, use filters or an alternative bot mitigation method instead.
What Are Accessible CAPTCHA Alternatives?
While the best option for accessibility would be to not use them, in some cases you have to.
Like with any technology, CAPTCHA has evolved and we now have accessible alternatives available to us. While no CAPTCHA is 100% accessible, some are better than others.
Let’s have a look at two of the most accessible options available:
1. hCAPTCHA
hCAPTCHA offers two different types of verification methods one which is text-based and the other is a universal accessibility option which serves users with any kind of disabilities. hCAPTCHA is fully compliant with Section 508 and WCAG 2.1 AA out of the box so you don’t have to tweak anything.
hCAPTCHA also comes with an accessibility token which can be used by users to skip CAPTCHAs as much as they want, to get access to this token you will have to sign up for the hCAPTCHA accessibility access with your email. This cookie will need to be refreshed every 24 hours through the hCAPTCHA sign up page.
2. reCAPTCHA v3
ReCAPTCHA was released back in 2007 and it evolved a lot, reCAPTCHA v1 asked user to read distorted text and type it in a box, reCAPTCHA v2 was about ticking a box that says “I’m not a robot” or give you an image or audio recognition challenge like asking you to tick all the boxes containing a boat.
Unfortunately, Google’s reCAPTCHA v2 isn’t fully accessible to users with disabilities and as technology evolves so does bypassing methods used by criminals online. There are serious security issues with this second version of reCAPTCHA which enables cybercriminals to easily bypass these challenges with AI and in some cases outsource the reCAPTCHA challenge to human workers in CAPTCHA farms.
To solve those security loopholes and after listening to user feedback, Google released reCAPTCHA v3 in 2018 and it is to this date the most advanced CAPTCHA technology released by Google. What’s unique about this release is it runs in the background out of sight from the user, meaning there are no challenges to solve.
How Does Google ReCAPTCHA v3 Work?
reCAPTCHA v3 assigns a decimal score ranging from 0.0 to 1.0, 0.0 meaning it’s likely a bot and 1.0 meaning it’s likely a human.This score is assigned to users who visit your website and start interacting with it. It will then be used to decide whether the user is a human or a bot. This is a seamless process that doesn’t add friction to the user experience which is key for accessibility and it dramatically improves conversion rates.
You can have ReCAPTCHA v3 run in the background passively or bind it to elements like buttons, forms or any type of action users take on the page. It can also be implemented programmatically offering granular control over sensitive events like when a user logs in or when a user wants to reset his password.
How To Hide Google ReCAPTCHA v3 Badge?
The ReCAPTCHA badge is always shown on websites using it but what if you want to hide it?
Well, hiding it incorrectly can put you in hot water with Google because it violates Terms of Services. You are allowed to visually hide the widget, however, it is not permitted to remove it from the DOM.
Here’s how you can safely hide it in CSS:
.grecaptcha-badge {
visibility: hidden;
}
Note: Using display: none to hide the badge will disable spam checking and violate Google’s Terms of Service as it removes the element from the document. .
Google allows you to hide the badge as long the reCAPTCHA text branding is visible to the user as mentioned here. An effective way to preserve your current design without violating the Terms of Service is to insert this below code snippet under the form that is collecting information, protected by ReCAPTCHA.
This site is protected by reCAPTCHA and the Google
<a href="https: //policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
Conclusion
Implementing CAPTCHA can be a headache, on one hand you have to protect your website from bots, spammers and cybercriminals and on the other you have to offer an inclusive and accessible experience to every user.
When implementing features such as CAPTCHAs on your website, it’s always best to gather as much data and feedback from your users, listen to their pain points and run A/B testing. This will help you go forward by optimizing your website and offering an optimal user experience. Reach out to us if you need help with CSS tricks and tips info@advancedbytez.com
