N. Form Fields

Checkpoint (N) states that when electronic forms are designed to be completed online, 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.

Required Form Guidelines

If an input box is intended for receiving a user's last name, the web developer must be careful that the words "last name" (or some similar text) appear near that input box or are somehow associated with it. Although this may seem like an obvious requirement, it is extremely easy to violate because the visual proximity of a form element and its title offers no guarantee that a screen reader will associate the two or that this association will be obvious to a user of assistive technology.

Example

Name:


Date of Birth:


(example: 21)
(example: 1975)

Favorite colors (pick up to 2):





Are you an employee of Missouri State? 

    

While the relationship between the titles "First Name:" or "Last Name:" and their respective input boxes may be obvious from visual inspection, the relationship is not obvious to a screen reader. Instead, a screen reader may simply announce "input box" when encountering each input box.

Note: Notice how the favorite colors section has the check boxes in one cell in a table and the labels are in an adjacent cell. Without labels defined, a user using a screen reader will hear something like "Checkbox, Checkbox, Checkbox, Checkbox, Checkbox, Checkbox, Red, Blue, Green, Yellow, Orange, Other." A visual reader can distinguish the visual relationship of the checkbox and the labels, but without that visual observation, it is not clear which input box correlates to what label. Adding labels will read it as "Red, Checkbox, Blue, Checkbox, Green, Checkbox, Yellow, Checkbox, Orange, Checkbox, Other, Checkbox" despite being split into separate cells of a table.

Checkpoint (N) Techniques

See the Checkpoint (N) techniques for this section on how to make an accessible electronic form.

Recommended Form Field Grouping

To help user navigate the fields even easier, group related sets of fields. Using grouping can assist both visual and non-visual users of your web site logically group certain form fields together. Note: Most of these additional tags can only be added directly from HTML code.

Explanation

<tabindex>
To create a logical tab in order to the entry fields.
<fieldset>
To define a relationship between a set of input fields.
<legend>
To caption the fields you group with the <fieldset> tag.
<optgroup>
To group options in a long menu created with the <select> and <option> tags.

Example

Personal Information

 
 

    

<FORM action="FMPro" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="Firstname">First Name:</label>
<INPUT id="firstname" name="firstname" type="text" tabindex="1">
<label for="Lastname">Last Name:</label>
<INPUT id="lastname" name="lastname" type="text" tabindex="2">
<input type="submit" value="Submit" name="Submit">
<input type="reset" value="Clear" name="Clear">
</fieldset>
</FORM>

Recommended Design Techniques

After making all of the form accessible to an user, assist in filling out and submitting the form by:

  1. Designing your form to only require text-based input. This means eliminating those drop-down lists for which the user is required to use a mouse. Such as drop down boxes that allow multiple selections.

  2. Don’t configure the fields with default text entry, since a user expects to encounter blank space for a field so he or she can enter his data.

Alternative Ways to Satisfy Checkpoint (N)

If you can’t make a particular element of the form accessible, and this prevents it from meeting the 508 standards provide an alternate form which can be downloaded, scanned or printed if necessary, and submitted.

This page adopted from the Access Board 508.