Creating Accessible Forms

Donald F. Evans

January 12, 2007

Question

How do I make HTML Forms Accessible for Screen Reader users?

Answer

1. Use TABINDEX to create a logical tab order to each form. It is good practice to specify a tab order to form fields. It may not always be necessary but should be used to create an explicit method for moving through the form.

2. Each INPUT tag within a FORM MUST have a LABEL tag. Use ID in the input tag and FOR in the label. See the example below

3. It is good practice to provide keyboard shortcuts using the accesskey attribute to important links including those in client-side image maps, form controls, and groups of form controls. 

<FORM action="submit" method="post">
<P>
<LABEL for="user" accesskey="U">name</LABEL>
<INPUT type="text" id="user">
</FORM>

4. Divide large blocks of information into more manageable groups where natural and appropriate. When form controls can be grouped into logical units, use the FIELDSET element and label those units with the LEGEND element.

5. Avoid the use of dynamic combo boxes that automatically activate a highlighted option. User must be able to review all choices in a combo box by pressing up/down arrow keys.

6 .Hint:
label {font-weight:bold;cursor:hand:}
in your style sheet will make the entire label clickable, which is helpful when using radio buttons, or check boxes.

Example: 

<FORM action="http://example.com/adduser" method="post">
<FIELDSET>
<LEGEND>Personal information</LEGEND>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname" tabindex="2">
...more personal information...
</FIELDSET>

<FIELDSET>
<LEGEND>Medical History</LEGEND>
...medical history information...
</FIELDSET>
</FORM>
</pre>

Example:
<pre>
<fieldset id="personal">
    <legend>Personal Information</legend>
    
<label for="fName">First Name:</label> <input type="text" name="first_name" id="fName"/>
<label for="lName">Last Name:</label> <input type="text" name="last_name" id="lName"/>
<label for="age">Age:</label> <input type="text" name="user_age" id="age"/>
<label for="birthMonth">Birth Month:</label> <select name="user_birth_month" id="birthMonth">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>

<fieldset id="eyeColor">
<legend>Eye Color</legend>
<ul>
	<li><input type="radio" name="eye_color" id="blueEyes"/> <label for="blueEyes">Blue</label> </li>
	<li><input type="radio" name="eye_color" id="brownEyes"/> <label for="brownEyes">Brown</label></li>
	<li><input type="radio" name="eye_color" id="greenEyes"/> <label for="greenEyes">Green</label></li>
	<li><input type="radio" name="eye_color" id="otherEyes"/> <label for="otherEyes">Other</label></li>
</ul>
</fieldset>
</fieldset>

Other Resources