Switch
What component has
Keyboard support
Key | Function |
---|---|
Space , Enter | Changes state of the switch to checked or not checked. |
Considerations for designers
- Make sure to add a non-color visual cue, like on-screen text or icon inside the
Switch.Value
, to convey the state of the switch. This will ensure that the meaning is clear to all users, including those who may have difficulty distinguishing colors. Refer to Visual clue example. - If changing the state of a switch causes an instant change, it may violate a guideline called WCAG Success Criterion 3.2.2 On Input. To avoid this, either make sure the change doesn't automatically cause a change of context, or inform users about the behavior before they use the switch.
Considerations for developers
You can add an external label to the Switch, just make sure the label and Switch.Value
are connected through id
. Refer to the External label exmaple.
Other recommendations
Find more accessibility recommendations in the common Accessibility guide.