Visual Example
...
Acceptance Criteria
As a screen reader user, and keyboard only user and anyone with a learning disability I should I should:
be provided with a form label
be provided with a default label in the drop down menu
...
As a screen reader and keyboard only user I should be provided with a form label for every form control.
As a screen reader and keyboard only user I should be able to explicitly associate text labels with their respective form control.
...
(includes users with any type of learning disability)
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
As a screen reader and keyboard only user I should:
be able to
...
explicitly associate text label with the form control
When the form field has keyboard focus:
The screen reader should announce the form label.
...
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> |
...