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: Required inputs indicated
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
- Ready access to inputs that require completion helps users focus on the task at hand.
- Required inputs that are clearly identified help users avoid submitting incomplete data.
- Inputs that are programmatically defined as required can be conveyed by assistive technology.
How it solves user need
- People need to know which inputs they are required to fill in to successfully complete their task.
- People need to be able to readily distinguish between required and optional inputs to better focus their attention and efforts.
- People who use assistive technology need required inputs that are programmatically defined so they can use their technology to identify and complete them.
Outcome
This method supports the outcome Input instructions provided.
Description
Required inputs are mandatory for successful form completion. Visually and programmatically indicating which inputs are mandatory helps users know which inputs they are required to complete before submitting the form.
Detailed description
- Visually identifiable: Identify required inputs using a visual indicator and text.
- Programmatically defined: Identify required inputs programmatically so they are available to assistive technology.
Dependencies
- To be determined.
The following examples illustrate some basic ways to identify inputs that users are required to complete.
Providing a text description in the input label
Text descriptions can appear in the form label of required inputs, for example, using “(required)” along with the input label, as in “Email (required)”.
<label for="email">Email (required)</label><input type="text" id="email" required>Providing instructions on the page
Text descriptions can appear before the form, for example, including instructions that indicate that all inputs are required, as in “Note: All inputs required”, before the form on the page or view.
<p>Note: All inputs are required</p><label for="name">Name</label><input type="text" id="name" aria-required="true"><label for="email">Email</label><input type="text" id="email" aria-required="true">Providing a non-text indicator and text instructions
Non-text descriptions can appear in the form as the indicator along with descriptive text, for example, an asterisk in the input label, as in “Email *”.
Using a character non-text indicator
<p>Note: An asterisk (*) denotes a required field</p><label for="email">Email *</label><input type="text" id="email" required>Using an image non-text indicator
<p>Note: <img src="star.gif" alt="required"> denotes a required field</p><label for="email">Email <img src="star.gif" alt="required"></label><input type="text" id="email" required>Atomic Tests
- Test Units: Each input that is required.
- Unit Score: For each test unit, complete each of the following tests and sum the test credits to get the unit score.
Test that required inputs are visually identifiable
Test Procedure
- Check that the required status is conveyed visually.
- For non-text visual indicators, check that instructions are provided that explain the non-text indicator.
Test that required inputs are programmatically defined
Test Procedure
- Check that required inputs include the required attribute and/or the aria-required attribute.
- For the aria-required attribute, check that the attribute value is "true".
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 sections in Forms, labels, and errors
- WAI Tutorials: Overall Instructions and Inline Instructions in Form Instructions
Non-W3C Resources
- Still to be developed. We will include this in a future working draft.