This page will examine the steps required to ensure that your HTML forms are accessible. Here are the guidelines for making your HTML forms accessible:
An understanding of the following tags and elements will assist in your creation of accessible HTML forms:
When creating forms, most developers associate the instructions (or label) to a form control by placing the instructions immediately before (or above) the control. HTML also allows a way of formally defining the relationship between the instructions/label of a control and the control itself using the "label" tag.
The "label" tag links the description provided in the "label" to the form control via the form control's "id" attribute. Thus when using the "label" tag, you must add an "id" attribute to your form controls if they are not already present.
While the "label" tag has yet to be supported by any Web browser software to date, marking your HTML with this tag ensures that it will be compliant and accessible for future Web browsers. In addition to explicitly marking the form controls' labels via the "label" tag, you should also create a logical association by placing the instructions in reasonable proximity (typically immediately preceding or following) to the form control.
<label for="full_name">Full
name:</label>
<input type="text" name="full_name" id="full_name"
size="40" tabindex="1">
<label for="address">Mailing address:</label>
<input type="text" name="address" id="address"
size="60" tabindex="2">
Whenever you have a large number of controls on the form or if the form has logical sections, you should use "fieldset" tags to create groupings. Fieldsets create bounding rectangles around your form controls and allow you to specify labels to apply to groups.
<fieldset>
<legend>Personal Information<legend>
<p><label for="full_name">Full name:</label>
<input type="text" name="full_name" id="full_name"
size="40" tabindex="1"> </p>
<p><label for="address">Mailing address:</label>
<input type="text" name="address" id="address"
size="60" tabindex="2"> </p>
<p>What is your gender?
<input type="radio" name="gender" id="g1"
value="Male" tabindex="3"><label for="g1">Male</label></input>
<input type="radio" name="gender" id="g2"
value="Female" tabindex="4"><label for="g2">Female</label></input></p>
</fieldset>
A "select" form control is useful when you want the user to choose from a set of options using a "drop down" list of items. Unfortunately, when the control contains many choices, the user can be overwhelmed with the options. "optgroup" tags are useful to create a logical connection between subsets of the choices, grouping similar items within the group and allowing the user to more easily navigate the choices. It is recommended that you use the "optgroup" tags whenever similar items can be logically grouped together.
<label for="major_specialization">What
is your major and specialization?</label>
<select name="major_specialization" id="major_specialization"
size="5" tabindex="1">
<optgroup label="Business">
<option value="Accounting">Accounting</option>
<option value="Economics">Economics</option>
<option value="Finance">Finance</option>
<option value="Management">Management</option>
</optgroup>
<optgroup label="Arts">
<option value="Education">Education</option>
<option value="English">English</option>
<option value="Music">Music</option>
<option value="Philosophy">Philosophy</option>
</optgroup>
<optgroup label="Sciences">
<option value="Applied Biology">Applied Biology</option>
<option value="Computer Science">Computer Science</option>
<option value="Mathematics">Mathematics</option> <option
value="Physics">Physics</option>
</optgroup>
</select>
By pressing the Tab key, users can navigate through your form from top to bottom. Depending upon your needs, though, you can specify a different order. The W3C guidelines require that the tab order be explicitly defined for all Web forms.
To create a tab order on your form, add the "tabindex" attribute to all of the form's controls. Begin with the value of 1 and increment for each control. The control with the value 1 will be visited first, then the control with the value 2, etc.
<label for="full_name">Full name:</label>
<input type="text" name="full_name" id="full_name"
size="40" tabindex="1">
<label for="address">Mailing address:</label>
<input type="text" name="address" id="address"
size="60" tabindex="2">
Easy navigation is an important goal of properly-formatted, accessible Web-based forms. Access keys, or keyboard shortcuts, are one way of achieving this goal. When a user types in the shortcut key combination, the webpage "jumps" to the form control, and this control is made "active" so that the user can interact with the control.
Besides establishing the keyboard shortcut using "access key", you should also provide instructions to inform the user that the shortcut exists and how to use it. This can be done on a "how to use this site" page of your website if the shortcuts are standard across multiple webpages, or the shortcut commands can be displayed within each webpage.
It's also important to note that access keys are different depending on browser and platform, potentially causing them to be unreliable. For Internet Explorer, Hitting alt and the access key will usually work. For Macs, it is generally control and the access key. For Firefox, you must hit alt, shift, and the access key. Because access keys are not an absolute requirement for accessibility, it is not completely necessary to explain this in your page. However, doing so would provide the maximum benefit of including them.
To add a keyboard shortcut to a form control, add the "accesskey" attribute to the input tag.
<label for="full_name">Full name
(Alt-N):</label>
<input type="text" name="full_name" id="full_name"
size="40" tabindex="1" accesskey="n">
<label for="address">Mailing address (Alt-M):</label>
<input type="text" name="address" id="address"
size="60" tabindex="2" accesskey="m">
It is common to associate control events such as the "onclick" event to scripts that validate forms and submit their content to the Web server. Often these events use a button form control and are activated by interaction with the webpage from a mouse. However, some users do not utilize a mouse; your form must accept non-mouse events as well.
For every control that has a mouse-related event handler, you must add a corresponding keyboard-related event handler; both of these handlers should reference the same script to be executed. The ensure accessibility for non-mouse events, use "onkeypress" in conjunction with "onclick."
<input type="button" name="submit_button"
onclick="validate" onkeypress="validate">
When you use a "textbox" or "textarea" form control, you should have default text (i.e. text that fills in the control) to ensure that the control will function properly with assistive technology.
<label for="full_name">Full name:</label>
<input type="text" name="full_name" id="full_name"
size="40" tabindex="1" accesskey="n" value="Please
enter your name">
<label for="special_instructions>Please provide any additional special
instructions:</label><br>
<textarea name="special_instructions" id="special_instructions"
rows="10" cols="80" tabindex="10" accesskey="i">
Enter special instructions here </textarea>
It is possible to use graphical buttons within forms (i.e. for the "submit" and "reset" buttons). However, some users cannot see or having difficulty seeing graphics; this may be due to disability or technology (i.e. voice-recognition web access, text-based web browser). You must have an alternative, textual equivalent for all graphics. To make any graphical buttons within a form accessible, use the "alt" attribute of the "input" tag.
<input type="button" name=submit src="button_image.jpg"
alt="Submit the information">
The next page provides a lab on creating accessible HTML forms.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
HTML
Forms in HTML
Previous Page
