Developer What component has
Keyboard support
| Key | Function |
|---|---|
Space , Enter | Changes state of the switch to checked or not checked. |
Roles & attributes
The list below describes roles and attributes that component already has.
| Role | Attribute | Element | Usage |
|---|---|---|---|
| switch | button | When you can, use a <button> element and include aria-pressed or role="switch" for your toggles. | |
aria-checked="true" | button | Indicates the switch is on. CSS attribute selectors (for example [ aria-checked="true" ]) are used to synchronize the visual states with the value of the aria-checked attribute. | |
aria-checked="false" | button | Indicates the switch is off. CSS attribute selectors (for example [ aria-checked="false" ]) are used to synchronize the visual states with the value of the aria-checked attribute. | |
aria-readonly | button | Indicates that the element isn’t editable, but is otherwise operable. |
Considerations for designers
- Make sure to add a non-color visual cue, like on-screen text, 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.
- 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 optional labels to your toggles, just make sure the label element includes an
idand the toggle button includes anaria-labelledbytag that match. - Make sure you check the contrast of the toggle text against the background (if text is used).
Find live examples in the A11y style guide.
Roles and attributes
The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.
| Attribute | Element | Usage |
|---|---|---|
aria-label | div | Defines a string value that labels an interactive element. It is required props for controls without text content. |
aria-labelledby | div | The aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to. It is required props for controls without text content. |
Resources
A11y style guide has detailed information about the toggle accessible behavior.
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".