Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »


Acceptance Criteria

Checkboxes should be used when one or more options can be selected.

As a screen reader user I should be provided with a form label for every form control.

As a screen reader user I should be able to explicitly associate text labels with their respective form control.

As a screen reader user I should be provided with a <fieldset> that groups multiple form control options.

As a screen reader user I should be provided with a "legend" that describes the group of form controls.

As a screen reader and keyboard only user I should be able to use the TAB key on the keyboard to navigate between checkboxes.

As a screen reader and keyboard only user I should be able to use the Spacebar on the keyboard to check/uncheck a checkbox.


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

  • No labels