WCAG 1.1.1: Non-Text Content (CAPTCHAs)

Back to all WCAG criteria

OVERVIEW

Effort:

Complexity:Easy
Duration:Fast

Important for:

Development

To WCAG:

1.1.1 Non-text Content

What's it about?

CAPTCHAs must be universally accessible. Therefore, every CAPTCHA method requires an alternative that engages a different sensory input to accommodate all users.

Illustration showing two CAPTCHA types side by side. On the left is an image CAPTCHA with distorted characters and a field labeled ‘Write your answer’. On the right is an audio CAPTCHA with playback controls and its own answer field. Labels point out ‘Image-CAPTCHA’ and ‘… and an alternative!’, emphasizing that CAPTCHAs must provide both image and audio options and that image CAPTCHAs need alt text explaining their purpose.

How to

Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.

Provide CAPTCHA alternatives and describe image CAPTCHAs
An image CAPTCHA needs an audio option as a backup, and it works the other way around, too.

Additionally, an image CAPTCHA needs a text alternative—like alt text—so that screen reader users can identify it, along with a clear hint indicating where the alternative can be found on the page.

For instance, in a CAPTCHA requiring users to read and input alphanumeric characters, the image would have the text alternative: »Letters and numbers for the CAPTCHA. The audio alternative is located further down the page under the heading: Answer audio question.«
Technique(s):

Create accessible designs?

Our workshop for designers!

Learn everything you need to know as a designer to create accessible design systems for digital products and entire brands.

Learn more about the workshop

Four principles of the Web Content Accessibility Guidelines: Perceivable – a red triangle holding a magnifier. Operable – a yellow circle with question marks overhead. Understandable – a green rectangle looking confused at a screen. Robust – a blue square wearing sunglasses and holding a keyboard.

Learn accessibility with us?

Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.

Send us an email!