Form Instructions
Status: This is an in-progress, unapproved draft.
Provide instructions to help users understand how to complete the form and individual form controls. This includes indicating any required and optional input, data formats, and other important aspects of the form.
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 they will be read aloud.
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.
In-line instructions
In addition to the overall instructions, it is also important to provide relevant instructions within the labels of the form controls. For example, 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 is most reliable approach across different web browsers and assistive technologies, although may require some additional thought to support styling needs.
In the example below, the required format for the “Expiry Date” is indicated by “MM/YYYY” within the same label:
Providing instructions outside labels
Providing instructions outside labels allows more flexible positioning and design but sometimes it can be missed. The two approaches outlined below can be combined to reduce this risk.
Informing users
Content outside form elements may be missed by screen readers that are in “Forms Mode”. In the example below, users are informed that extra help is available for each field in the overall instructions before they enter the actual form, so that they don't miss it.
Note: A caveat of this approach is that users receive the instructions after the form element. This is usually not ideal, especially when the form controls are large, when they are displayed on mobile devices, or when using screen magnification. In such cases these instructions may not be easy to find.
Using WAI-ARIA
Another approach is to use the WAI-ARIA aria-describedby
attribute to associate the instructions with form elements. At the time of writing, this approach may not be fully supported by all web browsers and assistive technologies.
Note: This technique is mostly interpreted by screen readers, so that non-screen reader users may not gain the information as easily. Until such associations are more broadly used by other assistive technology as well, it is often useful inform the user that instructions directly follow form controls.
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, placeholder text is not broadly supported across assistive technologies.
Refer to the techniques described in Hidden labels in cases where you want to avoid redundancy of (visible) labels and placeholder text.
Note: To provide more clarity, ensure that the style of placeholder text is distinguishable from regular text. This is commonly done by reducing the color contrast of placeholder text. However, if you do reduce the contrast, ensure that the placeholder text also meets the minimum color contrast requirement of WCAG 2.0.
Related WCAG2.0 resources
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:
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G131: Providing descriptive labels
- G162: Positioning labels to maximize predictability of relationships
- H44: Using label elements to associate text labels with form controls
- H93: Ensuring that id attributes are unique on a Web page