Web Accessibility Criteria - Form Instructions

• Introduction
• Best Practices
• Examples
• How to Test for Form Instructions
• WCAG 2.1 and References 

 Introduction

Form instructions are necessary to provide important information and instructions that will benefit all people. When providing instructions, the goal should be to provide enough information so that the user is able to easily understand how to accomplish the task and how to use the individual form controls. Proper instructions will help the user avoid input errors by properly informing them ahead of time about the required fields, restrictions and formatting of the data they will enter.

 Best Practice

When providing text instructions to the user it is important that just enough information is provided to make the process easy to understand. Too much or too little information will both become a hindrance to the user when trying to fill out the form. The goal of the instructions is to provide the necessary information without cluttering the page.

The use of text instructions should be used in conjunction with labels. While instructions outside of labels can allow for more flexibility in design and positioning, these instructions can sometimes be missed by some web browsers and assistive technologies.

Beginning of the Form

Instructions which apply to the entire form should be shown at the begging and placed prior to the form element. This type of information will ensure that the user understand the key instructions to the entire form before entering the form fields. Providing instructions at the beginning of the form is best used when either the form has a small number of fields or when there are multiple form fields which require the same formatting. It is more efficient to describe the formatting restrictions once at the top of the page than providing the same instructions for every form field which requires the same formatting.

Placeholder Text

It is not recommended for placeholder text to be used to replace labels or instructions for form fields. Placeholder text can be used to provide instructions or an example within the form fields that have not yet been edited by the user. However, browsers display placeholder text in a color which fails minimum contrast requirements unless the CSS is altered to show a different color. Additionally, placeholder text disappears when the user interacts with the form field which can make it difficult for the user to ensure the data was inputted correctly if no additional instructions are provided.

 Examples

Example 1: Instructions Before the Form

A website for students to apply to internships allows them to enter the relevant courses they have taken and the descriptions of the coursework. The form gathers information about the university the course was taken at, the name of the course, and the from and to dates the was enrolled in the course, and the relevance of the coursework in regards to the desired internship. At the top of the form are the following instructions:

Enter the requested information about the coursework you want to add to your profile.

• Dates should be enetered in a mm/dd/yyyy format
• Relevance of coursework should be no more than 3 sentences

 

Example 2: Placeholder Text

A scholarship application form requires the student to provide a phone number. The form requires the phone number to be inputted in a specific format. In addition to the label provided with proper instructions on how to input the data, an example placeholder text is provided.

Phone Number (###-###-####):

 

Back To Top 

 How to Test for Form Instructions

General Test

• Browse through the page's forms
• Ensure that each form has its own set of instructions.
• Ensure that the instructions are clear and concise.
  Check for grammatical errors.
• If a field requires a certain format, check to see if the instructions give an example of the format.
  • Restrictions and formats should be listed under the same instruction.

 Back To Top 

 WCAG and References