Understanding and Applying
Section 508 Standards

Using Online Forms:

(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.

Simple steps to good form design include:

• Associate a label with each form input element.
  For example, a text box --
  
  Enter Your Name:
  
  HTML Code:
  <label for="name">Enter Your Name:</label>
<input type="text" name="username" id="name">

  The "for" attribute identifies which element the label describes. A corresponding "id" attribute should be in the element tag and the label should appear as close to the form element as possible.
  
• Order the form using the "tabindex" attribute. The tabindex determines the order that fields will be activated when using the TAB button to move through the form. For each element in the form, include a tabindex.
  
  Example:
  Email Address:
  Name:
  
  HTML Code:
  <label for="email">Email Address:</label>
<input type="text" name="emailaddress" tabindex="2" id="email">
<br>
<label for="name">Name:</label>
<input type="text" name="name" tabindex="1" id="name">
  
  Notice that even though the email address input appears above the name input, we can reorder the form by using the tabindex. Thus, users who scroll through the form using their TAB button will first arrive at the Name box then the Email Address box. However, in most cases, users will expect that the form order will be top-down, and you should set your tabindex in that order.
  Be sure to add a tabindex to all form elements, including the SUBMIT and CLEAR buttons.
  
• Setup alternate keystroke commands for form processing.
  Using the "accesskey" attribute allows you to set keystroke commands for most elements on a web page, including links and form elements. Keyboard commands help insure that users do not have trouble finding an alternate to the mouse "click" to select an option or submit a form.
  
  Example:
  Submit
  
  Code:
< label for="Submit">Submit</label>
<input type="submit" name="Submit" value="Send this form" accesskey="s" tabindex="3" id="Submit">

Next