1. Help
  2. Getting started
  3. Make a typeform
  4. Create accessible typeforms

Create accessible typeforms

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 typeforms.

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 typeforms.

Share accessible typeforms

To make sure that people completing your typeform have an accessible respondent experience, use the Copy link button to share it, like below:

Accessibility_share.png

Typeforms embedded in a web page or chat, 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. 

Screen_Shot_2021-06-07_at_1.03.51_PM.png

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

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

Screen_Shot_2021-06-07_at_1.05.36_PM.png

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

Screen_Shot_2021-06-07_at_1.08.49_PM.png

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 typeform, 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. 

HC_BobRoss_ilu_cropped.png
Tips! If you’re adding an image from the Unsplash library or an icon from the Noun Project, 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:

Screen_Shot_2021-06-07_at_1.16.38_PM.png

This is a question with a picture layout and editable Alt text in Question settings:

Screen_Shot_2021-06-07_at_1.19.29_PM.png

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 typeforms, make sure that they have closed captions (CC) turned on. You can read more about accessible videos here.

 

Tap into our community knowledge

Find Answers
Contact Support