Policy & Procedures
Tools & Resources
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.|
|1. Not using the <label> tag or alt attribute|
|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.
|1. Associate a label with each form input element|
|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
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|
|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>
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.
|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.
Thus, when the user hits ALT-s, the forms Submit button will essentially be "clicked."
|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.|