§1194.22(n) 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.

Checkpoint
Does the page include electronic forms to be submitted?

Explanation
Any mechanism that submits user-entered data through a website is considered an electronic form.

Checkpoint
Does the page contain a form inside a table that does not accommodate assistive technology?

Explanation
Developers will often use tables to align an electronic form in a way they believe makes sense to sighted users. If necessary, you can check to see if the form elements are inside a table by reading through the page's source code.

Guidelines
Those using assistive technology must be able to determine which form element goes with the text reference that describes its purpose. Not all assistive technologies handle forms inside a table the same way, so the brief code samples below will illustrate the best approach to alleviate disorientation-related issues until assistive technology has caught up with the standards.

In the following example, a web browser will render the text references in the left column, and the form fields in the right column. A sighted user would notice that each text reference is lined up horizontally with its intended form field.

<table>
   <tr>       <td>First Name</td>
      <td> <input type="text" name="firstname" size="6"></td>
   </tr>

   <tr>
      <td>Last Name</td>
      <td> <input type="text" name="lastname" size="6"></td>
   </tr>
</table>

Assistive technology will read aloud: "First Name," then the first name form field, then "Last Name," then the last name form field.

This next example is how NOT to place a form inside a table.

<table>
   <tr>
      <td>
         First Name<br> Last Name
      </td>

      <td>
         <input type="text" name="firstname" size="6"><br>
         <input type="text" name="lastname" size="6">
      </td>
   </tr>
</table>

To a sighted user, the screen layout appears identical to the first example, but assistive technology will read aloud the text references of "First Name" and "Last name" before it even gets to any of the form fields; by the time focus is placed on the form fields, a visually impaired user will have lost track of which field is for what.

The W3C page contains more detailed examples of working with forms.

Checkpoint
Is there a label attribute for each field element?

Explanation
This checkpoint is an advancement of linking text references with their related form elements, but is not meant as a substitution for proper layout practices when forms are placed inside tables.

Guidelines
Assistive technology (e.g. screen reader) is the ideal tool to test this checkpoint.

Each form element should contain an id attribute within the <input> tag. Its related text reference should be surrounded by the <label> tag, which must contain a for attribute that is identical to the <input> tag's id attribute.

<label for="fname">First Name</label>
<input type="text" name="firstname" id="fname">

The W3C page contains more detailed examples of using label attributes.

Checkpoint
Does each form element contain a tab index?

Explanation
Users who rely on assistive technologies, or who cannot use a mouse, must be able to tab from one form element to another in order to successfully make use of electronic forms.

Guidelines
Place a tabindex attribute inside each <input>, <textarea>, <select>, and <button> tag, then number them in the order which you want the user to access them.

<input type="text" name="firstname" id="fname" tabindex="1">
<input type="text" name="lastname" id="lname" tabindex="2">
<select name="state" id="state" tabindex="3">
     <option…>
     …
     <option…>
<textarea name="comments" rows="20" cols="80" tabindex="4"></ textarea >

In the above example, tabbing will change the focus from the first name field, to the last name field, then to the state dropdown list, then to the comments text area.

Explanation
Radio buttons and checkboxes that have more than one option, as well as multiple form fields that are related to only one text reference (e.g. a field that is split into 'first name,' 'middle initial,' and 'last name,' but is only listed as: User's Name) can be considered as having multiple input elements.

Guidelines
For a form input field where several inputs are related to one text reference (e.g. a User's Name field that is split into 'first name,' 'middle initial,' and 'last name'), each <input> tag must contain a title attribute that explains the specific information that should be entered, making sure that the text reference is not merely assumed.

For a radio button or checkbox where several options are given (e.g. a question about compliance to a corporate standard that has 'yes,' 'no,' and 'n/a' as possible answers), the tag must contain a title attribute that tells what the option is in reference to and fully explains what checking that option means.

Checkpoint
Does the form contain instructions that are inaccessible to certain users?

Explanation
Electronic forms generally have some type of instructions; a "required field" indicator is a type of instruction, as is showing the proper format for entering dates.

However, some organizations might need to place more detailed (and more lengthy) instructions next to one or more form element. A sighted person can handle lengthy instructions that are on the same page as the form because they can move their view back and forth at any time. However, those who use assistive technology, or those who cannot use a mouse, must backwards tab their way back through the form to reread an instruction, then tab their way back to the form element they left off at.

Guidelines
For forms with lengthy policy or instruction verbiage that is not apart of a specific form element but instead relates to the entire electron form in general, place these instructions above the form, not below it.

Brief individual form element instructions, such as a "required field" indicator or a date format, must be placed above or to the left of its related form element, but not below.

For forms in which more than one input element has a unique set of lengthy instructions, consider placing an anchor link next to the element (or using the text reference itself as the link) that leads to the relevant verbiage, and an anchor link on the verbiage page that leads back to the related form element. However, since sending the user to a different page within the same browser window will cause assistive technology to lose the user's place when they return to the form, it is strongly recommended that such instructions be displayed in a new browser window. Keep in mind, however, that, even if you anchor the instruction page's Close Window link directly to the related form element, some assistive technologies will still lose the user's place by returning to the beginning of the forms page.