Visual Example
...
Example 1
...
Example 2
...
Acceptance Criteria
Checkboxes should be used when one or more options can be selected.
As a screen reader and keyboard only user I should:
be provided with a form label
...
...
be provided with a
...
As a screen reader user I should be provided with a "legend" that describes the group of form controls.
...
default label in the drop down menu
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 the form label with the form control
When the form control has keyboard focus:
the screen reader should announce the form label
...
Markup and Code
Example 1
| Code Block | ||
|---|---|---|
| ||
<fieldset> <legend>I enjoy the following activities:</legend> <input id="hiking" type="checkbox" name="toppings" value="hiking"> <label for="hiking">Hiking</label><br> <input id="biking" type="checkbox" name="toppings" value="biking"> <label for="biking">Biking</label><br> <input id="running" type="checkbox" name="toppings" value="running"> <label for="running">Running</label><br> <input id="dancing" type="checkbox" name="toppings" value="dancing"> <label for="dancing">Dancing</label> </fieldset><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> |
Example 2
| Code Block |
|---|
<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="select">
<option selected="selected">Select a city</option>
<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>
</select> |