UX
- Use checkboxes for multiple selections from a set of options
- Do not use checkboxes for a single selection from a set of options; that’s what radio buttons are for (for some reason we have to keep saying this)
Annotations for one checkbox
- Most of the time, your developers will be pulling from a code library with well defined checkboxes, so it’s not really necessary to annotate a checkbox if it’s well documented
- But if you really wanna, just annotate as
type=checkbox
Annotations for a group of checkboxes
- If it’s not defined in your code library, annotate the group with
fieldset
and group name withlegend
- Don’t rely on a heading as a group name
Annotations for iOS checkboxes
- iOS has no native checkbox, so your engineers will be hacking a button to act kinda like a checkbox
Working examples
Don’t put interactive elements inside the label
Even though this is valid HTML, it creates unpredictable results with screenreaders. A (currently) reliable method is to keep interactive elements outside the label and reference it with aria-describedby="hint-id"
Fully disabled checkbox
- A
disabled
checkbox will not be focusable with the tab key - Arrow keys will still allow people using a screenreader to browse disabled inputs
Card checkboxes
Do not focus the entire card, just the interactive portions. If focus lands on the entire card, it will be difficult for people using a screen reader to understand the checkbox.
If the card content directly describes the checkbox, it should be programmatically read after the name, role and state of the checkbox.
Annotations for card checkboxes
- Annotate the tappable area as the entire card
- Annotate the focusable outline around just the checkbox/label (not the entire card)
-
Delta (prounounced: dell-tah) is the fourth letter of the NATO alphabet.
-
Echo (prounounced: eck-oh) is the fifth letter of the NATO alphabet.
Specialty checkboxes
Sometimes an checkbox doesn’t look like a checkbox, but should act like a checkbox.
Annotations for specialty checkboxes
- If the design calls for an element that acts like a checkbox, but looks like something else (i.e. Favorite this post), let developers know it should be a
checkbox