Forms - Checkpoint (n)
The law states:
"When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues."
Different form elements need different kinds of markup to be accessible. The following form elements do not have any functionality but serve as examples.
TIP: Do not use tables to lay out complex side-by-side form elements. This can create confusion for non-sighted as well as sighted users. A best practice is to group common form elements using the fieldset tag.
Buttons
To make regular HTML based forms buttons accessible, remember to use the value attribute. The value of the value attribute will be read by the screen reader technology.
If you use an image as a button, use the alt attribute to match the text in the image or to describe what the button does.
Text Entry Fields
Use the label tag to associate a meaningful text label with every text entry field. The text label is read by screen reader technology thus announcing the meaning of the text entry field that follows it. The text label description should be written in a way to help users understand the type of information they should input into each field. There are two methods for associating text labels with text entry fields.
Method One
One way is to have the input tag encapsulated within the label tag. This method will put the text label right next to the text entry field.
Method Two
If you need to have the text label and text entry field separate, use the for and the id attributes to connect the items together. The id attribute of the input tag gives the form element an identification. The for attribute of the label tag connects the text label to the specific identification that was setup in the input tag. You might need to do this when you are using tables for layout to put the label and text field in different columns or rows.
<label for="lname1">Last Name:</label>
<input name="lastname" id="lname1" type="text" />
<br />
<label for="fname1">First Name:</label>
<input name="firstname" id="fname1" type="text" />
Radio Boxes and Check Boxes
Radio buttons and check boxes work in the same way as text areas do. You can either have the input tag inside the label tag or use the id attribute. Both methods produce the same look.
Method One
<input type="radio" value="male" id="male">
<label for="male">Male</label>
<input type="radio" value="female" id="female">
<label for="female">Female</label>
Method Two
<label><input type="radio" value="female" id="female">Female</label>
Field Set and Legend Tags
Group together multiple form elements that are of related information using the fieldset tag, and label it with the legend tag. For example, group radio buttons or check boxes in the same category. Visually, this makes more sense to viewers, but also, when a screen reader goes through a form grouped with the fieldset and legend tags, it will read the legend followed by the form element within the grouping. The form below will be read as: Personal Information, First Name, Personal Information, Last Name, Hobbies, Sports, Music, Video Games, Reading.
<fieldset>
<legend>Personal Information</legend><br />
<label for="fname">First Name:</label>
<input type="text" name="first name" id="fname"><br />
<label for="lname">Last Name:</label>
<input type="text" name="last name" id="lname">
</fieldset>
<fieldset>
<legend>Hobbies:</legend><br />
<input id="sports" type="checkbox" value="checkbox">
<label for="sports">Sports</label><br />
<input id="music" type="checkbox" value="checkbox">
<label for="music">Music</label>
<input id="video games" type ="checkbox" value="checkbox">
<label for="video games">Video Games</label>
<input id="reading" type="checkbox" value="checkbox">
<label for="reading">Reading</label>
</fieldset>
Drop Down Menus
Dropdown menus which activate as soon as the user selects the item rely on JavaScript and are totally inaccessible to screen reader users. The following dropdown menu is accessible as it requires the user to click on the button in order to activate the form:
By having the ‘Go’ button it allows the form to be activated on the server side (e.g. with PHP or ASP) and not be reliant on JavaScript. Without the ‘Go’ button it would be totally inaccessible.
<form action="">
<p>
<label for="jumpto">Quick links</label><br />
<select id="jumpto">
<option>About us</option>
<option>Contact us</option>
<option>Jobs</option>
<option>People</option>
</select>
<input type="button" value="Go" />
</p>
</form>
Tab Indices
The tabindex attribute arranges the tab order of elements on a web page. When a user presses the tab key, the cursor will move in the order you define. It was most often recommended with the use of form elements.
Initially, it was thought that tab indexing would be helpful to users by allowing them to skip to elements on a page that the page author deemed important to the user. However, in practice, tab indexes have been inconsistently applied and tended to create confusion by taking the user out of the normal flow of the document text. In essence, this creates an alternate "navigation" scheme on a page that presumably already has layout and navigation applied. This can be confusing to a user.
Tab Indices Summary
Web sites on which proper accessibility techniques have been implemented do not require the use of the tabindex attribute.
Access Keys
The accesskey attribute allows your users jump directly to an element on which the accesskey attribute is specified. This technique was often used on form elements to help a user jump between elements. However, the accesskey attribute is no longer considered useful in this context for several reasons:
- Through the proper use of the label tag, form elements are clearly identified, and thus allows all users to more easily tab between and recognize form elements ( tabbing is a common practice).
- Screen reader technologies have advanced to the point of allowing users to use a "forms reading" mode to navigate form elements more easily.
- Screen reader applications use a large number of keyboard shortcuts and access keys could conflict with this.
- Because you (as the web developer) choose the access key combinations that you want available to your users, it is highly unlikely that the combination you choose will be familiar to your users. Your users will not understand the benefit that this is to them nor will they understand how to use them.
- Access keys are typically implemented inconsistently across web sites. This can confuse users.
Access Keys Summary:
The accesskey attribute shouldn't be needed on a web site that uses proper accessibility techniques such as headings, lists, skip links, and proper navigation.
If it looks like access key attributes are needed, then you should examine the larger of issue of why they are needed and consider modifying the page using proper accessibility techniques to eliminate this need.
Helpful Web Sites
Jim Thatcher's online course on forms
WebAIM's tutorial on forms