Form Instructions

Provide instructions to help users understand how to complete the form and use individual form controls. This includes indicating any required and optional input, data formats, and other important information.

Important: Screen readers often switch to “Forms Mode” when they are processing content within a <form> element. In this mode they usually only read aloud form elements such as <input>, <select>, <textarea>, <legend>, and <label>. It is critical to include form instructions in ways that can be read aloud. This will be explained further below.

Overall instructions

Where relevant, provide overall instructions that apply to the entire form. For example, indicate any required and optional input, allowable data formats, and timing limitations. Provide such instructions before the <form> element to ensure that it is read aloud by screen readers before they switch to “Forms Mode”.

In the example below, form instructions indicate how required fields are marked, the expected format for key data fields, and where to find additional help for each input.

Example:
  • All fields marked “required” must be completed.
  • Dates should all be typed in the format dd/mm/yyyy, (as in 21/07/2013).
  • Passwords must contain at least 8 letters and/or numbers.
  • Extra help can be found immediately after each field.

In-line instructions

In addition to overall instructions, it is also important to provide relevant instructions within the labels of the form controls. For example, to indicate required input fields and data formats in the text of the labels.

Providing instructions within labels

For simple use cases, providing instructions within labels may be sufficient. This approach is reliable across different web browsers and assistive technologies, although it may require some additional thought to support some styling needs.

In the example below, the required format for the “Expiration Date” is indicated by “MM/YYYY” within the same label:

Example:
Code snippet:
<label for="expire">Expiration date (MM/YYYY): </label> <input type="text" name="expire" id="expire">

Providing instructions outside labels

Providing instructions outside labels allows more flexible positioning and design but sometimes it can be missed. It is also not supported by some web browsers (typically older versions) and assistive technologies that don’t implement WAI-ARIA.

Using aria-labelledby

One approach is to use the WAI-ARIA aria-labelledby attribute to associate instructions with form controls. At the time of writing this tutorial, this approach is not fully supported by all web browsers and assistive technologies, for example, Braille displays. To ensure backward compatibility, the for and id attributes are also used in this example.

Example:
MM/YYYY
Code snippet:
<label id="expLabel" for="expire" tabindex="-1">Expiration date:</label>
<span>
	<input type="text" name="expire" id="expire" aria-labelledby="expLabel expDesc">
	<span id="expDesc" tabindex="-1">MM/YYYY</span>
</span>

Note: At the time of writing those tutorials, it is necessary to add tabindex="-1" to elements that are referenced by aria-labelledby or aria-describedby if those attributes point to two or more elements to make this technique work in Internet Explorer.

Using aria-describedby

By using aria-describedby to reference the format of the field, this information is made available to the users on request. That is, it is not automatically displayed or read aloud. This makes sense if the user has been informed of the format before, or when there are lots of input fields with the same format, for example.

Code snippet:
<label id="expLabel" for="expire">Expiration date:</label>
<span>
	<input type="text" name="expire" id="expire" aria-labelledby="expLabel" aria-describedby="expDesc">
	<span id="expDesc">MM/YYYY</span>
</span>

Placeholder text

Placeholder text provides instructions or an example of the required data format inside form fields that have not yet been edited by the user. Placeholder text is usually displayed with lower color contrast than text provided by users, and it disappears from form fields when users start entering text. If the placeholder text contains instructional information or examples, having it disappear can make it more difficult for users to check their responses prior to submitting the form.

While placeholder text provides important guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels. Moreover, at the time of writing this tutorial, placeholder text is not broadly supported across assistive technologies and not displayed in older web browsers.

Note: Section Hidden labels of this tutorial describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus.

Example:
Code snippet:
<div>
	<label for="search">Search:</label> <input type="text" name="search" id="search" placeholder="e.g. Apple Pie">
</div>
<div>
	<label for="email">Email: </label> <input type="text" name="email" id="email" placeholder="joe@example.com">
</div>

Styling

At the time of writing this tutorial, web browsers usually display the placeholder text in a color that does not meet the minimum contrast requirement of WCAG 2.0. This means they are hard to see for many people. Web browsers use a combination of color and opacity to achieve this effect. In most web browsers the color of the placeholder can be styled using proprietary CSS selectors. The following code snippet sets the color to a light gray, which has just enough contrast to meet the contrast requirement, assuming the background of the element is white.

Code snippet:
::-webkit-input-placeholder {
	 color: #777;
	 opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
	 color: #777;
	 opacity: 1;
}

::-moz-placeholder {  /* Firefox 19+ */
	 color: #777;
	 opacity: 1;
}

:-ms-input-placeholder {
	 color: #777;
	 opacity: 1;
}

The following WCAG 2.0 resources are directly related to this page. Relationship to WCAG 2.0 provides more background information.

Success Criteria:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

  • 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)

  • 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

  • 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Techniques: