How to Create Accessible Forms

There are two things that we can do to the previous table to fix it:

Put the labels adjacent to their controls
Use HTML markup to associate the controls explicitly with their labels

One way to fix the accessibility problems of the above table would be to reduce the table to two columns, placing the labels directly to the left of the form elements, then adding in the appropriate HTML tags (see the HTML markup on the next page):

First Name
Last Name
Middle Initial
Home Phone
Work Phone
Country
Computer Type Mac PC Linux	Internet Speed 28.8 56k T1

The above form can still be improved visually, no doubt, but the person using a screen reader should not have trouble with it. In the HTML, I added a fieldset tag around the radio buttons groups. In Internet Explorer and Netscape 6 you can see the fieldset as a box around them (Netscape 4.x does not support the fieldset tag). I also added the label tag to each of the labels here. With the label tags present, even a poorly organized form (such as the bad example referenced above) can be rendered in a semi-intelligent way to a modern screen reader. The screen reader will automatically read the correct label at the appropriate time when the person tabs through the form. However, if the person is just listening to the form all the way through (without using the tab key), the labels will NOT automatically be read with the corresponding controls. The lesson to be learned here is that forms should be 1. well organized, with labels adjacent (next to) their controls and 2. well marked-up with the appropriate HTML tags.

Even if the screen reader is incapable of reading the label, fieldset, and legend tags that I added here (as is the case with some older screen readers), the improved table above is organized in such a way as to make it possible to figure out which labels go with which controls. At the time of this writing, IBM Home Page Reader was the most complete in its support of form accessibility features. JAWS supported the label tag, but did not read the legend tag when navigating through a form with the tab key, although JAWS did read the information when the tab key was not being used. Perhaps the next version of JAWS will have more complete support for form elements.

Let's hear what the form sounds like now, with the improvements that we made:

Home Page Reader, reading the form straight through. Choose a format: WAV | MP3 | RealAudio | Read Transcript
Home Page Reader, using the tab key. Choose a format: WAV | MP3 | RealAudio | Read Transcript

To get a better idea of what I did "behind the scenes, let's take a look at the HTML. Next Page

Top of Page || Return to Tutorials List

This Tutorial is reproduced on this site with the kind permission of WebAIM. For additional information and resources on web accessibility please visit http://www.webaim.org.