Checkboxes
Visual Example
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 for each form control
be able to use the TAB key on the keyboard to navigate between checkboxes.
be able to use the Spacebar on the keyboard to check/uncheck a checkbox.
As a screen reader user I should:
be able to explicitly associate the form labels with their respective form control
be provided with a <fieldset> that groups multiple form control options
be provided with a "legend" that describes the group of form controls
When the checkbox has keyboard focus:
the screen reader should announce the form label
Markup and Code
<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>