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:
The following discussion describes some useful HTML tips.
<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").
<fieldset> tagWhen 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.
This page is partially sourced from http://www.webaim.org/techniques/forms/screen_reader.php (Creating Accessible Forms: Screen Reader Form Accessibility).