Forms

The Law

Section 508 Part 1194.22 Subpart n states:
When electronic forms are designed to be completed on-line, the form shall 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.

What do Do

All form elements on the online form will be accessible by people using assistive technology devices. Form elements include information, fields, buttons, data entry boxes, radio and check boxes, tabs, access keys, and input control buttons.

Forms should be designed in a logical order and all form elements need to be able to be read with assistive technology devices. Labels should be in close proximity to the input field. There should be text labels on all form controls. Form elements need tags for identification and for groups in categories. Forms should be keyboard accessible.

Forms have become an integral part of interactively using a Web site. There are several things that can be done to make forms more accessible for disabled users. The following should be considered best practices when developing accessible forms.

Labels

The most common technique for making forms more accessible is using label tags to identify each form element (text box, check box, radio button, etc.). Labels can appear before or after the form element, however should remain consistent if possible. It is recommended to attach label using the "for" element, since it allows more flexibility in the placement of the label.

Sample Form Label - Text Box

<label for="FieldID">Text Box Label</label>

<input type="text" name="textfield" tabindex="1" id="FieldID" />

<!-- note that the "for" is linked to the field id-->

Labels can be used for all form elements: checkboxes, radio buttons, select lists, and buttons (though labels are not required for buttons).

Sample Form Label - Check Box

<input type="checkbox" name="checkthis" value="checkbox" tabindex="2" id="checkbox2" />

<label for="checkbox2">Check box item</label>

<!-- note that placing the label tag after the form element displays the tag after the element-->

Tab Index

The purpose of the tab index is to specify the order in which form elements will be selected when the user presses the tab key. Form elements can be organized so that users can easily tab through the form in any order you wish.

Click in the First Name field, below, and press the tab key to see how the tab index works.

How to add a tabindex to an input element:

<label for="label4">Address</label>

<input name="address" type="text" id="label4" tabindex="3" size="35" />

Required Fields

Sometimes it is necessary or desirable to differentiate different elements in a form, such as to mark a required field.

Asterisks have become an undocumented standard among Web users as denoting a required field. Asterisks are okay, so long as they are identified as marking a required field BEFORE the start of the form. A simple sentence such as "An * indicates a required field" should suffice.

Also, the asterisks need to be with the label they are identifying, as so:

<label for="foo">* Name</label>

Not like this:

<span class="asterisk">*</span> <label for="bar">Name</label>

If the form uses tables, the same applies for cells and whatnot. The screen reader needs to be able to read everything in the correct order so the asterisk is associated with the correct form element.

Using asterisks also allows the use of colors if the user so desires, but it is certainly not necessary. Bright colors, such as red, may become a user experience issue because they can be misconstrued into something else, such as a field that requires attention after a user submits a form. A good recommendation would be blue or a hue thereof.

Also, use a consistent indicator. If you use an asterisk, be sure to use just an asterisk in the text and label, and not put parenthesis around it " ".

Screen readers may read different symbols in different ways and potentially confuse users.

Other Resources

Was this helpful?
0 reviews

Details

Article ID: 43469
Created
Fri 12/1/17 2:51 PM
Modified
Fri 5/14/21 10:00 AM