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.
Markup and Code
| Code Block | ||
|---|---|---|
| ||
<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> |