Update to data table accessibility tab (#2759)

* Update to data table accessibility tab

Rewrite of content and addition of 4 images

* Update accessibility.mdx

fix gltich in link in section Controls inside tables

* Updated image and alt

Table sorting image update for clarity. Also added code styling on keyboard keys

* Updated images

Lauren's updates to the existing images

* Update accessibility.mdx

Update to ALT text for sorted column image

* Update accessibility.mdx

update to an ALT on annotation illustartion to match the update to the displayed text

* Updated image and image names

The existing images all used datatable (1 word). Renamed the data-table accessibility images to match.
Updated the column sorting image

* Update accessibility.mdx

fixed the link to accordions

* Update accessibility.mdx

Change to address Mike Abbink's request

* Fixed typo on accessibility.mdx

* Update accessibility.mdx

More iterations on the introductory paragraph.

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';
-
 <PageDescription>
 
-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.
 
 </PageDescription>
 
 <AnchorLinks>
-  <AnchorLink>Accessibility considerations</AnchorLink>
-  <AnchorLink>Resources</AnchorLink>
-  <AnchorLink>Accessibility testing</AnchorLink>
+  <AnchorLink>What Carbon provides</AnchorLink>
+  <AnchorLink>Design annotations</AnchorLink>
+  <AnchorLink>Developer considerations</AnchorLink>
 </AnchorLinks>
 
-## 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.
+
+<Row>
+<Column colLg={8}>
+
+![sortable table keyboard interaction](images/datatable-accessibility-1.png)
+
+</Column>
+</Row>
+
+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/)
+
+<Row>
+<Column colLg={8}>
+
+![tab order proceeds sequentially through the table row expansion icons then to a link inside an expanded row](images/datatable-accessibility-2.png)
+
+</Column>
+</Row>
+
+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. 
 
 <Row>
-  <Column noGutterSm>
-    <StructuredListWrapper>
-      <StructuredListHead>
-        <StructuredListRow head>
-          <StructuredListCell head>
-            Automated test environment
-          </StructuredListCell>
-          <StructuredListCell head>Results</StructuredListCell>
-        </StructuredListRow>
-      </StructuredListHead>
-      <StructuredListBody>
-        <StructuredListRow>
-          <StructuredListCell>
-            - macOS Mojave version 10.14.2 with VoiceOver
-            <br />
-            - Chrome version 77.0.3865.90
-            <br />
-            - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM
-            Accessibility WCAG 2.1 Sept. 2019 Ruleset
-            <br />- Carbon React version 7.7.1
-          </StructuredListCell>
-          <StructuredListCell>
-            <strong>DAP test:</strong>
-            <br />- Violations
-          </StructuredListCell>
-        </StructuredListRow>
-      </StructuredListBody>
-    </StructuredListWrapper>
-  </Column>
+<Column colLg={8}>
+
+![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)
+
+</Column>
 </Row>
+
+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.
+
+<Row>
+<Column colLg={8}>
+
+![the header row is annotated 'sortable headers'](images/datatable-accessibility-4.png)
+
+</Column>
+</Row>
+
+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