This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.
🔙 WCAG 3.0 (Silver) Guidelines
Method: Instructions available at the source of input
Platform
- All desktop and mobile platforms
Technology
- Websites and applications, such as HTML, ARIA, and Javascript
- Native apps and applications, such as iOS, Android, MacOS, Windows, and Linux
- Documents, such as HTML, PDF, and word processing (for example, Word)
Summary
- Data entry instructions that are persistent remain visible as users enter data.
- Instructions that display at the source of input are visible as users enter data.
- Instructions that are programmatically defined and associated with inputs can be conveyed by assistive technology as users enter data.
- Instructions that are relevant to associated inputs enable users to understand how to enter data correctly.
How it solves user need
- People need data entry instructions that are available as they enter data in inputs.
- People need instructions that display at the source of input so they can read and follow the instructions while entering data at input.
- People who use screen magnification need data entry instructions that display next to inputs so they can see the instructions while focused on the input.
- People who use assistive technology need data entry instructions that are programmatically defined and associated so thay can use their technology to access the instructions while focused on the input.
Outcome
This method supports the outcome Input instructions provided.
Detailed description
- Persistent instructions: Display instructions for as long as people need them, including while they are entering data. Instructions provided using the placeholder attribute are not persistent and therefore do not meet this requirement.
- Adjacent instructions: Display instructions near inputs so that people can follow the instructions as they are entering data
- Programmatically defined and associated instructions: Provide instructions programmatically so that they are available to assistive technology
Dependencies
- To be determined.
The following examples illustrate some basic ways to provide data entry instructions at the source of input.
Example 1: Providing instructions within labels
For simple use cases, providing instructions within labels will be sufficient. This approach is reliable across different web browsers and assistive technologies.
In the example below, the required format for the "Date of Birth" is indicated by "MM/DD/YYYY" within the same label:
<label for="dob">Date of Birth (MM/DD/YYYY)</label><input type="text" id="dob">Example 2: Providing instructions outside of labels
Another approach to associate additional instructions with a form field is to use aria-describedby. Information referenced by this attribute is made available to the users after the label and other information is announced.
<label for="date">Date</label><span id="date-tip">MM/DD/YYYY</span><input type="text" id="date" aria-describedby="date-tip">Atomic Tests
- Test Units: Each input that has specific data entry requirements.
- Unit Score: For each test unit, complete each of the following tests and sum the test credits to get the score.
Test that instructions are persistent
Test Procedure
- Check that instructions for data entry requirements are available on the page or view.
- Check that the instructions remain visible and available while entering data.
Expected Results
All checks are true.
Test that instructions are adjacent to inputs
Test Procedure
- Check that instructions for data entry requirements are available on the page or view.
- Check that the instructions are adjacent to the input.
Expected Results
All checks are true.
Test that instructions are programmatically defined and associated
Test Procedure
- Check that instructions for data entry requirements are available on the page or view.
- Check that instructions are programmatically defined and associated with the input.
Expected Results
All checks are true.
Scoring
- Still to be developed. We will include this in a future working draft.
Holistic Tests
- Still to be developed. We will include this in a future working draft.
W3C Resources
- Easy Checks: Required fields and other instructions — Forms, labels, and errors
- WAI Tutorials: Form Instructions - Inline Instructions