About This Pattern
A switch is an input widget that allows users to choose one of two values:
Switches are similar to checkboxes and toggle buttons, which can also serve as binary inputs.
One difference, however, is that switches can only be used for binary input while checkboxes and toggle buttons allow implementations the option of supporting a third middle state.
Checkboxes can be
not checked and can optionally also allow for a
partially checked state.
Toggle buttons can be
not pressed and can optionally allow for a
partially pressed state.
Since switch, checkbox, and toggle button all offer binary input, they are often functionally interchangeable.
Choose the role that best matches both the visual design and semantics of the user interface.
For instance, there are some circumstances where the semantics of
on or off would be easier for assistive technology users to understand than the semantics of
checked or unchecked, and vice versa.
Consider a widget for turning lights on or off.
In this case, screen reader output of
Lights switch on is more user friendly than
Lights checkbox checked.
However, if the same input were in a group of inputs labeled
Which of the following must be included in your pre-takeoff procedures?,
Lights checkbox checked would make more sense.
Important: it is critical the label on a switch does not change when its state changes.
- Switch Example: A switch based on a
divelement that turns a notification preference on and off.
- Switch Example Using HTML Button: A group of 2 switches based on HTML
buttonelements that turn lights on and off.
- Switch Example Using HTML Checkbox Input: A group of 2 switches based on HTML
input[type="checkbox"]elements that turn accessibility preferences on and off.
- Space: When focus is on the switch, changes the state of the switch.
- Enter (Optional): When focus is on the switch, changes the state of the switch.
WAI-ARIA Roles, States, and Properties
- The switch has role switch.
- The switch has an accessible label provided by one of the following:
on, the switch element has state aria-checked set to
off, the switch element has state aria-checked set to
- If the switch element is an HTML
input[type="checkbox"], it uses the HTML
checkedattribute instead of the
- If a set of switches is presented as a logical group with a visible label, either:
- If the presentation includes additional descriptive static text relevant to a switch or switch group, the switch or switch group has the property aria-describedby set to the ID of the element containing the description.