Section 508 Compliance

HTML Coding Tutorial

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.
Explanation: When users fill out a long form, depending on how the form is organized, they might become disoriented as to what field they are filling in at the current moment. Also, if an error occurs in the form that the user needs to change, where the error occurred might not be easily understood.
Importance: HTML forms pose accessibility problems when web developers separate a form element from its associated label or title. For instance, 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.

Bad Example

1.  Not using the <label> tag or alt attribute
Table and forms 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. Thus, the user may not know what each input box is representing.

<FORM>
<TABLE>
<TR>
<TD><B>FIRST NAME: </B></TD>
<TD><INPUT TYPE="TEXT" NAME="FIRSTNAME"></TD>
</TR>
<TR>
<TD><B>LAST NAME: </B></TD>
<TD><INPUT TYPE="TEXT" NAME="LASTNAME"></TD>
</TR>
</TABLE>
<P>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
</FORM>


Good Examples

1.  Associate a label with each form input element
Table and forms The "for" attribute identifies which element the label describes the the corresponding "id" attribute helps math up the input type with what needs to be entered. So the first label tag tells the user that when you come across the id="first in an input type, it refers to First Name

Note: The label tag and for attribute must appear before the id attribute

<FORM>
<TABLE>
<TR>
<TD>
<label for="first"<>B>FIRST NAME: </B></label>
</TD>
<TD><INPUT TYPE="TEXT" NAME="FIRSTNAME" id="first"></TD>
</TR>
<TR>
<TD>
<label for="last"><B>LAST NAME: </B>
</TD>
<TD><INPUT TYPE="TEXT" NAME="LASTNAME" id="last"></TD>
</TR>
</TABLE>
<P>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
</FORM>

Instead of using the <label> tag, you can instead use the alt attribute to describe the input area.

2.  Order the form using the "tabindex" attribute
Table and forms 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.

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

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

<label for="Submit">Submit</label>
<input type="submit" name="Submit" value="Send this form" accesskey="s" tabindex="3" id="Submit">

Thus, when the user hits ALT-s, the forms Submit button will essentially be "clicked."

Do-It-Yourself Fixes

Again, complying with this section of accessibility is very easy. Remember to always add the label tag whenever you are describing an input type; Add the tabindex attribute so users who tab through the form are able to navigate the fields; and finally add the accesskey attribute so users don't have to rely on a mouse click.