internal draft. get the real thing from www.w3.org/WAI/eval/preliminary

Forms and error messages

[Draft update of 6/2/13 by Sharron and Anna Belle. Reorganized to parallel multimedia structure. Illustrations deleted. Content edited per meeting of 5/31. ]

Successful web interactions often depend on accurate presentation of form fields and controls. Someone who does not see the page needs to know what information is being requested in which input field and other very specific information about how to use the form. Someone who relies on the keyboard for navigation must be able to enter information and operate controls.

To meet accessibility requirements, forms must therefore be clear, navigable, and logical. Even simple forms, such as log-in and search boxes, can be problematic if not created and coded correctly.

What to do:

Find forms

If there are forms on the page you are checking, use the following steps to verify accessibility.

Form types include:

• single text entry boxes such as login or search box;
• multiple text entry boxes such as registration forms and contact forms;
• transaction type pages, which include text entry fields, radio buttons, check boxes, drop-down list boxes and submit buttons such as booking, purchasing and banking activities.

What to check for:

Keyboard access

Follow the steps above for keyboard access to ensure that all form controls are labeled and keyboard accessible.

Labels

Form labels are the most reliable way to ensure that all users receive clear and accurate information about what the form is for and what specific information is being requested within a particular input field. Even simple forms like Search and Login need labels.

• Use your mouse to check for labels explicitly tied to the form fields by clicking on the label - not the input field itself, but the text label associated with it. Check to be sure that the cursor now appears in the associated text entry box, radio-button or check-box selected.
• • -OR- You may use a browser-based testing tool to check the code for labels. Proper code will match the for attribute of the label element with the id attribute of the form element.
  Sample code:
  
  <label for="promocode">Promotional Code<label>
  <input type="text" id="promocode">
• Check that labels are positioned correctly – on the left side of radio buttons and check boxes, and on the right side of text boxers and drop-down list boxes.

Required fields and other instructions

Some forms are quite simple, such as a search form. Often, however, forms are more complex. For example, certain input fields may designated as being "required" for form validation. Other types of dependencies may also add complexity. In such cases, instructions may be needed. While it is beyond the scope of this Easy Check to completely verify that form instructions meet all accessibility requirements, the following basic assurances can be made.

• If there are instruction for completing the form, check that they are positioned appropriately (usually at the beginning of the form and/or at the start of specific sections).
• If there are required fields, verify that those fields are clearly indicated and that users are informed about how to identify them. (Remember that a method for identifying a required input field cannot rely on color coding as the only means of identification. Check for redundant indicators)
• Check that 'required' fields are indicated as part of the label for text boxes and drop-down lists.  For radio buttons and check boxes, verify that an accurate label is part of the group-label. Make sure that the indicator is not on the opposite side of the form element from the label as it will often be missed in that case.
• If there are time-limits associated with the form, verify that the limit is defined along with the consequences of exceeding the limit. Also check that a way is provided to extend the time if needed.

Submit buttons

• [Delete this section?]
• Forms should not self-submit when you select from a drop-down list or other element. [@@ What do we mean by self-submit or auto-submit?]
• Check that there is a 'submit' button for each form you are checking – even simple ones like search and login forms. [@@ http://www.w3.org/WAI/EO/Drafts/eval/checks#drop-down]

Error messages

Enter incorrect data – e.g., incorrectly formatted telephone numbers and email addresses. Submit the form and look for:

• Clear and specific guidance to help user understand and fix the error.
• If the error concerns a format, such as date, time, address, suggestions are made to enter the correct format.
• The focus moves to the error message.
  

Tips

To check forms with IE WAT

To check forms with FF toolbar

To practice checking Forms with BAD

To learn more about forms

Document Information

Status: Draft