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: Method: Instructions available at the source of input (All)
Introduction
Platform
- All desktop and mobile platforms
- Documents such as PDF and word processing documents
Technology
- Web (HTML, ARIA)
- Applications (iOS, Android, MacOS, Windows)
- Documents (eidtable PDF and word processing documents)
Summary
- 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 display in a predictable location improve ease of use
- Instructions that are programmatically defined and associated with inputs can be conveyed by assistive technology as users enter data.
How it solves user need
- People need 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 benefit from instructions that appear in a predictable location so they are easy to find and follow
- People who use screen magnification need input instructions that display next to inputs so they can see the instructions while focused on the input
- People who use assistive technology need instructions that are programmatically defined and associated so thay can use their technology to access the instructions while focused on the input
Description
Outcome
This method supports the outcome Input instructions provided.
Detailed description
- Persistent instructions: Display instructions for as long as people need them
- Adjacent instructions: Display instructions near inputs so that people can follow the instructions as they are entering data
- Predictable location: Display instructions in a standard location so that people know where to find them
- Programmatically defined and associated instructions: Provide instructions programmatically so that they are available to assistive technology
Dependencies
- To be determined.
Examples
Example 1: 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 "Date of Birth" is indicated by "MM/DD/YYYY" within the same label:
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.
MM-DD-YYYYTests
Atomic Tests
- Test Units: Each input that has specific data 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 input data requirements are available on the page or view
- Check that the instructions are persistent
Expected Results
All checks are true. Credit: 1
Test that instructions are adjacent to inputs
Test Procedure
- Check that instructions for input data requirements are available on the page or view
- Check that the instructions are adjacent to the input
Expected Results
All checks are true. Credit: 1
Test that instructions are predictably located
Test Procedure
- Check that instructions for input data requirements are available on the page or view
- Check that instructions display in a standard location
Expected Results
All checks are true. Credit: 1
Test that instructions are programmatically defined and associated
Test Procedure
- Check that instructions for input data 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. Credit: 1
Scoring
Score: Percentage of inputs with specific data requirements on a page, screen, or view that have persistent instructions that are adjacent to inputs, predictably located, and programmatically defined and associated.
- Calculate the total possible credits (total test units x total tests)
- Calculate the total credits (sum of test unit scores)
- Express total credits as a percentage of total possible credits (total credits / total possible credits)
The following example shows scoring for a page that has two inputs with specific data requirements.
| Data | Score |
|---|---|
| Date of birth input | 3 |
| Credit card number input | 2 |
| Total credits | 5 |
| Total possible credits | 8 (2 inputs x 4 tests) |
| Score | 62.5% |
Holistic Tests
To be developed.
Resources
W3C Resources
- Easy Checks: Required fields and other instructions — Forms, labels, and errors
- WAI Tutorials: Form Instructions - Inline Instructions
Non-W3C Resources
Status
Draft
Change Log
- 2021-04-30: Draft