General
- Ensure sufficient colour contrast for all switch elements
- Do not rely on colour alone to indicate on/off state — use position and shape as well
- All switches must have associated labels
- Make switches keyboard accessible
- Announce state changes to screen readers
Web
Semantic markup
- Associate the switch with a <label> using for attribute or by wrapping both elements
- Use a checkbox input styled as a switch
Accessible labelling
Key accessibility attributes:
- aria-checked="true/false": Indicates the current state of the switch
- aria-labelledby or for: Associates the label with the switch
- aria-describedby: Can be used to associate additional helper text if needed
State indication
- Use aria-checked="true" when the switch is on
- Use aria-checked="false" when the switch is off
- Update the aria-checked value immediately when the state changes
Keyboard navigation
- Switches should be focusable using the Tab (⇥) key
- Space (␣) or Enter should activate/deactivate the switch
- Focus indicators must be clearly visible
Live announcements
- When the switch state changes, screen readers should announce the new state
- Use aria-live="polite" on a status region if additional context is needed
- Example announcement: "Enable notifications, on" or "Enable notifications, off"
React Native
- Use the built-in Switch component when available
- Provide accessibilityLabel describing what the switch controls
- Use accessibilityRole="switch" to identify the element
- Use accessibilityState={{ checked: true/false }} to indicate the current state
- Ensure switches are keyboard accessible and have appropriate touch targets (minimum 44px × 44px)