Designing Accessible Forms

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.

There are two things that we can do to make navigating forms easier:

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

The following discussion describes some useful HTML tips.

Create labels for form elements using the <label> tag

When a screen reader user is navigating through form elements on a web page, the screen reader software will identify the type of form element that is currently selected and will provide them a means to complete, select, de-select, or submit that form element. However, when navigating through the form, there is often no indication as to what information is desired with the particular form item. For instance, if the user navigates to a text box using the Tab key, there may be no indication as to whether the text box is where they should submit their name, address, phone number, a message, or any number of other things.

This can be solved by associating form labels to form items on the page. The label should almost always be located adjacent to the form item itself. When a screen reader accesses a form item that has a <label> tag associated with it, it will read the text within the <label> tag and indicate the type of form item it is (e.g., "First Name. Text box" or "Age. Check box"). Labels are needed for all form elements, except for buttons; the screen reader reads the text that is on the button (e.g., "Submit button").

Group related form elements using the <fieldset> tag

When you have several associated form elements, they can be grouped together by something called a fieldset. Each fieldset should have a legend. The legend is the text that describes the associated group of form items.

For example, a fieldset might be defined in a form asking for Internet Speed followed by checkboxes for various speeds. Visually, a fieldset is defined by the border that surrounds the three radio buttons and their adjacent labels. The legends of the fieldsets is the phrase Internet Speed. In this example, the label for the first radio button in the Internet Speed fieldset is 28.8. The fieldset is important, because without it, if the screen reader were to access the checkbox, it would read something like, "Twenty eight point eight. Not checked". While this is valuable, it gives no description of what the data is for. Is 28.8 referring to Internet speed, age, height, IQ, or something else? With the fieldset in place, the screen reader would read something like, "Internet speed: Twenty eight point eight. Not checked." Fieldsets should be used when there are groups of check boxes or radio buttons. They can also be used for other form items that are associated.

A Somewhat Useful Form


Computer Type

Internet Speed

This page is partially sourced from (Creating Accessible Forms: Screen Reader Form Accessibility).