diff --git a/src/pages/components/data-table/accessibility.mdx b/src/pages/components/data-table/accessibility.mdx index 80a0599d7d5..33300bb3c28 100644 --- a/src/pages/components/data-table/accessibility.mdx +++ b/src/pages/components/data-table/accessibility.mdx @@ -6,109 +6,81 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- -import { - StructuredListWrapper, - StructuredListHead, - StructuredListBody, - StructuredListRow, - StructuredListInput, - StructuredListCell, - OrderedList, - ListItem, -} from 'carbon-components-react'; - -The data table React Carbon component has been tested against the latest -[W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) -and violations have been identified as high priority issues. This document will -be updated when these accessibility issues are resolved. +Design annotations are needed for specific instances shown below, but for the standard data table component, Carbon already incorporates accessibility. - Accessibility considerations - Resources - Accessibility testing + What Carbon provides + Design annotations + Developer considerations -## Accessibility considerations - -1. The data table headers accurately describe the data contained in the rows and - columns. -2. If the data table has a labels it should be clear and concise. -3. If the data table has a caption or description, `aria-describedby` should be - set on the table element with a value referring to the element containing the - description. - -## Resources - -- [W3C WAI-ARIA Authoring Practices Table Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#table) - covers the usage of ARIA names, state and roles, as well as the expected - keyboard interactions. -- [W3C Tutorial - Table Concepts](https://www.w3.org/WAI/tutorials/tables/) - covers the usage of various tables, headers, and captions. -- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/): - - [1.3.1 Info and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1) - (WCAG Success Criteria - [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)) - - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/requirements/requirements/#1_3_2) - (WCAG Success Criteria - [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence)) - - [2.1.1 Keyboard](https://www.ibm.com/able/requirements/requirements/#2_1_1) - (WCAG Success Criteria - [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)) - - [2.4.3 Focus Order](https://www.ibm.com/able/requirements/requirements/#2_4_3) - (WCAG Success Criteria - [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order)) - - [2.4.6 Headings and Labels](https://www.ibm.com/able/requirements/requirements/#2_4_6) - (WCAG Success Criteria - [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels)) - - [2.4.7 Focus Visible](https://www.ibm.com/able/requirements/requirements/#2_4_7) - (WCAG Success Criteria - [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)) - - [4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2) - (WCAG Success Criteria - [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)) - -## Accessibility testing - -Automated, manual and screen reader accessibility verification test has been -performed on the data table React Carbon component. -[WCAG 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) issues -have been identified and the list of open accessibility violations is available -in the Carbon Component GitHub repository. - -### Automated test +## What Carbon provides + +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. + +### Keyboard interaction + +There are three data table variants with different interactions. Optional features like column sorting can appear in any of the variants. Table [pagination](https://www.carbondesignsystem.com/components/pagination/usage/) is treated as a separate component. + + + + +![sortable table keyboard interaction](images/datatable-accessibility-1.png) + + + + +For sortable tables, the column headers are reachable by `Tab` and sortable with `Space` or `Enter`. + +### Controls inside tables + +Any interactive controls in data cells are in the tab order and maintain normal keyboard operation. This also applies to expandable table rows, which operate in the same manner as [accordions](https://www.carbondesignsystem.com/components/accordions/usage/) + + + + +![tab order proceeds sequentially through the table row expansion icons then to a link inside an expanded row](images/datatable-accessibility-2.png) + + + + +Links, inputs, and other interactive controls inside tables operate by keyboard as normal. + +### Labelling and updates + +If columns are sortable, the sort symbols appear on hover or focus. A sorted column retains an indicator until it is no longer sorted. - - - - - - Automated test environment - - Results - - - - - - - macOS Mojave version 10.14.2 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: -
- Violations - - - - - + + +![The Rule column header has focus and shows a sortable icon, and the Status column header has a 'sorted ascending' icon](images/datatable-accessibility-3.png) + + + +Sort indicators appear on hover and focus. A sorted column is indicated visually. + +## Design annotations + +Since there is no persistent visual indicator that a table is sortable, designers need to annotate if a table should be implemented with sortable column headers. + + + + +![the header row is annotated 'sortable headers'](images/datatable-accessibility-4.png) + + + + +Annotate if a table is sortable. + +## Developer considerations + +Keep this in mind if you’re modifying Carbon or creating a custom component: + +* Column sorting indicators are matched programmatically using `aria-sort` +* See the [ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#table) for more considerations diff --git a/src/pages/components/data-table/images/datatable-accessibility-1.png b/src/pages/components/data-table/images/datatable-accessibility-1.png new file mode 100644 index 00000000000..b532388cfc2 Binary files /dev/null and b/src/pages/components/data-table/images/datatable-accessibility-1.png differ diff --git a/src/pages/components/data-table/images/datatable-accessibility-2.png b/src/pages/components/data-table/images/datatable-accessibility-2.png new file mode 100644 index 00000000000..a7505fc562c Binary files /dev/null and b/src/pages/components/data-table/images/datatable-accessibility-2.png differ diff --git a/src/pages/components/data-table/images/datatable-accessibility-3.png b/src/pages/components/data-table/images/datatable-accessibility-3.png new file mode 100644 index 00000000000..d1bd3e17001 Binary files /dev/null and b/src/pages/components/data-table/images/datatable-accessibility-3.png differ diff --git a/src/pages/components/data-table/images/datatable-accessibility-4.png b/src/pages/components/data-table/images/datatable-accessibility-4.png new file mode 100644 index 00000000000..e2a26c14257 Binary files /dev/null and b/src/pages/components/data-table/images/datatable-accessibility-4.png differ