Creating accessible forms helps ensure that everyone can complete your typeform with ease. Here are some best practices to keep in mind when designing and sharing your forms.
Share accessible forms
To make sure that people completing your form have an accessible respondent experience, share your form with a link. 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 the WebAIM 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. Click the arrow to expand the Choices alt text.
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 in our guide on creating forms with accessible videos.
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 in our article on Typeform's accessibility checker.