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>

View HTML markup on github