Qualtrics is a robust application that can be used to create accessible forms, but only if you’re careful about designing them to be accessible. Because forms are interactive, if they’re not accessible, they will be unusable for some users. To ensure equal access, it’s critical that we design all forms to be accessible for all users.
Question types
Because Qualtrics was designed for surveys, it has a variety of question types that you may not need for basic information gathering. The following question types are accessible, WCAG 2.0 AA compliant, and should meet your needs for most basic forms:
- Text entry (all types)
- Form field
- Descriptive text (Text / graphic questions) - if pasting an image into the rich test editor, click the image to select it,right-click, then image properties. A pop-up box will allow you to add alt text (required for all images).
- Multiple choice (all types)
- File upload
The following question types are also WCAG 2.0 AA compliant, but keep in mind that complex question types may result in barriers for people using assistive tech, with cognitive disabilities, or who are under stress:
- Net promoter® score - Be sure to state which number is best or worst in the question text if using numbers.
- Rank order - only text box, graphic, and radio buttons
- Side by side
- Constant sum - only choices (AKA text entry)
- Drill down
- Timing - The auto advance option is not accessible; avoid displaying the timer whenever possible.
- Meta info
- Captcha verification (V2) - Although this provides users with an audio option, avoid using CAPTCHA whenever possible.
- Slider - Be sure to state which number is best or worst in the question text if using numbers.
- Some Matrix questions may be accessible, but only if set to mobile friendly. (Note: We encountered a lot of issues with Matrix questions during screen reader user testing, so avoid all of these if possible.)
- Rank order
- Constant sum
- Text entry
- Profile
Do not use the following question types, which are not WCAG 2.0 AA compliant:
- Matrix (likert, bipolar, MaxDiff, and carousel, as well as any matrix table that is drag and drop)
- Rank order (Drag and drop and select box)
- Constant sum (sliders and bars)
- Pick, group, and rank
- Hot spot
- Heat map
- Graphic slider
- Signature
- Highlight
- Video response
- Org hierarchy
Alternative text
The UC Berkeley logo that displays at the top as a theme default does not have alt text.
- Remove it by going into the “Look & Feel” menu, then from Theme, select Blank.
- As a work-around, to add a logo to your survey, add it as a header. Go into the General tab, then Header field, then edit, then add the logo image in the WYSIWYG editor. Then select the image, right-click, and add alt text in the image properties.
If you add any other graphics or images in your form, you must add alt text. You can do this in the WYSIWYG editor: Select the image, right-click, and add alt text in the image properties.
Avoid using text in images.
Use of color and fonts
Requirements for the accessible use of color are the same for forms as they are for websites and documents. For text:
- Use simple sans serif fonts.
- Use dark text on a light background, with sufficient color contrast.
- Note: The default gray text on a gray background used in the “Flat” Layout under "Look and Feel" fails WCAG color contrast requirements. Use Simple, Modern or Classic instead.
Previous and Next buttons
- You’ll need to add the text, “Previous” (or “Back”) and “Next” to the form navigation buttons. The words aren’t there by default.
- In order for the previous button to display, go into Survey Options menu, then Responses, then enable the Back button.
- Note: You can’t go back to a previous block, only a previous page. In most cases, it’s better to use page breaks rather than blocks.
Other tips for accessible forms
- If your form displays on more than one page, use progress bars with text so users know how far along they are. (This is in the Look & Feel, General settings.)
- Ask as few questions as possible. This improves usability and accessibility. If possible, use display logic to show questions only to relevant users.
- Keep question text brief. Use terms people are familiar with. Use plain language. Check your language with the free Hemingway Editor.
- Use the order that people are used to. For example, don’t ask users for their city before their street address.
- Test your form with a few people to identify any areas of confusion.