...
Items Selected:
...
Acceptance Criteria
As a screen reader user, keyboard only user and anyone with a learning disability I should be provided with a default labelIn 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
...
As a screen reader user I should be able to explicitly associate text labels with their respective form control.
As a screen reader and keyboard only user I should be able to use the up/down ↑/↓ arrows on the keyboard to navigate between menu options.
...
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 field control has keyboard focus:
Tell the screen reader should announce the form label
the screen reader users should announce that the input field is an auto-suggest.
Tell the screen reader users they should announce that the user can select from the suggestion list or type their own input.
Tell the screen reader users 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 CSS 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.
...
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=”true” to indicate that the popup list is displayed.