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 (most) checkboxes

  • 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 iOS checkboxes

  • iOS has no native checkbox, so your engineers will be hacking a button to act kinda like a checkbox

Working examples

Choose your favorite NATO letters:

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"

Legal disclaimers

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
Choose the starcrossed NATO letters

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

Related checkbox entries