{"componentChunkName":"component---src-pages-components-checkbox-accessibility-mdx","path":"/components/checkbox/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Checkbox","description":"Checkboxes are used for a list of options where the user may select multiple options, including all or none.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/checkbox/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"b05f1faf-c33a-50ec-8978-42974bf2ad22","children":[],"parent":"f26dbeed-2ac2-513e-b09d-d5eefa5c6364","internal":{"content":"---\ntitle: Checkbox\ndescription: Checkboxes are used for a list of options where the user may select multiple options, including all or none.\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\n How it works\n Accessibility considerations\n Resources\n Accessibility testing\n\n\n## How it works\n\nThe Checkbox component is used to provide a list of options where the user can select multiple options, including all or none. A checkbox control has three possible states indicated by the value of its `aria-checked` attribute, “true” when selected, “false” when unselected and “mixed” when in the indeterminate state. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.\n\nThe `Tab` key is used to move focus to each checkbox. Checkboxes identified as disabled are ignored in the tab order. The `Space` key is used to select and deselect each checkbox when the checkbox has focus. When the checkbox is selected the ARIA state is set to `aria-checked=\"true\"` and when it is deselected `aria-checked=\"false\"`. An indeterminable checkbox has an ARIA state that is set to `aria-checked=\"mixed\"` until it is selected or deselected by the user. Fieldset and Legend elements are used for labeling the checkbox group.\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. Checkboxes must have a clear and concise label.\n2. Users should be warned if selecting a checkbox will cause a change in context.\n3. If the checkbox 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**Helpful resources for creating customized accessible implementations**\n\n- [W3C WAI-ARIA Authoring Practices Checkbox Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html) covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.\n- [IBM Accessibility Checklist Checkpoint:](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html)\n - [1.3.1 Information and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/content-structure-separation-programmatic.html))\n - [3.3.2 Labels and Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.2.1](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value))\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\n \n \n \n \n \n Automated test environment\n \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome Version 77.0.3865.90\n
\n - Dynamic Assessment Plugin Version 1.8.0.0 - IBM Accessibility WCAG\n 2.1 Sept. 2019 Ruleset\n
- Carbon React Version 7.7.1\n \n \n DAP Test\n
- Violations\n \n \n \n \n \n\n\n### macOS Screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome Version 77.0.3865.90\n
- Carbon React Version 7.7.1\n \n \n VoiceOver(VO) Test:\n \n \n Press the Tab key to navigate to the first checkbox. VO\n announces the label, the state as checked, that it is a checkbox\n input and the label group.\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key to navigate to the indeterminable checkbox. VO\n announces the label, and the state as mixed.\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key and the disabled checkbox is skipped.\n \n \n Control-Option-Left Arrow key to read the disabled field. VO\n announces, \"Disabled checkbox, dimmed unchecked checkbox\".\n \n \n Tab to the next group of checkboxes with the same results.\n \n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Safari Version 13.0.2\n
- Carbon React Version 7.7.1\n \n \n VoiceOver(VO) Test:\n \n \n Press the Tab key to navigate to the first checkbox. VO\n announces the label, the state as checked, the checkbox legend\n and the group.\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key to navigate to the indeterminable checkbox. VO\n announces the label, and the state as unchecked (Note: The mixed\n state is not announced).\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key and the disabled checkbox is skipped.\n \n \n Control-Option-Left Arrow key to read the disabled field. VO\n announces, \"Off off dimmed unchecked checkbox\".\n \n \n Tab to the next group of checkboxes with the same results.\n \n \n \n \n \n \n \n\n\n### Windows screen reader tests\n\n\n \n \n \n \n Environment\n Results\n \n \n \n \n \n - Microsoft Windows 10\n
\n - Firefox Version 67\n
\n - JAWS 19.1810.64\n
- Carbon React Version 7.7.1\n \n \n JAWS test:\n \n \n Navigate among check boxes by pressing the Tab and Shift-Tab\n keys, or X and Shift+X keys to jump to next or previous\n checkboxes.\n \n \n When navigating to a checkbox, JAWS announces the label,\n checkbox, and the status of the checkbox.\n \n \n Disabled checkboxes can only be found by using the Up and Down\n Arrow keys, when JAWS.\n \n \n Press the Space key to select or deselect the checkbox. JAWS\n announces the status of checked or unchecked.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - Chrome Version 73.0.3683.103 (Official Build) (64-bit)\n
\n - JAWS Version 19.1810.64\n
- Carbon React Version 7.7.1\n \n \n JAWS test:\n \n \n Navigate among check boxes by pressing the Tab and Shift-Tab\n keys, or X and Shift+X keys to jump to next or previous\n checkboxes.\n \n \n When navigating to a checkbox, JAWS announces the label,\n checkbox, and the status of the checkbox.\n \n \n Disabled checkboxes can only be found by using the Up and Down\n Arrow keys, when JAWS announces \"disabled checkbox checkbox\n unchecked unavailable\".\n \n \n Press the Space key to select or deselect the checkbox. JAWS\n announces the status of checked or unchecked.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - Chrome Version 73.0.3683.103 (Official Build) (64-bit)\n
\n - NVDA Version 2018.4.1\n
- Carbon React Version 7.7.1\n \n \n NVDA test:\n \n \n Navigate among check boxes by pressing the Tab and Shift-Tab\n keys, or X and Shift+X keys to jump to next or previous\n checkboxes.\n \n \n When navigating to a checkbox, NVDA announces the label,\n checkbox, and the status of the checkbox, but repeats the\n information twice.\n \n \n When navigating to an indeterminable checkbox NVDA announces,\n \"indeterminate checkbox indeterminate checkbox checkbox half\n checked\".\n \n \n Disabled checkboxes can only be found by using the Up and Down\n Arrow keys, or the the X and Shift+X keys. NVDA announces\n \"checkbox unavailable not checked disabled checkbox\".\n \n \n Press the Space or Enter key to select or deselect the checkbox.\n NVDA announces the status of checked or unchecked.\n \n \n \n \n \n \n \n\n\n### Android screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - Android Version 9 with Talkback\n
\n - Chrome Version 73.0.3683.103 (Official Build) (64-bit)\n
- Carbon React Version 7.7.1\n \n \n Talkback Test:\n \n \n Navigate to the checkbox by swiping left or right, or press the\n Left or Right Arrow keys. Talkback announces,the label, field\n type, and the status of the checkbox.\n \n \n The status of indeterminate checkboxes is not announced\n properly, Talkback only announces checked or unchecked.\n \n \n When tapping on a checkbox, or pressing the Alt-Enter keys,\n Talkback announces the new status of the checkbox as checked or\n not checked.\n \n \n \n \n \n \n \n\n\n### iOS screen reader tests\n\n\n \n \n \n Environment \n Results\n \n \n \n \n - iOS Version 13.1.3 with VoiceOver\n
\n - Safari Version 13.1.3\n
- Carbon React Version 7.7.1\n \n \n VoiceOver Test:\n \n \n Navigate to the checkbox by swiping left or right, or press the\n Left-Arrow or Right-Arrow keys when quick navigation is turned\n on. VO announces,the label, field type, and the status of the\n checkbox.\n \n \n The status of indeterminate checkboxes is not announced\n properly, VoiceOver only announces checked or unchecked.\n \n \n VoiceOver announces the beginning of the list, nesting level,\n content of the list item, the end of the list.\n \n \n When tapping on a checkbox, or pressing VO+Space, VoiceOver\n announces the new status of the checkbox as checked or\n unchecked.\n \n \n \n \n \n \n \n\n","type":"Mdx","contentDigest":"f5ada4abed9eccb52fc7b2a0e1e4ff7d","counter":1487,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Checkbox","description":"Checkboxes are used for a list of options where the user may select multiple options, including all or none.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Checkbox\ndescription: Checkboxes are used for a list of options where the user may select multiple options, including all or none.\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\n How it works\n Accessibility considerations\n Resources\n Accessibility testing\n\n\n## How it works\n\nThe Checkbox component is used to provide a list of options where the user can select multiple options, including all or none. A checkbox control has three possible states indicated by the value of its `aria-checked` attribute, “true” when selected, “false” when unselected and “mixed” when in the indeterminate state. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.\n\nThe `Tab` key is used to move focus to each checkbox. Checkboxes identified as disabled are ignored in the tab order. The `Space` key is used to select and deselect each checkbox when the checkbox has focus. When the checkbox is selected the ARIA state is set to `aria-checked=\"true\"` and when it is deselected `aria-checked=\"false\"`. An indeterminable checkbox has an ARIA state that is set to `aria-checked=\"mixed\"` until it is selected or deselected by the user. Fieldset and Legend elements are used for labeling the checkbox group.\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. Checkboxes must have a clear and concise label.\n2. Users should be warned if selecting a checkbox will cause a change in context.\n3. If the checkbox 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**Helpful resources for creating customized accessible implementations**\n\n- [W3C WAI-ARIA Authoring Practices Checkbox Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html) covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.\n- [IBM Accessibility Checklist Checkpoint:](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html)\n - [1.3.1 Information and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/content-structure-separation-programmatic.html))\n - [3.3.2 Labels and Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.2.1](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value))\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\n \n \n \n \n \n Automated test environment\n \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome Version 77.0.3865.90\n
\n - Dynamic Assessment Plugin Version 1.8.0.0 - IBM Accessibility WCAG\n 2.1 Sept. 2019 Ruleset\n
- Carbon React Version 7.7.1\n \n \n DAP Test\n
- Violations\n \n \n \n \n \n\n\n### macOS Screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome Version 77.0.3865.90\n
- Carbon React Version 7.7.1\n \n \n VoiceOver(VO) Test:\n \n \n Press the Tab key to navigate to the first checkbox. VO\n announces the label, the state as checked, that it is a checkbox\n input and the label group.\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key to navigate to the indeterminable checkbox. VO\n announces the label, and the state as mixed.\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key and the disabled checkbox is skipped.\n \n \n Control-Option-Left Arrow key to read the disabled field. VO\n announces, \"Disabled checkbox, dimmed unchecked checkbox\".\n \n \n Tab to the next group of checkboxes with the same results.\n \n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Safari Version 13.0.2\n
- Carbon React Version 7.7.1\n \n \n VoiceOver(VO) Test:\n \n \n Press the Tab key to navigate to the first checkbox. VO\n announces the label, the state as checked, the checkbox legend\n and the group.\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key to navigate to the indeterminable checkbox. VO\n announces the label, and the state as unchecked (Note: The mixed\n state is not announced).\n \n \n Press the Space key to select or deselect the checkbox.\n \n \n Press the Tab key and the disabled checkbox is skipped.\n \n \n Control-Option-Left Arrow key to read the disabled field. VO\n announces, \"Off off dimmed unchecked checkbox\".\n \n \n Tab to the next group of checkboxes with the same results.\n \n \n \n \n \n \n \n\n\n### Windows screen reader tests\n\n\n \n \n \n \n Environment\n Results\n \n \n \n \n \n - Microsoft Windows 10\n
\n - Firefox Version 67\n
\n - JAWS 19.1810.64\n
- Carbon React Version 7.7.1\n \n \n JAWS test:\n \n \n Navigate among check boxes by pressing the Tab and Shift-Tab\n keys, or X and Shift+X keys to jump to next or previous\n checkboxes.\n \n \n When navigating to a checkbox, JAWS announces the label,\n checkbox, and the status of the checkbox.\n \n \n Disabled checkboxes can only be found by using the Up and Down\n Arrow keys, when JAWS.\n \n \n Press the Space key to select or deselect the checkbox. JAWS\n announces the status of checked or unchecked.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - Chrome Version 73.0.3683.103 (Official Build) (64-bit)\n
\n - JAWS Version 19.1810.64\n
- Carbon React Version 7.7.1\n \n \n JAWS test:\n \n \n Navigate among check boxes by pressing the Tab and Shift-Tab\n keys, or X and Shift+X keys to jump to next or previous\n checkboxes.\n \n \n When navigating to a checkbox, JAWS announces the label,\n checkbox, and the status of the checkbox.\n \n \n Disabled checkboxes can only be found by using the Up and Down\n Arrow keys, when JAWS announces \"disabled checkbox checkbox\n unchecked unavailable\".\n \n \n Press the Space key to select or deselect the checkbox. JAWS\n announces the status of checked or unchecked.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - Chrome Version 73.0.3683.103 (Official Build) (64-bit)\n
\n - NVDA Version 2018.4.1\n
- Carbon React Version 7.7.1\n \n \n NVDA test:\n \n \n Navigate among check boxes by pressing the Tab and Shift-Tab\n keys, or X and Shift+X keys to jump to next or previous\n checkboxes.\n \n \n When navigating to a checkbox, NVDA announces the label,\n checkbox, and the status of the checkbox, but repeats the\n information twice.\n \n \n When navigating to an indeterminable checkbox NVDA announces,\n \"indeterminate checkbox indeterminate checkbox checkbox half\n checked\".\n \n \n Disabled checkboxes can only be found by using the Up and Down\n Arrow keys, or the the X and Shift+X keys. NVDA announces\n \"checkbox unavailable not checked disabled checkbox\".\n \n \n Press the Space or Enter key to select or deselect the checkbox.\n NVDA announces the status of checked or unchecked.\n \n \n \n \n \n \n \n\n\n### Android screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - Android Version 9 with Talkback\n
\n - Chrome Version 73.0.3683.103 (Official Build) (64-bit)\n
- Carbon React Version 7.7.1\n \n \n Talkback Test:\n \n \n Navigate to the checkbox by swiping left or right, or press the\n Left or Right Arrow keys. Talkback announces,the label, field\n type, and the status of the checkbox.\n \n \n The status of indeterminate checkboxes is not announced\n properly, Talkback only announces checked or unchecked.\n \n \n When tapping on a checkbox, or pressing the Alt-Enter keys,\n Talkback announces the new status of the checkbox as checked or\n not checked.\n \n \n \n \n \n \n \n\n\n### iOS screen reader tests\n\n\n \n \n \n Environment \n Results\n \n \n \n \n - iOS Version 13.1.3 with VoiceOver\n
\n - Safari Version 13.1.3\n
- Carbon React Version 7.7.1\n \n \n VoiceOver Test:\n \n \n Navigate to the checkbox by swiping left or right, or press the\n Left-Arrow or Right-Arrow keys when quick navigation is turned\n on. VO announces,the label, field type, and the status of the\n checkbox.\n \n \n The status of indeterminate checkboxes is not announced\n properly, VoiceOver only announces checked or unchecked.\n \n \n VoiceOver announces the beginning of the list, nesting level,\n content of the list item, the end of the list.\n \n \n When tapping on a checkbox, or pressing VO+Space, VoiceOver\n announces the new status of the checkbox as checked or\n unchecked.\n \n \n \n \n \n \n \n\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/checkbox/accessibility.mdx"}}}}