Auto-suggest Control

An Auto-suggest, multi-select control consists of an input field, a list of matching options below the input field, and a list of selected values above the input field. As the user types in the input field, the options below change accordingly.

This functionality can be clear for sighted users; however, it is often inaccessible to screen reader users because the users do not know that the control is a multi-select control and because the users cannot access the options.

The example control below is fully accessible and works for keyboard and screen reader use - try it by typing in the input field.

Demo: auto-suggest, multi-select control

Town

Notes

The ARIA specification does not define a full widget with this functionality and therefore the control must be "homemade". The demo provided above consists of three parts:

• A standard input field that provides an explanation of the functionality via the label ("Town - type text, then select from options below. Selected values are displayed in list above. Type space to display all options.").
• A list of checkboxes (the options) below the input field.
• A list of values and "Remove" buttons (the selected values) above the input field.

The list and checkbox markup is implemented via ARIA roles; however, standard input, ul and li elements could be used instead.

To ensure screen reader access, the options do not close when the input field loses focus, instead, the options only close when the:

• Close button is pressed, or
• Escape key is pressed, or
• Page is clicked outside the control.

In addition, the options are inserted in the DOM immediately after the input field. This enables screen reader users to easily access the options and to interact directly with the elements.

Code example

The code below shows the markup with one selected value displayed above the input field and two options available below the input field.