Toggle Switch

Success Criteria:

Description Label describes its purpose
Role Identifies as a switch or checkbox
Relationships for="input-id" is required in the label
State on/off
Focus Visibly focusable with tab key
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 a lot of of keyboard and focus interactions built in for free.

Description

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

Role

  • role="switch" with native checkbox or radio input

Relationships

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

State

  • on/off
  • checked/unchecked

Focus

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

Actions

  • 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.

Description

  • Inner text should describe the input.
  • aria-labelledby="label-id" can point to any element as a label
  • aria-label="input description" can also be used but isn't recommended

Role Requires extra work

  • role="switch"

Relationships Requires extra work

  • aria-labelledby="label-id" can point to any element as a label

State Requires extra work

  • aria-checked="true/false"

Focus Requires extra work

  • tabindex="0" to make it focusable

Actions Requires extra work

  • Tab / swipe
  • Space / double tap