{"componentChunkName":"component---src-pages-components-inline-loading-accessibility-mdx","path":"/components/inline-loading/accessibility/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Inline Loading","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/inline-loading/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"c7a23b67-3e5e-5f03-b8da-a044c867ab3a","children":[],"parent":"87b0b1aa-e6e2-5572-a365-5eed0d2d0165","internal":{"content":"---\ntitle: Inline Loading\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 Carbon inline loading component is used to notify users that their action is being processed. W3C WAI-ARIA `role=\"alert\"` and `aria-live=\"assertive\"` are used to ensure screen reader users are also provided the same information.\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. If the inline loading message is changed, be sure it is clear and concise.\n\n## Resources\n\n- [IBM Accessibility Checklist - Checkpoint 4.1.3 Status Message](https://www.ibm.com/able/guidelines/ci162/status_messages_71.html) (WCAG Success Criteria [4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestone/57).\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\n</Row>\n\n### MacOS screen reader tests\n\n<Row>\n  <Column>\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                Tab to the \"Toggle state\" button. VO announces \"You are\n                currently on a button, to select this button press\n                Control-Option-Space.\"\n              </ListItem>\n              <ListItem>\n                Press Control-Option-Space keys. VO announces, \"Loading data.\"\n              </ListItem>\n              <ListItem>\n                Press Control-Option-Space keys again and VO announces, \"Data\n                loaded.\"\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            - Firefox version 67\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the \"Toggle state\" button. JAWS announces \"Toggle state\n                button, to activate press the Space bar.\"\n              </ListItem>\n              <ListItem>\n                Press the Space key. JAWS announces, \"Alert, Loading data.\"\n              </ListItem>\n              <ListItem>\n                Press the Space key again and JAWS announces, \"Alet, Data\n                loaded.\"\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                Swipe Right to the Toggle state button. VO announces, \"Toggle\n                state button.\"\n              </ListItem>\n              <ListItem>\n                Double tap to select the button. VO announces, \"Loading data\n                eclipse.\"\n              </ListItem>\n              <ListItem>\n                Double tap to select the button again. VO announces, \"Data\n                loaded.\"\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","type":"Mdx","contentDigest":"7a6041c619af19d4f9e6637bfe8c9046","counter":1337,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Inline Loading","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Inline Loading\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 Carbon inline loading component is used to notify users that their action is being processed. W3C WAI-ARIA `role=\"alert\"` and `aria-live=\"assertive\"` are used to ensure screen reader users are also provided the same information.\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. If the inline loading message is changed, be sure it is clear and concise.\n\n## Resources\n\n- [IBM Accessibility Checklist - Checkpoint 4.1.3 Status Message](https://www.ibm.com/able/guidelines/ci162/status_messages_71.html) (WCAG Success Criteria [4.1.3](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestone/57).\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\n</Row>\n\n### MacOS screen reader tests\n\n<Row>\n  <Column>\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                Tab to the \"Toggle state\" button. VO announces \"You are\n                currently on a button, to select this button press\n                Control-Option-Space.\"\n              </ListItem>\n              <ListItem>\n                Press Control-Option-Space keys. VO announces, \"Loading data.\"\n              </ListItem>\n              <ListItem>\n                Press Control-Option-Space keys again and VO announces, \"Data\n                loaded.\"\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            - Firefox version 67\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the \"Toggle state\" button. JAWS announces \"Toggle state\n                button, to activate press the Space bar.\"\n              </ListItem>\n              <ListItem>\n                Press the Space key. JAWS announces, \"Alert, Loading data.\"\n              </ListItem>\n              <ListItem>\n                Press the Space key again and JAWS announces, \"Alet, Data\n                loaded.\"\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                Swipe Right to the Toggle state button. VO announces, \"Toggle\n                state button.\"\n              </ListItem>\n              <ListItem>\n                Double tap to select the button. VO announces, \"Loading data\n                eclipse.\"\n              </ListItem>\n              <ListItem>\n                Double tap to select the button again. VO announces, \"Data\n                loaded.\"\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/inline-loading/accessibility.mdx"}}}}