Design Your Forms for Accessibility

A more comprehensive tutorial on creating accessible web forms will be posted soon on the IT Accessibility site. A common mistake made on web forms is not properly labeling your form fields. The following guidelines should be considered when designing your forms:

• As you are going through a form, a person should be able to tab through the form and fill out all the fields before getting to the "Submit" button.
• Each field in your form should have a well-positioned, descriptive label.
• Use the <label> tag and appropriate id attributes on your form elements. This insures that a screen reader will display and speak the correct label for each form field.
• If you have fields that are related or similar (contact information, shipping information, etc.), consider grouping them together using <legend> and <fieldset> tags.
• Required form fields should be marked appropriately. Use an asterisk (*) before the form field label to alert the user that this field is required. Some screen reader users turn off the reading of punctuation characters so asterisks may not be seen. Consider also using the wording "(required)" after the form field label.
• Asterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or people who speak English as a second language.
• Indicating that a field is required to a screen reader can be accomplished by adding ARIA attributes to your form fields. Use ARIA-required="true" for required fields and ARIA-required="false" for optional fields.
• Do not convey fields with errors by the use of color.
• If form validation is done on a page use the ARIA attribute aria-invalid to designate which fields are invalid. This makes it easier to determine which fields need attention if errors exist in data entry on your form.
• ARIA properties are highly recommended as most modern screen readers support them. However, fallback strategies should be kept in place to insure full accessibility.
• Be aware of the ARIA attribute aria-labelledby. This is becoming more commonplace with Screen Readers.
• When longer descriptions are required for a form field make use of the ARIA attribute aria-describedby.
• Use ARIA alerts whenever possible.
• After submitting the form, user will need to be alerted to submission confirmation and any submission errors.
• If a user submits a form with errors, the user should be brought to a submission page that indicates what the errors are, and provides an easy way to navigate to those errors.
• The use of CAPTCHA is inaccessible and should not be used whenever possible. Google's Recaptcha does provide an audio CAPTCHA but these are not accessible to deaf-blind users. The resources below may help you in preventing spam on your forms.

Resources