Select
Select
Easy to use for everyone
We've made sure that you can use the select component with a keyboard, including home and end , as well as the esc key. Options in the dropdown list can be accessed with the up and down arrow keys.
For the searchable variant, we have included options that allow you to decide the minimum number of characters required before results are returned. This can help show relevant options only. When the query length is less than the required thearia status
region provides helpful text informing the user they should type in more.
For Assistive Technology
When focus is received on the component, the screen-reader will announce a hint explaining how you can navigate up and down in the dropdown list (with the up and down arrow keys).
When the search (asynchronous or otherwise) is complete, there is anaria-live
announcement to announce the number of results in the list.
Based on
The select component has been based on the following resources:
-
Select your poison , 24 Accessibility, accessed July 2022. -
ARIA: listbox role , Mozilla, accessed July 2022. -
Menus & Menu Buttons , Inclusive Components, accessed July 2022. -
aria-autocomplete , Mozilla, accessed July 2022.
Testing
We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.