Select
Select provides a way for users to choose one item from a drop down list. It helps reduce input errors and screen space.
import { ... } from '@ag.ds-next/react/select';Learn more about how to meet WCAG success criteria when implementing select lists. This makes them accessible and inclusive for users of all abilities and situations.
The select component passed accessibility testing in 2022 and 2024.
Clear and descriptive labels
Requirements
- The select component and its list items have clear, concise labels.
- Required or optional fields are clearly indicated visually and by assistive technology.
Benefits
- Improves understanding of available options.
- Supports users with cognitive disabilities through clear labelling.
- Users of assistive technologies have equal access to labels and instructions.
WCAG references
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.1 Error identification
- Understanding success criterion 3.3.2 Labels or instructions
Error prevention
Requirements
- Hint text is provided when it’s helpful.
- 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
- Understanding success criterion 3.3.2 Labels or instructions
- Understanding success criterion 3.3.4 Error prevention (legal, financial, data)