Visual Example
Acceptance Criteria
As a screen reader user, keyboard only user and anyone with a learning disability I should be provided with a default label.
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 and keyboard only user I should be able to use the up/down ↑/↓ arrows on the keyboard to navigate between menu options.
As a screen reader and keyboard only user I should be able to use the Spacebar on the keyboard to expand the drop down menu.
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>