Guideline 3
Provide access to forms for users who are blind or visually impaired.
Forms are extremely useful for gathering all kinds of information. Web sites often present users with a log-in page that requires that a name and password be entered into text fields. Radio buttons or check boxes are regularly used to determine user preferences, and users can answer test questions by typing answers into text fields. Forms can present problems for blind users when the elements aren't marked up in a manner that makes them accessible to screen-reading software. A screen reader might announce the presence of a text field, for example, but if it isn't labeled correctly, the user won't know what information to enter into the field.
To insure complete access to information, use properly marked-up HTML forms instead of PDF forms. Some screen readers can access information in properly marked-up PDF forms, but support is inconsistent and unreliable at this time.
A standard method for labeling and identifying form elements will provide compatibility with assistive technologies that support the standard. One such standard is included as part of the W3C's HTML 4.0 (or higher) specification.
Checkpoint 3.1
Label all form elements and controls so they can be recognized by assistive technology, such as a screen reader.
Technique 3.1.1
Label all text fields, text areas, drop-down menus, checkboxes and radio buttons.
Each edit field or text area should have a label associated with it that makes it clear what information to type into the box. A simple method is to use HTML's <label> element. Below is a screen shot of a form from the PIVoT site.
As a screen-reader user navigates this form, either by reading the entire page or by tabbing from field to field, the software will speak each label aloud. This is usually enough information for the user to know exactly what to type into the edit field itself. JAWS (a popular PC-based screen reader), for example, announces "First Name edit, Last Name edit," etc. The author has taken a simple approach and associated the visible label with the edit field, as shown in the markup below:
<label for="firstname">First Name</label><input type="text" name="firstname" id="firstname" /><label for="lastname">Last Name</label><input type="text" name="lastname" id="lastname" />Text areas, where users can enter longer strings of text, can be marked up in a similar fashion:
<label for="comments">Please tell us what you expect to learn from this course.</label><textarea rows="7" cols="50" name="comments" id="comments"></textarea>In some cases it may be desirable to give the user more information than is available in the visible label. In these situations, the easiest method is to use the title attribute to supply additional information:
<input type="text" size="15" title="Enter your full name, including middle name" ... />You can also use in-line styles to provide a hidden label for the screen reader to announce. There are two ways to do this. The first uses the property display:none, as shown below. First, define a style within the style element in the <head> of the document:
<head><style type="text/css">.hidelabel { display: none; }</style></head>In the body of the document, enter the text you want the screen reader to announce and place it within a <span> that refers to the style defined in the <head>:
<span class="hidelabel"><label for="fullname">Enter your full name, including middle name</label></span><input type="text" name="fullname" id="fullname" />The same thing can be accomplished with the property visibility:hidden-define the style in <head> and then refer to the style at the appropriate place in the HTML. In both cases the screen reader will announce text which is invisible to sighted users. However, Netscape 4x does not support the visibility property properly (it displays the text rather than hiding it). Therefore, use of the display property is currently preferred over the visibility property. Note that the display property only works because current versions of screen readers do not support Aural Style Sheets (ACSS). If ACSS was supported, the visibility property would be preferable, since the display:none would indicate to the screen reader that the text should not be read. Currently, the safest method may be to use the title attribute as described above. Once browser and assistive technology support for style sheets conforms to existing recommendations, however, it will be best to use the visibility property.
Drop-down menus (also known as select menus or combo boxes) can also be marked up with label and id:
<label for="graduation_year">Please tell us when you expect to graduate.<br></label><select name="graduation_year" id="graduation_year"><option value="">Expected year of graduation</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option></select>In this case, a screen reader will read the label ("Please tell us when you expect to graduate"), then the default text of the drop-down menu ("Expected year of graduation"), and will finally describe the form element itself: "Combo box, one of five. To change the selection, use the arrow keys." The user may then open the menu and use the arrow keys to make a selection.
To prevent the screen from changing unexpectedly, drop-down menus should never automatically direct the user's browser to a new Web page (by using the onchange event handler, for example). Blind users or sighted people who use the keyboard instead of a mouse must be able to arrow through the entire list of choices before the action is executed. Instead, it's best to require the user to make a selection and then press a button to invoke the action. For example:
<select name="menu"><option>Select a destination</option><option value="http://myschool.edu/admin">Administration</option><option value="http://myschool.edu/english">English Department</option><option value="http://myschool.edu/physics">Physics Department</option></select><input type="submit" name="submit" value="Go" ... />Here, the user must make a selection from the list and then press the Go button in order to jump to that page. Automatically redirecting the user would cause the browser to act on the first item selected from the list-in this case, a keyboard-only user would always be directed to the Administration department.
Form controls, such as radio buttons, checkboxes and buttons, also need appropriate labels so users can identify and manipulate them. In the form below, three radio buttons are available. Each is associated not only with its adjacent label but also with its group identifier ("Please select a user type"), as shown below.
<td>Please select a user type</td>...<input type="radio" id="student" name="usertype" value="student" /> <label for="student">Student</label><br /><input type="radio" id="faculty" name="usertype" value="faculty" /> <label for="faculty">Faculty</label><br /><input type="radio" id="staff" name="usertype" value="staff" /><label for="staff">Staff</label><br />In order to ensure the group identifier is properly associated with the appropriate information, always place it before that information. (For example, in a multiple-choice exam don't place the question after the radio buttons identifying the answers.) Also note that the radio buttons themselves have been positioned before their labels. This approach ensures that all screen readers associate the proper labels with their respective form controls.
Technique 3.1.2
Label all buttons.
Buttons, such as those that submit user information or invoke an action, must also be labeled. If text buttons are used, set the value to describe the button's function. If the button is a graphic, use alt-text that states what the button does-for example, "Search", "Go!", "Submit", etc. Either type of button can be easily made accessible. Here is an example taken from the first form described in technique 3.1.1, illustrating the use of a text button.
<input type="submit" name="submit" value="Submit" /><input type="reset" name="reset" value="Reset" />Below is a code sample from a form that uses a graphic button and descriptive alt-text.
<tr><td><label for="search_text">Search</label><input type="text" name="search_text" id="search_text" /></td></tr><input type="image" src="images/search.gif" alt="submit search" name="search" width="53" height="19" border="0" />More information about creating accessible forms can be found in the Web Content Accessibility Guidelines.