Check if your typeform is accessible
At Typeform, we care about accessibility, and to make it easier for you to create accessible typeforms, 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 typeform, 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 typeform are accessible already and which parts could be improved, open up a typeform and click the Check accessibility button:
A list will appear, and will show you how your typeform is doing in the different areas we check:
You can click the arrows to read more about each category:
You can also click on any issue to find out where to fix it. In this example, the typeform has some accessibility issues with its theme color, and by clicking the name of the issue, I’m taken to the Themes section in the Design panel:
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 typeform. 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 typeforms are! You can read more about creating accessible typeforms and adding accessible videos to your forms here and here.