Check boxes

Do

  • Place check boxes underneath each other for scannability.
  • Use checkboxes when a user can select any number of choices from a set list.
  • Surround a related set of checkboxes with a "fieldset". The "legend" provides context for the grouping. Do not use fieldset and legend for a single check.
  • The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.
  • Each input should have a semantic "id" attribute, and its corresponding label should have the same value in it’s "for" attribute.
  • The "title" attribute can replace "label".
  • Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
  • If providing hint text with your radio buttons add the aria-describedby= tag to the fieldset and place the hint text below the legend.

Don't

  • Don’t place check boxes in a horizontal list. Horizontal listings can make it difficult to tell which label pertains to which radio button.
  • Don't set a default value. Leave nothing selected by default.

Example

What services would you like to subscribe to?
Back
Radio buttons
Next
Conditionally revealing content