Developer 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 External label exmaple.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "In web content Receive updates Receive updates".
3. Screen reader goes to the next element.
4. Screen reader says "Enabled on switch".
5. Screen reader triggers element default action.
6. Screen reader says "off Disabled switch".
7. Screen reader goes out of active element.
8. Screen reader says "Out of web content".
9. Screen reader goes into the active element.
10. Screen reader says "Disabled off switch".1. Screen reader goes into the active element.
2. Screen reader says "In web content Receive updates Receive updates".
3. Screen reader goes to the next element.
4. Screen reader says "Enabled on switch".
5. Screen reader triggers element default action.
6. Screen reader says "off Disabled switch".
7. Screen reader goes out of active element.
8. Screen reader says "Out of web content".
9. Screen reader goes into the active element.
10. Screen reader says "Disabled off switch".