Skip to main contentCarbon Design System

Toggle

How it works

The toggle Carbon component is a control that uses a two state checkbox commonly used to switch between two possible states such as on or off. The Tab key is used to move focus to each toggle control. Either the Enter or Space key can be used to toggle between a checked or unchecked positions. The ARIA state aria-checked="true" is set when the toggle switch is checked or in the on position. When the toggle component is unchecked or in the off position, the ARIA state is set to aria-checked="false". A toggle component identified as disabled is ignored in the tab order.

Accessibility considerations

This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.

  1. Each toggle control should have a clear and concise label.
  2. Users should be warned if selecting a toggle component will cause a change in context.
  3. The id for each component must be unique when more then one Carbon toggle component is present on a Web page.
  4. If the toggle is a required field include the aria-required property and indicate that it is a required field and use the validation message for input errors.

Resources

Accessibility testing

Accessibility issues are tracked in the Carbon Component GitHub repository.

Automated test

Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test:
- No violations

macOS screen reader tests

Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) Test:
  1. Press the Tab key to navigate to the first toggle component. VO announces the label as Off, the state as unchecked, and that it is a checkbox.
  2. Press the Space key to change the state of the toggle component On and Off.
  3. Press the Tab key to navigate to the labeled toggle component. VO announces the label as Off, the state as unchecked, that it is a checkbox and the label.
  4. Press the Tab key and the disabled toogle component is skipped.
  5. Control-Option-Left arrow key back to the disabled toggle component. VO announces that it is a disabled checkbox, dimmed unchecked checkbox.
- macOS Mojave version 10.14.6 with VoiceOver
- Safari version 13.0.2
- Carbon React version 7.7.1
VoiceOver(VO) test:
  1. Press the Tab key to navigate to the first toggle component. VO announces the label as off, the state as unchecked, and that it is a checkbox.
  2. Press the Space key to change the state of the toggle component on and off.
  3. Press the Tab key to navigate to the labeled toggle component. VO announces the label as off, the state as unchecked, that it is a checkbox and the label.
  4. Press the Tab key and the disabled toogle component is skipped.
  5. Control-Option-Left arrow key back to the disabled toggle component. VO announces that it is an off, dimmed unchecked checkbox.

Windows screen reader tests

Environment
Results
- Microsoft Windows 10
- JAWS 19.1810.64
- Chrome version 73.0.3683.103 (Official Build) (64-bit)
- Carbon React version 7.7.1
JAWS test:
  1. Navigate among the toggle component by pressing the Tab and Shift-Tab keys, or X and Shift+X keys to jump to next or previous checkboxes.
  2. When navigating to a toggle, JAWS announces the label, checkbox, and the status of the checkbox.
  3. Disabled toggle components can only be found by using the Up and Down Arrow keys, when JAWS announces "disabled checkbox checkbox unchecked unavailable".
  4. Press the Space key to select or deselect the toggle. JAWS announces the status of checked or unchecked.
- Microsoft Windows 10
- NVDA version 2018.4.1
- Chrome version 72.0.3683.103 (Official Build) (64-bit)
- Carbon React version 7.7.1
NVDA test:
  1. Navigate among the toggle components by pressing the Tab and Shift-Tab keys, or X and Shift+X keys to jump to next or previous checkboxes.
  2. When navigating to a toggle, NVDA announces the label, checkbox, and the status of the checkbox, but repeats the information twice.
  3. Disabled toggle components can only be found by using the Up and Down Arrow keys, or the the X and Shift+X keys. NVDA announces "checkbox unavailable not checked disabled checkbox".
  4. Press the Space or Enter key to select or deselect the toggle. NVDA announces the status of checked or unchecked.

iOS screen reader tests

Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver test:
  1. Navigate to the toggle components by swiping left or right, or press the Left or Right Arrow keys when quick navigation is turned on. VO announces,the label, field type, and the status of the checkbox.
  2. When tapping on a toggle, or pressing VO+Space, VoiceOver announces the new status of the toggle component as checked or unchecked.

Android screen reader tests

Environment
Results
- Android version 9 with Talkback
- Chrome version 72.0.3683.103 (Official Build) (64-bit)
- Carbon React version 7.7.1
Talkback test:
  1. Navigate to the toggle components by swiping left or right, or press the Left or Right Arrow keys. Talkback announces,the label, field type, and the status of the checkbox.
  2. When tapping on a toggle, or pressing the Alt-Enter keys, Talkback announces the new status of the toggle component as checked or not checked.
Edit this page on GitHub
Previous
Toggle: Code
Next
Components: Tooltip