Field
The field package exposes the elements around form inputs, and an API to compose them.
import { ... } from '@ag.ds-next/react/field';Learn more about how to meet WCAG success criteria when implementing fields. This makes them accessible and inclusive for users of all abilities and situations.
Clear labels and instructions
Requirements
- Labels and hint text are clear and succinct.
- The purpose of the field is understood and conveyed by assistive technology.
- Hint text is provided when it’s helpful – for example, when requesting a specific format.
Benefits
- Assistive technology users have equal access to labels and instructions.
- Helps all users avoid submitting an incomplete or incorrect form.
- Reduces the cognitive load for all users.
- Makes filling in forms easier for people with cognitive and learning disabilities.
- Improves understanding of available options.
- Clear labelling supports users with English as a second language.
WCAG references
- Understanding success criterion 1.3.5 Identify input purpose
- Understanding success criterion 3.3.2 Labels or instructions
Error identification
Requirements
- Input errors are detected and communicated to the user.
- Error messages are accessible to all users, including those with disabilities.
- Error messages clearly identify the error.
- Error messages provide sufficient information for users to locate and fix the problem.
- Error messages are understood and conveyed by assistive technology.
Benefits
- Assistive technology users have equal access to error messages.
- Reduces user frustration by clearly explaining what went wrong.
- Helps users with cognitive disabilities understand and fix problems.
- Saves time by preventing repeated unsuccessful attempts.
- Enables users to solve errors themselves without having to contact tech support.
WCAG references
- Understanding success criterion 3.3.2 Labels or instructions
- Understanding success criterion 3.3.1 Error identification
Error prevention
Requirements
- Hint text is provided when it’s helpful – for example, to show the format for an Australian Business Number (ABN).
- Labels and hint text are clear and succinct.
- Users can check, reverse or confirm their input on forms with legal commitments, financial transactions or data modifications.
Benefits
- Clear guidance reduces anxiety about making mistakes.
- Helps users understand form requirements.
- Saves time by preventing the entry of incorrect information.
- Particularly valuable for users with cognitive or motor impairments.
- Provides safeguards against critical errors with significant consequences.
WCAG references
Name, role, value
Requirements
- All form components have appropriate names, roles and values that are understood and conveyed by assistive technology.
- Clear label identifying the text input.
- ARIA roles and states where needed – for example, aria-invalid, aria-required.
Benefits
- Assistive technology users have equal access to information about the purpose and state of the component.
- Improves usability for voice control software users.
- Helps users with cognitive challenges understand component functionality.
- Makes automation and testing more reliable.