Success Criteria:

Description Label describes the input
Role Identifies as a checkbox
Relationships for="input-id" is required in the label
State checked/unchecked/disabled
Focus Visibly focusable with tab / swipe
Action Check/uncheck with spacebar / double tap

Keyboard & Screenreader Support

Tab / swipe Moves keyboard focus to the checkbox.
Space / double tap Toggles checkbox between checked and unchecked states.

Native Element

Native checkbox inputs have all keyboard and focus interactions built in for free.


  • Label inner text should describe the input.
  • aria-describedby="description-id" for additional descriptions


  • Is natively a checkbox


  • for="input-id" connects the input to its label
  • <fieldset> should wrap a group of related checkboxes
  • <legend> should describe the group


  • checked/unchecked


  • Is natively focusable with the tab key
  • Focus must be visible


  • Tab / swipe
  • Space / double tap

Custom Element

Avoid building custom checkbox inputs; there is probably no reason a native checkbox cannot be styled as desired.


  • Inner text should describe the radio element.
  • aria-label="input description" can also be used.

Role Requires extra work

  • role="checkbox" for the focusable checkbox element

Relationships Requires extra work

  • aria-labelledby="label-id"

State Requires extra work

  • aria-labelledby="label-id"

Focus Requires extra work

  • tabindex="0" to make it focusable

Actions Requires extra work

  • Tab / swipe
  • Space / double tap