Select
Select fields let users choose an option from a list
Use Cases
- Users should be able to:
- Navigate to and activate a select field with assistive technology
- Choose an item from the list of options
- Receive and understand supporting select and error messages
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
| Enter | Opens the dropdown menu and selects the focused option |
| Esc | Closes the dropdown menu |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
The accessibility label for a select field is typically the same as the label for the text field.
Use Cases
- Users should be able to:
- Navigate to and activate a select field with assistive technology
- Choose an item from the list of options
- Receive and understand supporting select and error messages
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
| Enter | Opens the dropdown menu and selects the focused option |
| Esc | Closes the dropdown menu |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
The accessibility label for a select field is typically the same as the label for the text field.
Use Cases
- Users should be able to:
- Navigate to and activate a select field with assistive technology
- Choose an item from the list of options
- Receive and understand supporting select and error messages
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
| Enter | Opens the dropdown menu and selects the focused option |
| Esc | Closes the dropdown menu |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
The accessibility label for a select field is typically the same as the label for the text field.
Use Cases
- Users should be able to:
- Navigate to and activate a select field with assistive technology
- Choose an item from the list of options
- Receive and understand supporting select and error messages
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
| Enter | Opens the dropdown menu and selects the focused option |
| Esc | Closes the dropdown menu |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
The accessibility label for a select field is typically the same as the label for the text field.