Home.Publication Procedures and Style Guide.Websites.Visual Design.Forms

Blue Banner

Forms

Guidelines

Design forms that users can complete online so that users of assistive technology can access all the information, including directions, cues, field elements, and functionality required to complete and submit the form.

Forms designed for online completion must allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Search is most often conducted via a Web-based form. Users with assistive devices need cues to fill out the form. To create the most accommodating online forms, ask these questions during the design process:

  1. Is there a label attribute for each field element to tell the user what the field contains?
  2. Are controls logically ordered in the source code? Screen readers and the tab key follow the order of the source code.
  3. Are there text references associated with multiple input elements that do not accommodate assistive technology?

More information on creating successful forms:

  1. WebAIM's article on forms
  2. University of Texas at Austin Accessibility Institute - How-to and Demos (Excellent section on creating accessible forms): University of Texas' Guidelines for Forms

Conveyed With Color

Design Web pages so that all information conveyed with color also is available without color.

If color is used to convey important information, use an alternative indicator, such as placing the word " required" next to the field name or an asterisk (*) or other symbol. Make sure that the contrast between text and the background or an image is distinctive enough to read the text.

Some websites indicate relevancy of a search engine listing by using a color bar, number of stars, percentage, etc. If relevancy is indicated purely by visual means (stars, color bars, etc.), users of assistive devices will not be able to access this. The best way to indicate relevancy of search results is with text, such as a percentage figure. If you use a color bar or other visual indicator of relevancy, include the percentage in the alt text of the image.

Text Equivalent Images, Buttons, Applets, and Scripts

Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content).

Alt descriptions for images used as links need to be descriptive of the link destination. Decorative graphics with no other function should always have empty alt descriptions (alt= "").

The alt descriptions should succinctly describe the purpose of the objects without being too verbose (for simple objects) or too vague (for complex objects). Help the user by providing cues to repetitive images. For instance, if there are buttons that follow the main search button, label each button with a description and let the user know there are additional buttons by also indicating "1 of 4", "2 of 4", etc.

Read more about accessible images and objects:

  1. Creating Accessible Images
    WebAIM's guidance for accessible images
  2. Radio buttons with <fieldset>, <legend>, and <label>
    University of Texas' article on marking up radio buttons
Page last reviewed/updated: 04/08/2014