Visual Example
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 using the SHIFT+TAB keys on the keyboard to tab backwards to a button/label and then press the spacebar or ENTER key to delete the item that has keyboard focus.
Markup and Code
<label for="favcity">Which is your favorite city?</label> <select id="favcity" name="select"> <option value="1">Amsterdam</option> <option value="2">Buenos Aires</option> <option value="3">Delhi</option> <option value="4">Hong Kong</option> <option value="5">London</option> <option value="6">Los Angeles</option> <option value="7">Moscow</option> <option value="8">Mumbai</option> <option value="9">New York</option> <option value="10">São Paulo</option> <option value="11">Tokyo</option> <option value="11">None</option> </select>