Create accessible forms

Typeform's default, full-screen respondent experience is WCAG 2.1, Level AA compliant. If you were wondering what this all means for you: compliance with these guidelines lets assistive technology users complete your forms.

What is WCAG 2.1?

Web Content Accessibility Guidelines (WCAG) were created to make web content more accessible to people with disabilities. The guidelines can’t cover every user need for people with disabilities, but they do address accessibility on both desktop and mobile devices.

Read on to learn more about our tips and tricks for creating and sharing accessible forms.

Share accessible forms

To make sure that people completing your form have an accessible respondent experience, use the Copy link button from the Share panel to share it, like below.

Forms embedded in a web page or launched in an email haven't been tested for accessibility yet, but we're currently working on this.

Use an accessible theme

The default Typeform theme meets accessibility requirements, as the questions, answers, buttons, and background have a color contrast of at least 3.0:1.

The color codes used in the default Typeform theme are the following:

Questions: #000000
Answers: #0142AC
Buttons: #0142AC
Background: #FFFFFF

You can also look for other accessible themes in the gallery. For example, the Taxi theme is also accessible.

If you want to change a theme or create your own, you can take a look at this contrast checker to make sure that the new theme also meets the accessibility criteria.

Add alt text for screen readers

Adding a short description to your pictures will help people with visual impairment. Even though this label is not visible in your form, screen readers will read it out loud.

You can use the Alt text field in question settings to manually describe the picture you’re adding in maximum 125 characters.

Tip! If you’re adding an image from the Unsplash library or an icon from the Noun Project (within the Media gallery), the description of the image will appear automatically in the Alt text field.

Here’s a Picture Choice question with editable Choices alt text under its Question settings.

This is a Welcome Screen with an image added and editable Alt text in Question settings.

Use hyperlinks instead of bare links

When adding a link to an external URL, use a hyperlink instead of a bare link. Clearly stating the target of your link in the context will also help users with disabilities.

Use accessible videos

When adding videos to your forms, make sure that they have closed captions (CC) turned on. You can read more about accessible videos here.

Use Typeform's accessibility checker

Click the Check accessibility button in the toolbar and it'll check which parts of your form are accessible already and which parts could be improved. Learn more about Typeform's accessibility checker here.