Checkbox
Back to simple components
Checkboxes must be checked to see if they indicate focus, have an associated label, and be keyboard and screen reader accessible.
WHEN I click on a checkbox
THEN the checkbox changes state
AND it is focused.
WHEN I am navigating using a keyboard
AND I tab on a checkbox
THEN I see a visual indicator
AND the focus indicator passes WCAG rule
WHEN I am navigating using a keyboard
AND I tab on a checkbox
AND I press the spacebar
THEN the checkbox changes state
WHEN I am navigating using a keyboard
AND I tab on a checkbox
AND I am using a screen reader
THEN The screen reader reads out a label for the checkbox
AND Reads out checkbox state (checked vs un-checked).
,
THEN the checkbox changes state
AND it is focused.
WHEN I am navigating using a keyboard
AND I tab on a checkbox
THEN I see a visual indicator
AND the focus indicator passes WCAG rule
WHEN I am navigating using a keyboard
AND I tab on a checkbox
AND I press the spacebar
THEN the checkbox changes state
WHEN I am navigating using a keyboard
AND I tab on a checkbox
AND I am using a screen reader
THEN The screen reader reads out a label for the checkbox
AND Reads out checkbox state (checked vs un-checked).
,
More Information
Each checkbox MUST have an associated label. Groups of checkboxes should be wrapped in a fieldset tag, with a legend tag labeling the group. Screen readers may repeat the legend for each control in the group, so the legend text should be brief and descriptive.