Creating Accessible Forms
Forms are an important part of any web site. Forms allow for interaction between a site and people visiting or using the web site in the shape of information collection - either for dynamic re-processing (aka AJAX), or simply used as a submission tool (feedback or reporting form). In order to ensure the widest possible usage of forms on your web site, the forms must be created with accessibility and usability in mind. There are a number of factors that contribute to the accessibility and usability of forms, including layout, labeling and grouping.
Form layout
- Best Practice: All important information for forms, such as form instructions, must be presented before the form itself. The submit button must be the last form element contained within a form.
Screen readers and other adaptive technology access forms and other HTML content in a linear order. Once a screen reader encounters a submit button, the user generally expects that the form should be submitted. In cases where optional fields, such as radio buttons for changing search criteria, are presented after the submit button, the screen-reader user may not be aware that the options even exist, or will discover them after-the-fact.
Similarly, instructions for a form must be presented before the form. This includes statements about how required fields are denoted or information that the person should be aware of before submitting the form. For example, "This quiz will take approximately 20 minutes" or "In order to complete this form you will require your staff number..."
Labeling form fields
- Best Practice: All form fields must be associated with their labels using the <label> HTML tag. If a form cannot be labeled, it must include a title that explains in brief what the form field is.
Form fields always have a text-based label indicating what information should be entered into the form field, or what a radio button/check box represents. These labels need to be associated with the actual form field for greatest accessibility. This extra information provides two advantages:
- It explicitly associates the field with the label (or provides the equivalent information through the title). This means that when a person is filling out the form using a screen reader, the screen reader will tell the person what the field represents. Without this explicit association, the screen reader software must "guess."
- The label text becomes "clickable". When you click on the label, the form field it is associated with receives the focus. In the cases of radio buttons and check boxes, this action will select or deselect the form control. This provides a larger "target" area for clicking, making the form more usable to everyone and especially more accessible to those using voice recognition software or people who have a motor impairment.
For example for a Text Input form control, used to collect an email address, your code would look something like:/p>
<label for="email">email address:</label> <input type="text" id="email" size="10" maxlength="30" />(where the "for" attribute corresponds to the "id" attribute)
In some instances, the label element is not picked up by the user-agent or Adaptive Technology. To address this issue, content authors can also add the title attribute to the form input:
<label for="email">email address:</label> <input type="text" id="email" size="10" maxlength="30" title="email address" />Results of tests with two assistive technologies show that:
- JAWS 6.1+ label element and title attribute both work with default reader settings, alt on anything but image attribute fails. If title and label are both present JAWS will favor the label.
- ZoomText 9.0: Label element fails with ZoomText's reader. Title attribute provides most reliable rendering of the purpose of the input.
For this reason we recommend that you use both title and label whenever possible to achieve the most robust coverage.
Mandatory Form Fields
- Best Practice: All forms should clearly indicate which form fields are mandatory prior to the actual form inputs. Avoid cryptic hints such as the use of the asterisk or different colors as the sole means of indicating mandatory information requirements.
- Clear and precise instructions given to the user prior to the form is critical to some end users. One issue to be aware of is that some screen reading software moves into a state known as "Forms Mode", which has an effect of editing or not reading complete instructions embedded within a form.
Grouping form controls
- Best Practice: Form fields that are logically related should be grouped in a field set. If appropriate, the field set should be labeled with a legend.
-
Form fields that are logically related should be grouped together. This makes for a more readily understood form, which also helps to make it more accessible.
A typical contact form might look like this:
<fieldset> <legend>Contact Details </legend> <p><label for="name">Your Name: </label> <input type="text" name="name" id="name" size="20" maxlength="50" /></p> <p><label for="familyname">Family Name:</label> <input type="text" name="familyname" id="familyname" size="20" maxlength="50" /></p> <p><label for="homeaddress">Address:</label> <input type="text" name="home" id="homeaddress" size="20" maxlength="50" /></p> <p><label for="city">City:</label> <input type="text" name="city" id="city" size="20" maxlength="50" /></p> <p><label for="phone">Home phone: </label> <label for="areacode" style="display: none;" > areacode</label> (<input type="text" name="areacode" id="areacode" size="3" maxlength="3" value="650" />) <input type="text" name="phone" id="phone" size="15" maxlength="10" /></p> <p><label for="email">Email address: </label> <input type="text" name="email" id="email" size="20" maxlength="50" /></p> <p><input type="submit" name="submit" value="Submit" /></p> </fieldset>
Using a fieldset (<fieldset>) to group form controls "links" the fields together. In addition to helping people using screen readers, they help other people as well by arranging things logically and grouping them together visually.
