Forms

• Write questions and instructions in plain language. 
• Avoid jargon and complex sentence structures. 
• Provide clear instructions when completing the form.
• Use the Required option when needed and clearly mark required fields. 

If your form includes images, provide descriptive alternative text (alt text) so screen readers can convey the information to visually impaired users.

• Choose high-contrast themes to make text more readable for users with visual impairments. 
• Ensure that there is sufficient contrast between the text and background colors. 

Verify that all interactive elements (like buttons and input fields) can be navigated and activated using a keyboard.

Use headings and sections to organize the form content logically. This helps screen reader users navigate the form more efficiently.    

• Ensure the tab order follows a logical sequence. 
• Use focus indicators to show which form field is active, aiding keyboard-only users. 

If possible, avoid setting time limits on form completion. If necessary, provide options to extend the time limit or notify users before the time expires.

Selecting a theme from the Qualtrics Library will help ensure your form’s theme is accessible to all users.

• Click the Library button. (This defaults to your My Library folder.)
• Click the drop down for your default folder (upper left corner) and select Qualtrics Library.

Some question types are more accessible than others.

• Organize your form in a logical way, by grouping similar questions together and using headings for each section.
• If the form is long, choose to spread the forms over multiple pages. Use a progress bar to indicate progress.
• Include options to undo actions or allow user to confirm their responses in case a user has made an error.

Use Auto-Number feature to number your form to help users navigate through your form and keep track of the questions.

• Select Tools from the Survey tab.
• Choose Auto-Number Questions.
• Optional: Change the prefix from Q to something else.

Changing the default survey title gives the user more information about the form and makes it easier to identify. This text appears in the browser as the window or tab title.

• Navigate to the Survey tab and open Survey Options.
• Enter a new Survey Title and press the Save button.

Adding an accessible header to your form lets you insert content at the top of each page. The header is typically used as the form’s title and/or logo.

• Navigate to the Survey tab and open the Look and Feel menu.
• Click the General tab and then click Edit underneath the Header box.
• Click Source in the Header box (brings up the HTML screen) and type your text in between <h1> and </h1>.
  • Here’s an example: <h1>Test Form 1/4/18</h1>
• Click Save.

You must include alt text for any images on your form.

• Insert image into the Rich Content Editor and right click on the image.
• Select Image Properties.
• Enter a short description of your image.
• Click OK.

By default, the Next and Previous buttons appear as “>>” and “<<” to indicate arrows. Changing these to text will help those who use screen readers.

• Go to the Survey tab and open Look & Feel.
• Click the General tab and go to the Next Button Text box; replace arrows with text (e.g., Next).
• Do the same for the Previous Button Text box (replace arrows with Back).
• Click OK.

This feature checks for inaccessible issues and gives recommendations on how to fix them.

• From the Survey tab, click Tools/Review/Check Survey Accessibility.
• Review the list of problems and recommendations.
• Click directly on a recommendation to jump to its location in the survey; make the suggested changes.
• Click Done and move to the next issue.

• Organize your form in a logical way, by grouping similar questions together and using headings for each section.
• If a form is long, choose to spread it over multiple pages. Use a progress bar to indicate progress.
• Whenever possible, include options to undo actions or allow the user to confirm their responses in case they make an error.

• If you are coding a form yourself, ensure every form field has a <label> element.
• If you are using a tool like Qualtrics, these tools may include appropriate HTML markup.

Example: HTML Labels

<div>

<label for=”last_name”>Last name:</label>

</div>

Use help text, which can help users know what is being asked and specify a format.

Example: HTML for Help Text

<label for=”Time”>Time</label>

<input type=”text” name=”Time Spent” id=”Time” aria-describedby=”Time-help”>

<span id=”Time-help”>Use decimals instead of time. Example: .25 means 15 minutes, .5 means 30 minutes.</span>

• For groups of related fields such as radio buttons or checkboxes, use a <fieldset> element to group them together and a <legend> element to describe them.
• Again, tools like Qualtrics may include appropriate HTML markup.

Example: HTML for Buttons

<fieldset>

<legend>Favorite color?</legend>

<div>

<input type=”radio” name=”color” value=”Red” id=”color_red”>

<label for=”color_red”>Red</label>

</div>

<div>

<input type=”radio” name=”color” value=”Green” id=”color_green”>

<label for=”color_green”>Green</label>

</div>

<div>

<input type=”radio” name=”color” value=”Blue” id=”color_blue”>

<label for=”color_blue”>Blue</label>

</div>

</fieldset>

• Indicate required elements with the word “required” or a common symbol such as an asterisk.
• Never use color alone for emphasis, such as using only red.

Example: HTML for Required Element

<label for=”name”>Name (required): </label>

<input type=”text” name=”name” id=”name” required aria-required=”true”>

• Check the linear order of items on the page by tabbing through the items or by using an accessibility checker tool.
• Because some people only use a keyboard, ensure all items can be accessed with tabbing or arrow keys, without a mouse.
• A recommended tool is the WebAIM WAVE accessibility tool.

• Avoid reset buttons, which can be accidentally selected.
• Avoid CAPTCHA form fields, which are often used to validate if a human is completing the form rather than a bot.
• Avoid using images as buttons. If using them, add alt text.
• Avoid using multiple select menus, which may require users to use Ctrl/Cmd or Shift+Click to select items.
• Avoid jump menus, which may not work in all browsers and may trap users in the menu until they select an option.
• Avoid time limits.