Intelligence Community Design System

Toggle buttons provide another means of selecting an option. They work well where space is limited but this means they do not include other labels that can be used to explain their purpose. Therefore, it is always important to make sure that the visible label makes sense when in either the ‘on’ or ‘off’ position.

It is important that the selected state can be clearly identified from the unselected state. To conform with the WCAG criteria 1.4.1 Use of color , the toggle button does not solely rely on colour to indicate the selection state, but instead makes use of an additional shape added to the interior of the button to clearly distinguish it from its unselected state.

The toggle button is based upon the button component so that it inherits the accessibility functionality from that component.

A toggle button group can be set to either single-select or multi-select, and has settings that allow automatic selection or manual selection of its options as each toggle button is navigated through. This helps to speed up selection in a single-select toggle button group. However, this does change the keyboard interaction.

For a single select group, the whole group is focussed upon using the ‘tab’ key and the options are navigated using the ‘arrow’ keys, such as with a radio button group . For a multi-select group each toggle button in the group is individually focusable with the ‘tab’ key.

When an individual toggle button is focussed, either on its own or within a toggle button group, it can be actioned by using the ‘enter’ or ‘space’ keys.

When a toggle button is navigated to using a screen reader, its label is announced along with its selection status and its role. If an aria-label has been provided, then this will be announced instead of the visible label. This allows additional context to be provided for screen reader users who may not be able to pick up on visual cues elsewhere on the page.

The selection state is also appended to the aria-label to make sure that it is correctly announced by all screen readers.

When a toggle button is set to disabled, it uses aria-disabled so that it is still perceivable even though it is not editable.

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.