WCAG CAPTCHA: Maximizing WCAG 2.0 Conformance of Forms Protected with BotDetect CAPTCHA

October 2013. by

After adding BotDetect Captcha protection to your web form (PHP, WordPress, CakePHP, CodeIgniter, ASP.NET WebForms, ASP.NET MVC, ASP Classic) to prevent automated submissions, you will be able to satisfy WCAG 2.0 Captcha accessibility requirements. However, Section WCAG conformance won't be automatic – since it can only be evaluated for the form as a whole, and involves page elements which are not generated by BotDetect but are under your control. Also, since each form might have its own unique requirements, BotDetect should be configured to meet them. This checklist will guide you through the Captcha implementation steps needed to fully comply with WCAG standards.

World Wide Web Consortium (W3C)

Table of Contents

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure BotDetect CAPTCHA is Percievable

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure BotDetect CAPTCHA has Appropriate Text Alternatives

CAPTCHA WCAG 2.0 Conformance Checklist: Functional BotDetect CAPTCHA Audio

BotDetect provides out-of-the-box audio Captcha functionality engineered to be accessible and easily understandable, compatible with a wide range of client browsers and devices, and secure against automated analysis. BotDetect Captcha audio is enabled by default.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the BotDetect sound icon is shown on the form next to the Captcha image (is Captcha audio enabled?)
  • Check that clicking the BotDetect Captcha sound icon starts sound playback, and finishes pronouncing the whole Captcha code (is Captcha audio functional / compatible with the client device?)
  • Check that the Captcha audio always contains the pronunciation of the exact same Captcha code as shown in the Captcha image (is Captcha audio synchronized with the image / is Session data being stored properly?)
  • Check that the Captcha challenge can be solved and the form successfully submitted using audio Captcha only (does Captcha audio allow full form functionality?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist BotDetect CAPTCHA Image Text Alternative

The descriptive text alternative for the Captcha image should also be clear and descriptive enough to screen reader users, and possibly instruct them to use the audio Captcha alternative made specially for them instead. If you need to change the Captcha image alternative text, you can use the BotDetect setting for your core form technology: ASP.NET, Java, ASP Classic, PHP.

Since wrapping the Captcha image inside the Captcha help link (when the help link mode is set to image) could unnecessarily extend the screen reader pronunciation of the Captcha image alternative text, setting the help link mode to text is recommended to maximize WCAG conformance. You can configure it using the BotDetect setting for your core form technology: ASP.NET, Java, ASP Classic, PHP.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the BotDetect Captcha image alternative text is descriptive enough when read to blind visitors by screen readers such as JAWS (does the text alternative convey all information necessary to use understand what the Captcha image represents and what it is used for?)
  • Check that the BotDetect help link text or title doesn't interfere with Captcha image alternative text pronunciation in screen readers such as JAWS (is the help link mode set to text?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: BotDetect CAPTCHA Sound Icon Text Alternative

The descriptive text alternative / tooltip for the Captcha sound icon should also be clear and descriptive enough to screen reader users. If you need to change the Captcha sound icon tooltip, you can use the BotDetect setting for your core form technology: ASP.NET, Java, ASP Classic, PHP.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the BotDetect sound icon tooltip is descriptive enough when read to blind visitors by screen readers such as JAWS (does the text alternative convey all information necessary to use Captcha audio?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist BotDetect CAPTCHA Reload Icon Text Alternative

The descriptive text alternative / tooltip for the Captcha reload icon should also be clear and descriptive enough to screen reader users. If you need to change the Captcha reload icon tooltip, you can use the BotDetect setting for your core form technology: ASP.NET, Java, ASP Classic, PHP.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the BotDetect reload icon tooltip is descriptive enough when read to blind visitors by screen readers such as JAWS (does the text alternative convey all information necessary to use Captcha reloading?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA Doesn't Rely on Time-Based Media

BotDetect doesn't use time-based media as defined by WCAG 2.0, so your BotDetect-protected forms should meet this WCAG guideline automatically – unless you use time-based media of your own on the form.

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA is Adaptable

CAPTCHA WCAG 2.0 Conformance Checklist: Adaptable CAPTCHA Solving Instructions

While most users today are familiar with Captcha challenges and how to solve them, clear Captcha-related text is necessary to maximize WCAG conformance. Just before the Captcha challenge, appropriate Captcha interaction instructions (e.g. "Retype the characters from the picture") should be presented to visitors. They should be implemented as a <label> element associated with the Captcha code textbox using the for="..." attribute – this way, screen readers and other assistive technology will be able to adapt the user interaction to meet the needs of disabled visitors.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that Captcha solving instructions are shown on the form before the Captcha challenge, and are descriptive enough to screen reader users (do they convey all information necessary to solve the Captcha?)
  • Check that clicking the Captcha instructions automatically focuses the Captcha code textbox (are they implemented as a Html <label> and correctly associated with the textbox?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist BotDetect CAPTCHA display Without CSS

To make Captcha accessible to the widest possible user base of assistive technology, Captcha functionality should be fully usable by visitors even when CSS is not supported by the client browser. BotDetect has been engineered to degrade gracefully and adapt to the capabilities of the client device – while the visual appearance will suffer, visitors will still be able to read, hear and solve the Captcha code. If you want to maximize WCAG 2.0 conformance of your form, you should test and ensure its compatibility in this use case.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that all Captcha elements are still visible on the form when CSS is disabled (the BotDetect sound and reload icons will be displayed below the Captcha image instead of next to it, and all links will have the default link borders)
  • Check that the whole form can be navigated and makes sense (the logical order of form elements is preserved) when CSS is disabled (do any form elements rely on CSS positioning to convey important information?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure BotDetect CAPTCHA is Distinguishable

CAPTCHA WCAG 2.0 Conformance Checklist: Easily Legible BotDetect CAPTCHA Images

BotDetect defaults for all Captcha settings that affect generated image legibility are set to maximize user-friendliness and allow easy reading.

However, BotDetect also allows users a high level of control over Captcha image generation: the image size (ASP.NET, Java, ASP Classic, PHP) and format (ASP.NET, Java, ASP Classic, PHP), Captcha code length (ASP.NET, Java, ASP Classic, PHP), character set (ASP.NET, Java, ASP Classic, PHP), image style / generation algorithm (ASP.NET, Java, ASP Classic, PHP) and the color scheme used (ASP.NET, Java, ASP Classic, PHP) can all be customized and randomized by the user. If you customize BotDetect settings which affect Captcha image generation, you should take care not to make the images too indecipherable to low-sighted visitors.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the Captcha images are large enough to be easily visible even to low-sighted visitors (is the Captcha image too small to be read comfortably?)
  • Check that the Captcha code length fits the Captcha image proportions: the closer the code length is to the image width:height ratio, the more legible the Captcha challenge (is the Captcha code length too large to fit into the image and remain easily readable?)
  • If you're using a custom Captcha character set, check that it doesn't contain any characters that can be confused for each other, such as "1", "l", "7", "I" etc. (does the Captcha image have a high chance of being visually ambiguous to low sighted visitors?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: BotDetect CAPTCHA Images Accessible to Color-Blind Visitors

All Captcha images generated by BotDetect should be easily legible to color-blind visitors. And even if Captcha parameter randomization necessary to achieve the required level of Captcha security occasionally generates an image which could be problematic to the color-blind, they will still be able to use the form by requesting a different Captcha image or using the audio Captcha alternative.

However, if you want to maximize Captcha accessibility to color-blind visitors, you could configure the color scheme used for Captcha image generation to e.g. black and white (in ASP.NET, Java, ASP Classic, or PHP), or instruct BotDetect to only use a subset of the available image styles which you confirm to meet your form accessibility requirements (in ASP.NET, Java, ASP Classic, or PHP).

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that Captcha images don't require the ability to fully distinguish colors (is the Captcha image legible even if some or all color information is lost?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Requesting a Different BotDetect CAPTCHA Challenge

The ability to request a different Captcha image when the current one is indecipherable is helpful for all visitors (since given a high level of randomization necessary for proper Captcha security, the result may be unpredictable enough to occasionally produce highly challenging images), but is particularly necessary for visitors with low vision. Since asynchronous Captcha image changing requires JavaScript, and BotDetect can not automatically degrade the Captcha changing script to reload your form and preserve user input of other fields when JavaScript is unavailable, you must consider and implement this use case yourself.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the BotDetect reload icon is shown on the form next to the Captcha image when JavaScript is enabled (is Captcha reloading enabled?)
  • Check that clicking the BotDetect reload icon successfully changes the Captcha image when JavaScript is enabled (is Captcha reloading functional?)
  • Check that the Captcha challenge can be solved and the form successfully submitted after reloading the Captcha image (does Captcha reloading affect form functionality?)
  • Check that the BotDetect reload icon is not shown when JavaScript is disabled (does Captcha reloading degrade gracefully?)
  • Check that reloading the form to get a different Captcha challenge when JavaScript is disabled preserves user input of other form fields (can the visitor always request a new Captcha challenge without affecting other form fields?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: BotDetect CAPTCHA Starting Audio Delay

The audio Captcha starting delay should be configured so the Captcha pronunciation does not overlap with screen reader pronunciation of the descriptive label associated with the Captcha code textbox. This should be tested in a screen reader such as JAWS. Use the BotDetect sound delay configuration guide for your core form technology: ASP.NET, Java, ASP Classic, PHP.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the BotDetect audio Captcha pronunciation doesn't overlap with any form element pronunciations read to blind visitors by screen readers such as JAWS (is Captcha audio comprehensible?)
  • Check that the Captcha challenge can be solved and the form successfully submitted using a screen reader such as JAWS (does Captcha audio allow full form functionality to the blind?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: BotDetect CAPTCHA Focus Indicator Display

BotDetect adds a thin grey outline to focused elements (Captcha controls/links), which should be distinguishable enough for all visitors. If you want to customize the appearance of these focus indicators, you can override the :focus declarations from the BotDetect layout stylesheet.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the focus indicators shown when a Captcha element is selected using the keyboard are distinguishable enough for your target audience (is element focus visible enough to be seen against the overall design of your page?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure BotDetect CAPTCHA is Operable

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA is Keyboard Accessible

CAPTCHA WCAG 2.0 Conformance Checklist: Keyboard Navigation of BotDetect CAPTCHA Form Elements

Keyboard is the most widely supported input method, which can be used not only by visitors who have an actual hardware keyboard, but also with speech input, mouse- or touch-operated on-screen keyboards, and many other assistive technologies that can emulate it. BotDetect ensures that all interactive Captcha elements it generates can be used with keyboard only – but you have to incorporate them in your form so it can be properly keyboard-operated as a whole.

If you are manually controlling tabindex values for interactive elements on your form, you will need to configure the starting BotDetect Captcha tabindex value as well (in ASP.NET, Java, ASP Classic, or PHP).

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the first Captcha element is selected when you navigate forward from the preceding form element using the keyboard (is the BotDetect starting tab index right?)
  • Check that following Captcha elements are selected in the right sequence when navigating from the first Captcha element using the keyboard (is the sequence of BotDetect interactive elements correct?)
  • Check that the Captcha code textbox is selected when you navigate forward from the last Captcha element using the keyboard (is the tab index of the Captcha code textbox right?)
  • Check that the whole Captcha-protected form can be navigated in the right sequence and successfully completed using only keyboard input (is the Captcha-protected form keyboard navigable?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA Provides Enough Time

CAPTCHA WCAG 2.0 Conformance Checklist Long Enough BotDetect CAPTCHA Interaction Window

Disabled visitors will often require significantly more time to complete a form than the average visitor. When implementing Captcha validation, it is important that they are given enough time to comprehend and solve the Captcha challenge. BotDetect defaults are designed to be accessible and generous with time, but only web form developers can know how much time does their form take to complete.

Session timeout: Since BotDetect stores Captcha codes in Session state by default, Captcha validation will fail even when the user enters the correct Captcha code if they submit the form after their Session expires. You should set the Session timeout of your website so it's long enough to comfortably complete the form even with significant disability-induced delays.

BotDetect code timeout: BotDetect allows users to limit the time during which validation of each Captcha code is possible (for security purposes: reducing the chances of Captcha reuse attacks). If you change this value, make sure it is not too short to allow disabled users to solve the Captcha challenge. BotDetect code timeout can be configured in ASP.NET, Java, ASP Classic, PHP.

BotDetect automatic reloading: When a Captcha code expires due to the timeout mentioned above, the Captcha image on the client should be automatically reloaded (otherwise, the visitor is interacting with an outdated Captcha challenge). Furthermore, automatic Captcha reloading before the Session expires acts as a "heartbeat" which keeps the visitors Session alive as long as they are interacting with the form. BotDetect automatic reloading is a usability improvement that is enabled by default, and can be configured in ASP.NET, Java, ASP Classic, PHP.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that visitors using slower interaction means such as screen readers and voice navigation can comfortably complete the form before the Session expires (is the Session timeout long enough?)
  • Check that the Captcha is unlikely to expire while the user is still interacting with the form (is the Captcha code timeout long enough?)
  • Check that reloading the Captcha image prolongs the visitor's Session (can visitors manually prolong the Session or start a new Captcha timeout when they need it?)
  • Check that expired codes are automatically reloaded when they can no longer be solved and JavaScript is enabled (is automatic reloading of expired codes enabled and configured properly?)
  • Check that automatic reloading of expired Captcha codes prolongs the visitor's Session (is automatic reloading acting as a proper "heartbeat" while the user keeps the form open?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA Doesn't Cause Seizures

BotDetect doesn't use any content that could cause seizures as defined by WCAG 2.0, so your BotDetect-protected forms should meet this WCAG guideline automatically – unless you use potentially seizure-inducing media of your own on the form.

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA is Navigable

Navigability, as defined by WCAG 2.0 doesn't have any notable interaction with BotDetect implementation – but you should ensure your site and web form meet the WCAG criteria of navigability for maximum conformance.

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure BotDetect CAPTCHA is Understandable

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA is Readable

CAPTCHA WCAG 2.0 Conformance Checklist: BotDetect CAPTCHA Sound Localization

You should consider the target audience of your web form and localize BotDetect to match the language of the page itself – sound Captcha can only help visually impaired visitors complete the form if they can understand the pronunciation. Use the BotDetect localization guide for your core form technology: ASP.NET, Java, ASP Classic, PHP.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the BotDetect audio Captcha pronunciation is set to use a language that visitors can understand (does the Captcha locale match the form localization?)
  • Check that the required BotDetect localization sound package is downloaded and deployed with the component (are localized BotDetect audio resources available?)
  • Check that the BotDetect Captcha sound icon is not disabled (greyed out or hidden) when you change the Captcha locale (is the required BotDetect pronunciation package deployed in the right location and with correct permissions?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist Form Elements and Text Localization

To ensure content readability to the target audience, Captcha-related text should be written in the same language as the rest of the form. If the language in question uses a RTL text direction, text boxes (including the Captcha code user input textbox) should be configured as such.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • If the Captcha locale is set to a Arabic or Hebrew, check that the Captcha code textbox takes text input in the right direction (is the textbox dir="rtl" attribute set correctly?)
  • Check that the BotDetect Captcha image alternative text is written in a language that visitors can understand (does the text alternative locale match the form localization?)
  • Check that the BotDetect sound icon tooltip is written in a language that visitors can understand (does the text alternative locale match the form localization?)
  • Check that the BotDetect reload icon tooltip is written in a language that visitors can understand (does the text alternative locale match the form localization?)
  • Check that the BotDetect interaction instructions are written in a language that visitors can understand (does the text locale match the form localization?)
  • Check that the Captcha feedback messages are written in a language that visitors can understand (does the text locale match the form localization?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA is Predictable

BotDetect is designed to be predictable according to the WCAG accessibility standards, so your Captcha-protected forms should have no issues achieving WCAG conformance.

BotDetect does include certain automatic behaviors where they make sense from a usability perspective: user input is automatically uppercased (to communicate that Captcha codes are not case-sensitive) and cleared on reload icon clicks (since changing the Captcha code invalidates any previous input); the Captcha code textbox is also automatically focused on sound and reload icon clicks (so users can immediately type what they see or hear, and don't have to waste time navigating to the textbox themselves).

If you believe your target audience will be confused by these behaviors, it's best to describe them in the Captcha instructions or help. However, if you want, you can also control which of these features will be enabled using BotDetect configuration.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that Captcha user input processing (auto-lowercase, auto-clear, auto-focus) is clear enough for your target audience, and possibly explain it in Captcha help

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA Provides Input Assistance

CAPTCHA WCAG 2.0 Conformance Checklist Accessible BotDetect CAPTCHA Feedback Indications

When the visitor form submission fails because they didn't solve the Captcha correctly or at all, textual feedback explaining that Captcha input is required or was incorrect will guide visitors to completing the form. This Captcha error text should be clear, and not depend solely on color or other sensory characteristics to convey the information. This will make it accessible to visitors using screen readers and the color-blind. If Captcha validation succeeds but validation of some other form fields fails, it's best to hide the Captcha since the visitor is already verified as human.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that Captcha input is indicated as required when the form is submitted without the Captcha code, with text accessible to screen reader users and the color-blind
  • Check that the user is instructed to re-try the Captcha challenge when the form is submitted with an incorrect Captcha code, using text accessible to screen reader users and the color-blind
  • Check that the Captcha challenge and all associated content is hidden when the visitor solves the Captcha but validation of another form field fails (are you using the BotDetect IsSolved property to minimize user hassle?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist Accessible BotDetect CAPTCHA Help

If detailed Captcha instructions are provided (longer than would fit the form), a separate Captcha help page can be embedded in the Captcha challenge using the BotDetect help link feature (ASP.NET, Java, ASP Classic, PHP). Ideally, this Captcha help page will be text-only and will explain the available Captcha accessibility features to accommodate screen reader users.

Testing BotDetect CAPTCHA WCAG 2.0 Conformance
  • Check that the Captcha challenge includes a Captcha help link with detailed instructions for Captcha interaction (is the BotDetect help link configured correctly?)

[back to the top of the page]

CAPTCHA WCAG 2.0 Conformance Checklist: Ensure the Form Protected with BotDetect CAPTCHA is Robust

BotDetect generates well-formed and valid Xhtml 1.1 Strict markup for WCAG conformance; ensuring that your whole form does the same and satisfies other criteria of compatibility, as defined by WCAG 2.0 is necessary to maximize WCAG conformance.

[back to the top of the page]

BotDetect CAPTCHA & WCAG 2.0: Conclusions & Further Reading

BotDetect Captcha has been engineered to meet as many WCAG conformance requirements as possible, but web form developers are ultimately responsible for making their Captcha-protected forms conform to WCAG accessibility standards. This checklist can guide you through the steps necessary to ensure and maximize WCAG conformance of your web forms using BotDetect Captcha to prevent automated submission.

Strict Standards: CAPTCHA Accessibility

[back to the top of the page]


© Captcha, Inc. 2004-2023. All rights reserved.

BotDetect, BotDetect CAPTCHA, Lanap, Lanap CAPTCHA, Lanap BotDetect, Lanap BotDetect CAPTCHA, Lanapsoft, Lanapsoft CAPTCHA, Lanapsoft BotDetect, Lanapsoft BotDetect CAPTCHA, and Lanap Software are trademarks of Captcha, Inc. All other product, brand, and company names are mentioned for identification purposes only and are trademarks or registered trademarks of their respective owners.

Captcha, Inc. -- formerly: Lanapsoft, Inc. / Lanap, Inc.