Autocomplete input with listbox - Web accessibility testing checklist

How to test an autocomplete input with listbox

Gherkin Checklist

Given that I am on a screen with an autocomplete input with listbox

1 Keyboard only

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 HEAR Its purpose is clear
- I HEAR It identifies itself as a select, popup, menu/submenu, listbox or combobox
- I HEAR Its label is read and selected options are read
- I HEAR It indicates the value of the text input
Then when I use the arrow keys to select an option I HEAR the selected option is the new text input value
Then when I use the enter key I HEAR 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 HEAR it collapses and focus moves to the text input

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focus on a select
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a select, popup, menu/submenu, listbox or combobox
- I HEAR Its label is read and selected options are read
- I HEAR It indicates the value of the text input
Then when I doubletap with the select in focus I HEAR the selected option is changed

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves visibly to the text input
Arrow-keys	Browses to and selects the next option; if the textbox is empty and the listbox is not displayed, opens the listbox and browses to the next option; in both cases 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

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

An autocomplete input with listbox must meet WCAG principles:

1 Perceivable

Color is not used as the only means of conveying state (valid/invalid) - 1.4.1 A
Text can resize up to 200% with no loss of information - 1.4.4 AA
The purpose (name, description, autocomplete) can be programmatically determined - 1.3.5 AA

2 Operable

Is keyboard operable - 2.1.1
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AAA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
The text has a 4.5:1 minimum contrast ratio - 1.4.3 AA
Label is always visible (placeholder cannot be used as a label) - 3.3.2 A

3 Understandable

Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 AA

4 Robust

Conveys the correct name, role, state/value 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Definitions

Autocomplete: Technically autocomplete is the native browser action/attribute available for making suggestions for fields based on values people have previously entered or stored, like email, address or credit card information.
Autosuggest: Autosuggest is the correct terminology for this component that suggests what it thinks/hopes the user is searching for, but since most people call it autocomplete, we’ll just roll with it for the title.

Code examples

Custom listbox with autosuggest

Custom listboxes are notoriously difficult to build in an accessible fashion for screenreaders.

WAI-ARIA examples

Semantic input with datalist autosuggest

This simple native HTML example illustrates all the functionality of a listbox with inline autosuggest.
Support and functionality on mobile devices varies.

<label for="favorite-nato-text">
  What's your favorite NATO letter?:
</label>
<input id="favorite-nato-text" 
       list="nato-letters" 
       type="text">
       
<datalist id="nato-letters"> 
  <option value="Alpha"> 
  <option value="Bravo"> 
  <option value="Charlie"> 
  <option value="Delta">
  <option value="Echo">
  <option value="Foxtrot">
  <option value="Golf">
  <option value="Hotel">
  <option value="India">
  <option value="Juliet">
  <option value="Kilo">
  <option value="Lima">
  <option value="Mike">
  <option value="November">
  <option value="Oscar">
  <option value="Papa">
  <option value="Quebec">
  <option value="Romeo">
  <option value="Sierra">
  <option value="Tango">
  <option value="Uniform">
  <option value="Victor">
  <option value="Whiskey">
  <option value="X-ray">
  <option value="Yankee">
  <option value="Zulu">
</datalist>

What's your favorite NATO letter?:

Web Autocomplete input with listbox