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