{"componentChunkName":"component---src-pages-components-toggle-accessibility-mdx","path":"/components/toggle/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/toggle/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"aec29c55-147a-5841-be58-4ae0354df8c3","children":[],"parent":"7b5002ad-6f95-5cdb-8ada-4147c69272a0","internal":{"content":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\nimport {\n  StructuredListWrapper,\n  StructuredListHead,\n  StructuredListBody,\n  StructuredListRow,\n  StructuredListInput,\n  StructuredListCell,\n  OrderedList,\n  ListItem,\n} from 'carbon-components-react';\n\n<AnchorLinks>\n  <AnchorLink>How it works</AnchorLink>\n  <AnchorLink>Accessibility considerations</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n  <AnchorLink>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## How it works\n\nThe 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.\n\n## Accessibility considerations\n\nThis component has been validated to meet the [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and [Section 508](http://www.section508.gov/) 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.\n\n1. Each toggle control should have a clear and concise label.\n2. Users should be warned if selecting a toggle component will cause a change in context.\n3. The `id` for each component must be unique when more then one Carbon toggle component is present on a Web page.\n4. If the toggle is a required field include the [aria-required property](https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html) and indicate that it is a required field and use the validation message for input errors.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Accordion Design Pattern](https://www.w3.org/TR/wai-aria-practices/#accordion) covers the usage of ARIA names, state and roles, as well as the expected keyboard interactions.\n- [IBM Accessibility Checklist Checkpoint:](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html)\n  - [1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n  - [2.4.6 Headings and Labels](https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html) (WCAG Success Criteria [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))\n  - [3.2.2 On Input](https://www.ibm.com/able/guidelines/ci162/on_input.html) (WCAG Success Criteria [3.2.2](https://www.w3.org/WAI/WCAG21/Understanding/on-input))\n  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones).\n\n### Automated test\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>\n            Automated test environment\n          </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />\n            - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM\n            Accessibility WCAG 2.1 Sept. 2019 Ruleset\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>DAP test:</strong>\n            <br />- No violations\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### macOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) Test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press the Tab key to navigate to the first toggle component. VO\n                announces the label as Off, the state as unchecked, and that it\n                is a checkbox.\n              </ListItem>\n              <ListItem>\n                Press the Space key to change the state of the toggle component\n                On and Off.\n              </ListItem>\n              <ListItem>\n                Press the Tab key to navigate to the labeled toggle component.\n                VO announces the label as Off, the state as unchecked, that it\n                is a checkbox and the label.\n              </ListItem>\n              <ListItem>\n                Press the Tab key and the disabled toogle component is skipped.\n              </ListItem>\n              <ListItem>\n                Control-Option-Left arrow key back to the disabled toggle\n                component. VO announces that it is a disabled checkbox, dimmed\n                unchecked checkbox.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Safari version 13.0.2\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press the Tab key to navigate to the first toggle component. VO\n                announces the label as off, the state as unchecked, and that it\n                is a checkbox.\n              </ListItem>\n              <ListItem>\n                Press the Space key to change the state of the toggle component\n                on and off.\n              </ListItem>\n              <ListItem>\n                Press the Tab key to navigate to the labeled toggle component.\n                VO announces the label as off, the state as unchecked, that it\n                is a checkbox and the label.\n              </ListItem>\n              <ListItem>\n                Press the Tab key and the disabled toogle component is skipped.\n              </ListItem>\n              <ListItem>\n                Control-Option-Left arrow key back to the disabled toggle\n                component. VO announces that it is an off, dimmed unchecked\n                checkbox.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Windows screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment</StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - JAWS 19.1810.64\n            <br />\n            - Chrome version 73.0.3683.103 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate among the toggle component by pressing the Tab and\n                Shift-Tab keys, or X and Shift+X keys to jump to next or\n                previous checkboxes.\n              </ListItem>\n              <ListItem>\n                When navigating to a toggle, JAWS announces the label, checkbox,\n                and the status of the checkbox.\n              </ListItem>\n              <ListItem>\n                Disabled toggle components can only be found by using the Up and\n                Down Arrow keys, when JAWS announces \"disabled checkbox checkbox\n                unchecked unavailable\".\n              </ListItem>\n              <ListItem>\n                Press the Space key to select or deselect the toggle. JAWS\n                announces the status of checked or unchecked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - NVDA version 2018.4.1\n            <br />\n            - Chrome version 72.0.3683.103 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>NVDA test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate among the toggle components by pressing the Tab and\n                Shift-Tab keys, or X and Shift+X keys to jump to next or\n                previous checkboxes.\n              </ListItem>\n              <ListItem>\n                When navigating to a toggle, NVDA announces the label, checkbox,\n                and the status of the checkbox, but repeats the information\n                twice.\n              </ListItem>\n              <ListItem>\n                Disabled toggle components can only be found by using the Up and\n                Down Arrow keys, or the the X and Shift+X keys. NVDA announces\n                \"checkbox unavailable not checked disabled checkbox\".\n              </ListItem>\n              <ListItem>\n                Press the Space or Enter key to select or deselect the toggle.\n                NVDA announces the status of checked or unchecked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### iOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListRow head>\n        <StructuredListCell head>Environment </StructuredListCell>\n        <StructuredListCell head>Results</StructuredListCell>\n      </StructuredListRow>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - iOS version 13.1.3 with VoiceOver\n            <br />\n            - Safari version 13.1.3\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate to the toggle components by swiping left or right, or\n                press the Left or Right Arrow keys when quick navigation is\n                turned on. VO announces,the label, field type, and the status of\n                the checkbox.\n              </ListItem>\n              <ListItem>\n                When tapping on a toggle, or pressing VO+Space, VoiceOver\n                announces the new status of the toggle component as checked or\n                unchecked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Android screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Android version 9 with Talkback\n            <br />\n            - Chrome version 72.0.3683.103 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>Talkback test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate to the toggle components by swiping left or right, or\n                press the Left or Right Arrow keys. Talkback announces,the\n                label, field type, and the status of the checkbox.\n              </ListItem>\n              <ListItem>\n                When tapping on a toggle, or pressing the Alt-Enter keys,\n                Talkback announces the new status of the toggle component as\n                checked or not checked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","type":"Mdx","contentDigest":"7a33e572c91281a60aa2f913bdc56bc2","counter":1597,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\nimport {\n  StructuredListWrapper,\n  StructuredListHead,\n  StructuredListBody,\n  StructuredListRow,\n  StructuredListInput,\n  StructuredListCell,\n  OrderedList,\n  ListItem,\n} from 'carbon-components-react';\n\n<AnchorLinks>\n  <AnchorLink>How it works</AnchorLink>\n  <AnchorLink>Accessibility considerations</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n  <AnchorLink>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## How it works\n\nThe 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.\n\n## Accessibility considerations\n\nThis component has been validated to meet the [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and [Section 508](http://www.section508.gov/) 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.\n\n1. Each toggle control should have a clear and concise label.\n2. Users should be warned if selecting a toggle component will cause a change in context.\n3. The `id` for each component must be unique when more then one Carbon toggle component is present on a Web page.\n4. If the toggle is a required field include the [aria-required property](https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html) and indicate that it is a required field and use the validation message for input errors.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Accordion Design Pattern](https://www.w3.org/TR/wai-aria-practices/#accordion) covers the usage of ARIA names, state and roles, as well as the expected keyboard interactions.\n- [IBM Accessibility Checklist Checkpoint:](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html)\n  - [1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n  - [2.4.6 Headings and Labels](https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html) (WCAG Success Criteria [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))\n  - [3.2.2 On Input](https://www.ibm.com/able/guidelines/ci162/on_input.html) (WCAG Success Criteria [3.2.2](https://www.w3.org/WAI/WCAG21/Understanding/on-input))\n  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones).\n\n### Automated test\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>\n            Automated test environment\n          </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />\n            - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM\n            Accessibility WCAG 2.1 Sept. 2019 Ruleset\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>DAP test:</strong>\n            <br />- No violations\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### macOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) Test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press the Tab key to navigate to the first toggle component. VO\n                announces the label as Off, the state as unchecked, and that it\n                is a checkbox.\n              </ListItem>\n              <ListItem>\n                Press the Space key to change the state of the toggle component\n                On and Off.\n              </ListItem>\n              <ListItem>\n                Press the Tab key to navigate to the labeled toggle component.\n                VO announces the label as Off, the state as unchecked, that it\n                is a checkbox and the label.\n              </ListItem>\n              <ListItem>\n                Press the Tab key and the disabled toogle component is skipped.\n              </ListItem>\n              <ListItem>\n                Control-Option-Left arrow key back to the disabled toggle\n                component. VO announces that it is a disabled checkbox, dimmed\n                unchecked checkbox.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Safari version 13.0.2\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press the Tab key to navigate to the first toggle component. VO\n                announces the label as off, the state as unchecked, and that it\n                is a checkbox.\n              </ListItem>\n              <ListItem>\n                Press the Space key to change the state of the toggle component\n                on and off.\n              </ListItem>\n              <ListItem>\n                Press the Tab key to navigate to the labeled toggle component.\n                VO announces the label as off, the state as unchecked, that it\n                is a checkbox and the label.\n              </ListItem>\n              <ListItem>\n                Press the Tab key and the disabled toogle component is skipped.\n              </ListItem>\n              <ListItem>\n                Control-Option-Left arrow key back to the disabled toggle\n                component. VO announces that it is an off, dimmed unchecked\n                checkbox.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Windows screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment</StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - JAWS 19.1810.64\n            <br />\n            - Chrome version 73.0.3683.103 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate among the toggle component by pressing the Tab and\n                Shift-Tab keys, or X and Shift+X keys to jump to next or\n                previous checkboxes.\n              </ListItem>\n              <ListItem>\n                When navigating to a toggle, JAWS announces the label, checkbox,\n                and the status of the checkbox.\n              </ListItem>\n              <ListItem>\n                Disabled toggle components can only be found by using the Up and\n                Down Arrow keys, when JAWS announces \"disabled checkbox checkbox\n                unchecked unavailable\".\n              </ListItem>\n              <ListItem>\n                Press the Space key to select or deselect the toggle. JAWS\n                announces the status of checked or unchecked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - NVDA version 2018.4.1\n            <br />\n            - Chrome version 72.0.3683.103 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>NVDA test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate among the toggle components by pressing the Tab and\n                Shift-Tab keys, or X and Shift+X keys to jump to next or\n                previous checkboxes.\n              </ListItem>\n              <ListItem>\n                When navigating to a toggle, NVDA announces the label, checkbox,\n                and the status of the checkbox, but repeats the information\n                twice.\n              </ListItem>\n              <ListItem>\n                Disabled toggle components can only be found by using the Up and\n                Down Arrow keys, or the the X and Shift+X keys. NVDA announces\n                \"checkbox unavailable not checked disabled checkbox\".\n              </ListItem>\n              <ListItem>\n                Press the Space or Enter key to select or deselect the toggle.\n                NVDA announces the status of checked or unchecked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### iOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListRow head>\n        <StructuredListCell head>Environment </StructuredListCell>\n        <StructuredListCell head>Results</StructuredListCell>\n      </StructuredListRow>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - iOS version 13.1.3 with VoiceOver\n            <br />\n            - Safari version 13.1.3\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate to the toggle components by swiping left or right, or\n                press the Left or Right Arrow keys when quick navigation is\n                turned on. VO announces,the label, field type, and the status of\n                the checkbox.\n              </ListItem>\n              <ListItem>\n                When tapping on a toggle, or pressing VO+Space, VoiceOver\n                announces the new status of the toggle component as checked or\n                unchecked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Android screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Android version 9 with Talkback\n            <br />\n            - Chrome version 72.0.3683.103 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>Talkback test:</strong>\n            <OrderedList>\n              <ListItem>\n                Navigate to the toggle components by swiping left or right, or\n                press the Left or Right Arrow keys. Talkback announces,the\n                label, field type, and the status of the checkbox.\n              </ListItem>\n              <ListItem>\n                When tapping on a toggle, or pressing the Alt-Enter keys,\n                Talkback announces the new status of the toggle component as\n                checked or not checked.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/toggle/accessibility.mdx"}}}}