Check if your form is accessible

At Typeform, we care about accessibility, and to make it easier for you to create accessible forms, we’ve implemented an accessibility checker. Read on to find out how to check for accessibility issues using this tool.

The accessibility checker checks for the the following:

- Button color contrast against the background

- Button text color contrast against button background

- Question text color contrast against the background

- Answer text color contrast against the background

- The presence or absence of image Alt text

- Whether the question type itself is fully accessible

All question types owned by Typeform are accessible, but we can’t guarantee the accessibility of questions integrated with external tools. For example, if you add a Calendly question to your form, the accessibility checker will show a warning message explaining that we can’t guarantee the accessibility of this integration.

The Check accessibility feature verifies your form according to WCAG 2.1 Level AA accessibility standards. The color contrast guidelines for this standard are the following:

- Text and/or images of text have a contrast ratio of at least 4.5:1, except:

- Large-scale text and images of large-scale text (18pt to 14pt bold), which should have a ratio of at least 3:1

You can find out more about these guidelines here.

To check which parts of your form are accessible already and which parts could be improved, open up a form and click the Check accessibility button from the tool bar.

A list will appear, and will show you how your form is doing in the different areas we check.

You can click the arrows to expand and read more about each category.

You can also click on any issue to find out where to fix it. In this example, the form has some accessibility issues with its theme color, and by clicking the name of the issue, the Themes section is opened in the Design panel on the right.

Now when I choose a different theme, the accessibility report also gets updated in real time.

In the example below, I selected the default Typeform theme - which was designed with accessibility in mind - to make sure everything checks out.

Next, you can check for any Alt text issues in your form. If you see an error here, that might be because the Alt text description of an image is missing somewhere in your form.

To fix this issue, you can either add Alt text to an image, or if the image is purely decorative and its description doesn’t have to be read out by screen readers, use the Decorative image checkbox to disable Alt text.

Next up is the Other option. You might get a warning message here if your question is connected to an external tool like Calendly.

Give the accessibility checker a try yourself, and find out how accessible your forms are! You can read more about how to create accessible forms here and how to add accessible videos to your forms here.