New in ARIA 1.1

A type of checkbox that represents on/off values, as opposed to checked/unchecked values. See related checkbox.

The aria-checked attribute of a switch indicates whether the input is on (true) or off (false). The mixed value is invalid, and user agents MUST treat a mixed value as equivalent to false for this role.

Note: A switch provides approximately the same functionality as a checkbox and toggle button, but makes it possible for assistive technologies to present the widget in a fashion consistent with its on-screen appearance.

HTML Example

HTML Example 2

• checkbox

• button

• aria-checked

• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-readonly
• aria-relevant
• aria-roledescription

• contents
• author

• True

• True

• Default for aria-checked is false.

No HTML element equivalent.

The role “switch” was added as a type of simplified checkbox that can only handle two values, “false” or “true” (On or Off). The “switch” role does not support aria-checked=”mixed”, which will default to “false” if detected.

The use of role=”switch” must never include focusable active elements, but must instead be the only focusable element.

When role=”switch” is used, focus must be set to the role=”switch” element, and the spacebar (in addition to onClick) must be available to toggle aria-checked between “false” or “true”.

Since role=”switch” is a form field in the same manner as role=”checkbox”, it must include an explicit label using either aria-labelledby or aria-label.