Overview
Selects should be accessible via keyboard navigation and provide clear labelling for screen readers. Ensure proper option selection and navigation support for assistive technologies.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction (minimum 44px touch target).
Keyboard Interactions
|
tab |
Moves focus to select |
|
shift + tab |
Moves focus away from select (backwards) |
|
enter |
Opens select dropdown/flyout |
|
arrow keys |
Navigate between options when dropdown is open |
|
home / end |
Navigate to first/last option in list |
|
escape |
Closes dropdown and returns focus to select |
Semantic markup & WAI-ARIA
- Use <select> and <option> elements to maintain semantic meaning and proper browser support.
- Always associate labels with selects using for attribute or by wrapping the select in the label element.
- Use aria-describedby to associate hint text and error messages with the select.
- Use aria-required="true" for mandatory fields and aria-invalid="true" for validation errors.
- Ensure selected options are properly announced to screen readers when choices change.