diff --git a/src/pages/components/checkbox/accessibility.mdx b/src/pages/components/checkbox/accessibility.mdx index de233da0aa6..304dca51c17 100644 --- a/src/pages/components/checkbox/accessibility.mdx +++ b/src/pages/components/checkbox/accessibility.mdx @@ -6,417 +6,72 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- -import { - StructuredListWrapper, - StructuredListHead, - StructuredListBody, - StructuredListRow, - StructuredListInput, - StructuredListCell, - OrderedList, - ListItem, -} from 'carbon-components-react'; + + +Design annotations are needed for specific instances shown below, but for the standard checkbox component, Carbon already incorporates accessibility. + + - How it works - Accessibility considerations - Resources - Accessibility testing + What Carbon provides + Design recommendations + Development considerations -## How it works +## What Carbon provides -The 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. +Carbon bakes keyboard operation into its components, improving the experience of blind users and others who operate via the keyboard. Carbon incorporates many other accessibility considerations, some of which are described below. -The `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. +### Keyboard interactions -## Accessibility considerations +Each checkbox can be reached by `Tab` and selected with `Space` independently. This matches the established HTML interaction pattern. + + + -This 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. +![example of checkbox keyboard interaction](images/checkbox-accessibility-1.png) -1. Checkboxes must have a clear and concise label. -2. Users should be warned if selecting a checkbox will cause a change in - context. -3. 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. +Carbon checkboxes retain expected interactions. -## Resources + + -#### Helpful resources for creating customized accessible implementations +### Grouping -- [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 interactions. -- [IBM Accessibility Requirements:](https://www.ibm.com/able/requirements/requirements/) - - [1.3.1 Information and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1) - (WCAG Success Criteria - [1.3.1](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/content-structure-separation-programmatic.html)) - - [3.3.2 Labels or Instructions](https://www.ibm.com/able/requirements/requirements/#3_3_2) - (WCAG Success Criteria - [3.3.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)) - - [4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2) - (WCAG Success Criteria - [4.2.1](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)) +For groups of checkboxes, Carbon already provides the code for screen readers to properly detect the set of checkboxes and announce the group label. -## Accessibility testing + + -Accessibility issues are tracked in the -[Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+label%3A%22type%3A+a11y+%E2%99%BF%22+label%3A%22component%3A+checkbox%22+). +![checkbox items with group label](images/checkbox-accessibility-2.png) -### Automated test +Carbon handles the accessibility of grouped checkboxes. - - - - - - - Automated test environment - - Results - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Chrome Version 77.0.3865.90 -
- - Dynamic Assessment Plugin Version 1.8.0.0 - IBM Accessibility WCAG - 2.1 Sept. 2019 Ruleset -
- Carbon React Version 7.7.1 -
- - DAP Test -
- Violations -
-
-
-
-
+
-### macOS Screen reader tests +## Design recommendations - - - - - - 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: - - - Press the Tab key to navigate to the first checkbox. VO - announces the label, the state as checked, that it is a checkbox - input and the label group. - - - Press the Space key to select or deselect the checkbox. - - - Press the Tab key to navigate to the indeterminable checkbox. VO - announces the label, and the state as mixed. - - - Press the Space key to select or deselect the checkbox. - - - Press the Tab key and the disabled checkbox is skipped. - - - Control-Option-Left Arrow key to read the disabled field. VO - announces, "Disabled checkbox, dimmed unchecked checkbox". - - - Tab to the next group of checkboxes with the same results. - - - -
- - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Safari Version 13.0.2 -
- Carbon React Version 7.7.1 -
- - VoiceOver(VO) Test: - - - Press the Tab key to navigate to the first checkbox. VO - announces the label, the state as checked, the checkbox legend - and the group. - - - Press the Space key to select or deselect the checkbox. - - - Press the Tab key to navigate to the indeterminable checkbox. VO - announces the label, and the state as unchecked (Note: The mixed - state is not announced). - - - Press the Space key to select or deselect the checkbox. - - - Press the Tab key and the disabled checkbox is skipped. - - - Control-Option-Left Arrow key to read the disabled field. VO - announces, "Off off dimmed unchecked checkbox". - - - Tab to the next group of checkboxes with the same results. - - - -
-
-
-
-
+Design annotations are needed for the following instances. + +### Meaningful order -### Windows screen reader tests +Checkboxes can appear in multiple columns. If there is a meaningful order to the items (such as days of the week), annotate whether the tab order is by row or by column. See [Specify the tab order](https://www.ibm.com/able/toolkit/design/ux/navigation/#tab-order). - - - - - Environment - Results - - - - - - - Microsoft Windows 10 -
- - Firefox Version 67 -
- - JAWS 19.1810.64 -
- Carbon React Version 7.7.1 -
- - JAWS test: - - - Navigate among check boxes by pressing the Tab and Shift-Tab - keys, or X and Shift+X keys to jump to next or previous - checkboxes. - - - When navigating to a checkbox, JAWS announces the label, - checkbox, and the status of the checkbox. - - - Disabled checkboxes can only be found by using the Up and Down - Arrow keys, when JAWS. - - - Press the Space key to select or deselect the checkbox. JAWS - announces the status of checked or unchecked. - - - -
- - - - Microsoft Windows 10 -
- - Chrome Version 73.0.3683.103 (Official Build) (64-bit) -
- - JAWS Version 19.1810.64 -
- Carbon React Version 7.7.1 -
- - JAWS test: - - - Navigate among check boxes by pressing the Tab and Shift-Tab - keys, or X and Shift+X keys to jump to next or previous - checkboxes. - - - When navigating to a checkbox, JAWS announces the label, - checkbox, and the status of the checkbox. - - - Disabled checkboxes can only be found by using the Up and Down - Arrow keys, when JAWS announces "disabled checkbox checkbox - unchecked unavailable". - - - Press the Space key to select or deselect the checkbox. JAWS - announces the status of checked or unchecked. - - - -
- - - - Microsoft Windows 10 -
- - Chrome Version 73.0.3683.103 (Official Build) (64-bit) -
- - NVDA Version 2018.4.1 -
- Carbon React Version 7.7.1 -
- - NVDA test: - - - Navigate among check boxes by pressing the Tab and Shift-Tab - keys, or X and Shift+X keys to jump to next or previous - checkboxes. - - - When navigating to a checkbox, NVDA announces the label, - checkbox, and the status of the checkbox, but repeats the - information twice. - - - When navigating to an indeterminable checkbox NVDA announces, - "indeterminate checkbox indeterminate checkbox checkbox half - checked". - - - Disabled checkboxes 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". - - - Press the Space or Enter key to select or deselect the checkbox. - NVDA announces the status of checked or unchecked. - - - -
-
-
-
-
+ -### Android screen reader tests +![checkboxes with instruction to ‘navigate in columns'](images/checkbox-accessibility-3.png) - - - - - - Environment - Results - - - - - - - Android Version 9 with Talkback -
- - Chrome Version 73.0.3683.103 (Official Build) (64-bit) -
- Carbon React Version 7.7.1 -
- - Talkback Test: - - - Navigate to the checkbox 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. - - - The status of indeterminate checkboxes is not announced - properly, Talkback only announces checked or unchecked. - - - When tapping on a checkbox, or pressing the Alt-Enter keys, - Talkback announces the new status of the checkbox as checked or - not checked. - - - -
-
-
-
+Annotate if there is meaningful navigation order in rows of checkboxes. + +
-### iOS screen reader tests +## Development considerations - - - - - Environment - Results - - - - - - iOS Version 13.1.3 with VoiceOver -
- - Safari Version 13.1.3 -
- Carbon React Version 7.7.1 -
- - VoiceOver Test: - - - Navigate to the checkbox by swiping left or right, or press the - Left-Arrow or Right-Arrow keys when quick navigation is turned - on. VO announces,the label, field type, and the status of the - checkbox. - - - The status of indeterminate checkboxes is not announced - properly, VoiceOver only announces checked or unchecked. - - - VoiceOver announces the beginning of the list, nesting level, - content of the list item, the end of the list. - - - When tapping on a checkbox, or pressing VO+Space, VoiceOver - announces the new status of the checkbox as checked or - unchecked. - - - -
-
-
-
-
+Keep these considerations in mind if you are modifying Carbon or creating a custom component: + +* Checkboxes are grouped using `
` and ``. +* A tri-state checkbox that is partially checked (indeterminate) has `aria-checked` set to `"mixed"`. See [Behaviors](https://carbondesignsystem.com/components/checkbox/usage/#behaviors) on the Usage tab for details. +* See the [ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox) for more considerations. \ No newline at end of file diff --git a/src/pages/components/checkbox/images/checkbox-accessibility-1.png b/src/pages/components/checkbox/images/checkbox-accessibility-1.png new file mode 100644 index 00000000000..7484248ba92 Binary files /dev/null and b/src/pages/components/checkbox/images/checkbox-accessibility-1.png differ diff --git a/src/pages/components/checkbox/images/checkbox-accessibility-2.png b/src/pages/components/checkbox/images/checkbox-accessibility-2.png new file mode 100644 index 00000000000..a5e8ba4e3c5 Binary files /dev/null and b/src/pages/components/checkbox/images/checkbox-accessibility-2.png differ diff --git a/src/pages/components/checkbox/images/checkbox-accessibility-3.png b/src/pages/components/checkbox/images/checkbox-accessibility-3.png new file mode 100644 index 00000000000..bedd3dad8c1 Binary files /dev/null and b/src/pages/components/checkbox/images/checkbox-accessibility-3.png differ