Visual Example
Default State:
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 label.
As a screen reader user I should be provided with a form label for every form control.
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.
As a screen reader and keyboard only user I should be able to use the Spacebar or ENTER key on the keyboard to expand the drop down menu.
As a screen reader and keyboard only user I should be able to use the ENTER key on the keyboard to make a selection.
As a screen reader and keyboard only user I should be able to select multiple items from the drop down menu list by using the ENTER key on the keyboard.
As a screen reader and keyboard only user 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.
Markup and Code
Please see the following recommended code example. It is fully accessible to both keyboard only and screen reader users.