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.
When the form field has keyboard focus:
Tell screen reader users that the input field is an auto-suggest.
Tell screen reader users they can select from the suggestion list or type their own input.
Tell screen reader users the number of suggestions that are available
Markup and Code
Please see the following recommended code example. It is fully accessible to both keyboard only and 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=”true” to indicate that the popup list is displayed.