Given that I am on a page with
a
listbox with inline autocomplete
1 Keyboard for mobile & desktop
WHEN I use the tab key to move focus to the text input
I SEE focus is strongly visually indicated
THEN when I use the arrow keys to select an option
I SEE the selected option is the new text input value
THEN when I use the enter key
I SEE the selected option is changed and focus returns to the text input
THEN when I use the escape key when the select is open
I SEE it collapses and focus moves to the text input
2 Desktop screenreader
WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver)
AND
I use the tab key to move focus to the text input
I HEARIts purpose is clear
I HEARIt identifies itself as a select, popup, menu/submenu, listbox or combobox
I HEARIts label is read and selected options are read
I HEARIt indicates the value of the text input
THEN when I use the arrow keys to select an option
I HEARthe selected option is the new text input value
THEN when I use the enter key
I HEARthe selected option is changed and focus returns to the text input
THEN when I use the escape key when the select is open
I HEARit collapses and focus moves to the text input
3 Mobile screenreader
WHEN I use a mobile screenreader (Talkback, VoiceOver)
AND
I swipe to focus on a select
I HEARIts purpose is clear
I HEARIt identifies itself as a select, popup, menu/submenu, listbox or combobox
I HEARIts label is read and selected options are read
I HEARIt indicates the value of the text input
THEN when I doubletap with the select in focus
I HEARthe selected option is changed
1 Keyboard only & screenreader
When I use
I see/hear
Tab
Focus moves visibly to the text input
Arrow-keys
Focus moves to and selects the next option.
If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the next option.
In both cases DOM focus remains on the textbox.
Enter
The textbox value is set to the content of the selected option.
The listbox closes.
Escape
Clears the textbox. If the listbox is displayed, closes it.
2 Mobile screenreader gestures
When I use
I hear
Swipe
Focus moves to the input, traverses list
Double-tap
Opens select, chooses option
3 Screenreader output for all devices
Reads
I hear
Name
Its purpose is clear
Role
It identifies itself as a select, popup, menu/submenu, listbox or combobox
Group
Its label is read and selected options are read
State
It indicates the value of the text input
Code example
<labelfor="listbox-input"id="example-label">
Choose your favorite NATO letter
</label><divrole="combobox"aria-expanded="false"aria-owns="listbox-input"aria-haspopup="listbox"id="example-combobox"><inputtype="text"aria-autocomplete="list"aria-controls="input-listbox"id="input-listbox"></div><ularia-labelledby="example-label"role="listbox"id="example-listbox"><lirole="option">Alpha</li><lirole="option">Bravo</li><lirole="option">Charlie</li></ul>
Developer notes
Name
Purpose must be clear from the label
Role
Use role="combobox" for the input
Use role="listbox" for the list of options
Use role="option" for the individual options
State
Use aria-expanded="true/false" on the text input to indicate the state of the list
Group
Use aria-haspopup="true" on the text input to indicate there is a popup