Forms

ISSUE:

Completing even the most carefully designed on-line forms may be difficult or impossible for users with certain types of impairments, users of some adaptive technologies and users of some Web-enabled devices. Individuals with mobility impairments may have difficulty accessing small form controls, such as radio buttons and check boxes. It is a good practice to provide alternatives to completing on-line forms (e.g., E-mail, telephone, fax, postal mail, in-person) and clearly indicating that these alternatives are supported.

The design, content and layout of an on-line form must be considered in order to ensure access for the widest possible audience — including users of adaptive technologies.

 • Font styles, sizes, attributes, colors or other non-textual elements should not be used as the only means of indicating required fields and other form parameters.
 • Legends for identifiers within the form (e.g., * = Required field) should appear prior to the form.

STANDARD:

• Do not use font styles, sizes, colors or other non-textual elements as the only means of indicating required fields.



• Indicate alternatives to completing online forms.

EXAMPLE:

Edit Fields

Note: The field identifier (Name:) has been associated with the corresponding edit field using the <label> element. In addition to ensuring that the correct field identifier is spoken when a screen-reader user tabs to the edit field, use of the <label> element allows mouse users to move focus to the edit field by clicking on the associated text label.

The "accesskey" attribute is used to define a hotkey combination for a control. Holding-down the ALT key and pressing the assigned letter or number will move focus to the control/selection. "Accesskey" is an HTML 4.0 specification and is not supported by all browsers or operating platforms.

Radio Buttons

Note: The control set identifier (e.g., Radio Button Controls) has been associated with each control in the set using the <fieldset> element.

Note: The radio button labels have been associated with their corresponding form controls using the <label> element. In addition to ensuring that the correct information for each radio button is read by screen-readers, the use of the <label> element allows mouse users to click on the text label associated with a radio button when making a selection.

Checkbox Controls

Note: The control set identifier (e.g., Checkbox Controls) has been associated with each control in the set using the <fieldset> element.

Note: The check box labels have been associated with their corresponding form controls using the <label> element. In addition to ensuring that the correct information for each check box is read by screen-readers, the use of the <label> element allows mouse users to click on the text label associated with a check box when making a selection.