Multiselect Combo Box

Owned by Christina Lutz-Hatfield
Last updated: Oct 15, 2023
3 min read

Visual Example

Default State:

Items Selected:

Acceptance Criteria

In general, avoid using a multiselect combo box and provide a group of checkboxes which are a more accessible.

Use a multiselect combo box when your list of options is very long.

As a screen reader and keyboard only user I should:

  • be provided with a form label

  • be provided with a default label in the drop down menu

  • be able to use the Spacebar or ENTER key on the keyboard to expand the drop down menu

  • be able to use the up/down ↑/↓ arrows on the keyboard to navigate between menu options

  • be able to use the ENTER key on the keyboard to make a selection

  • be able to select multiple items from the drop down menu list by using the ENTER key on the keyboard

  • I should be able to delete selected items by:

    a) using the SHIFT+TAB keys on the keyboard to tab backwards to the button that I want to delete

    b) then press the spacebar or ENTER key on the keyboard to delete the item that has keyboard focus.

As a screen reader user I should:

  • be able to explicitly associate the form label with the form control

When the form control has keyboard focus: 

  • the screen reader should announce the form label

  • the screen reader should announce that the input field is an auto-suggest

  • the screen reader should announce that the user can select from the suggestion list or type their own input

  • the screen reader should announce the number of suggestions that are available

  • the screen reader should announce that the user can scroll through the list of suggestions by using the arrow keys on the keyboard

  • when suggestions are arrowed through they are spoken aloud

Markup and Code

Please see the following recommended code example. It is fully accessible to both keyboard only and screen reader users.

View Markup, CSS and JS Code

ARIA Attributes to Make Search Functionality Fully Accessible to Screen Reader Users:

Add role=”combobox” to the <input> field to tell screen reader users that the input field is an auto-suggest.

  • Default text is “Edit Combo”

Add aria-autocomplete=”both” to the <input> field to tell screen reader users they can select from the suggestion list or type their own input. 

  • This is the default text: “To set the value use the arrow keys or type the value”

  • You can customize this text by using the aria-describedby="initInstr"

  • Screen reader users can’t use the arrow keys until the autocomplete starts. 

  • You may want to use a more customized message such as “When autocomplete results are available use up and down arrows to review and enter to select.”

Add aria-live=”assertive” to announce the number of results available. The content of the <div>, which isn’t visible on screen, updates every time the list length changes.

Add aria-owns to the <input> field to link the suggestion list to the input field.

Add role=“listbox“ to the suggestion list <div> to tell screen reader users it contains a list of selectable items.

Add aria-activedescendant to the <input> element and populate it with the id of the currently highlighted list item. The aria-activedescendant value changes as the user presses the Up and Down arrows.

Add role=“option“ to each suggestion item, along with a unique id. That id is used by the aria-activedescendant attribute of the <input> element, whose value changes as users move through the list items with the arrow keys.

Add aria-expanded to indicate that the popup list is displayed.