Switch - Intelligence Community Design System

Show navigation section

Easy to use for everyone

A switch is selected or unselected using the space bar key when focused.

Additional I/O visuals have been added to assist the understanding of which state of the switch means 'on' and which means 'off'.

High contrast colours have been used to emphasise the difference between 'on' and 'off' states. The conventional positioning of a switch's handle on the right-hand side also denotes the 'on' state.

For Assistive Technology

Switches use the ARIAswitch role so that the change of state is announced by screen readers.

Based on

The switch component has been based on the following resources:

ARIA: switch role , MDN web docs, accessed July 2022.
Toggle Buttons , Inclusive Components, accessed July 2022.
On Designing and Building Toggle Switches , Sara Soueidan, accessed July 2022.
Toggle-Switch Guidelines , Alita Joyce - Nielsen Norman Group, accessed July 2022.
Updated Switch script & more , Scott O'Hara, accessed July 2022.
An accessible toggle , Kitty Giraudel, accessed July 2022.
Switch Component: Toggle Button , Scott O'Hara, accessed July 2022.

Testing

We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.

Last reviewed 15 April 2024 .