How to Create Accessible Forms

How to create accessible forms

Place form labels adjacent to (next to) their corresponding form controls.
Provide markup for labels, using the <label> tag.
Group related form elements using the <fieldset> tag.
Provide a title or "legend" for each field set using the <legend> tag.
Group radio buttons in a <fieldset> tag, and provide a <label> for each checkbox.
Group checkboxes in a fieldset tag, and provide a <label> for each checkbox.
Always provide a button to submit forms. Don't use JavaScript to automatically submit them.

When we talk about the accessibility of forms, we are usually referring about their accessibility to screen readers and the visually impaired. People with other types of disabilities generally are less affected by "faulty" forms that are missing some of the HTML accessibility features. I should note, however, that everyone benefits from a well-organized form, especially those with cognitive disabilities. Visual layout can be important to those who have sight. The less explanation that a form needs, the better. Still, the focus of this exercise is mainly to make a form that can be read by a screen reader.

One of the most common ways of navigating through a form is using the tab key. A person fills in one field, hits the tab key, fills in the next field, and so on, until the end of the form is reached. For visual users, this is an easy thing, because the labels are placed in such a way that they appear to be linked to their corresponding controls. For a blind person using a screen reader, however, visual layout is not going to be of much help. There has to be some way of linking the label with its control in the markup. Let me give an example to demonstrate the possible confusion that can occur with a form that is poorly marked-up and poorly organized.

[skip over confusing table]

First Name	Email		Home Phone
	Middle Initial	Computer type	Work Phone
Last Name		Mac PC	Country
	Internet speed 28.8 56k T1

Visually, this table makes at least some sense (even if it is a bit confusing). For the most part, a person with sight can figure out that the "First Name" label goes with the control beneath it, and that the "Email" label goes with the the control to the right of it. What happens when we remove the colors and strip it of its formatting, though? A screen reader will read the above table in this order:

1	2		3
4	5	6	7
8	9	10	11
12	13		14

Even though a screen reader will not render the colors that I have shown, I left them in for comparison purposes. If you compare the reading order to the visual order in the table above it, you can see that the labels and the form elements do not match up very well. The person using the screen reader is likely to become very confused, and may fill in the form incorrectly, typing information in the wrong places.

Let's hear what the form sounds like to a screen reader:

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

Now that we know what some of the potential problems with forms are, lets try to fix the table above. 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.