{"componentChunkName":"component---src-pages-components-date-picker-accessibility-mdx","path":"/components/date-picker/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Date picker","description":"Date and time pickers allow users to select a single or a range of dates and times.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/date-picker/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"bafb705e-8e6f-512d-923e-57a3b2e6717d","children":[],"parent":"047696a7-f218-5895-8276-ee0e9d8fb600","internal":{"content":"---\ntitle: Date picker\ndescription: Date and time pickers allow users to select a single or a range of dates and times.\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<PageDescription>\n\nThe date picker React Carbon component has been tested against the latest\n[W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success\ncriteria](https://www.w3.org/TR/WCAG21/) and violations have been identified\nas high priority issues. This document will be updated when these\naccessibility issues are resolved.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Accessibility considerations</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n  <AnchorLink>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## Accessibility considerations\n\n1. The date picker labels should clearly describe the dates that the user needs to input, such as arrival date or departure date when making travel arrangements.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Date Picker Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.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 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n  - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/guidelines/ci162/meaningful_sequence.html) (WCAG Success Criteria [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence))\n  - [2.1.1 Keyboard](https://www.ibm.com/able/guidelines/ci162/keyboard.html) (WCAG Success Criteria [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))\n  - [2.1.2 No Keyboard Trap](https://www.ibm.com/able/guidelines/ci162/no_keyboard_trap.html) (WCAG Success Criteria [2.1.2](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap))\n  - [2.4.3 Focus Order](https://www.ibm.com/able/guidelines/ci162/focus_order.html) (WCAG Success Criteria [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))\n  - [2.4.6 Headings and Labels](https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html) (WCAG Success Criteria [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))\n  - [2.4.7 Focus Visible](https://www.ibm.com/able/guidelines/ci162/focus_visible.html) (WCAG Success Criteria [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))\n  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html))\n\n## Accessibility testing\n\nAutomated, manual and screen reader accessibility verification test has been performed on the date picker 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.\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.2 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</Row>\n","type":"Mdx","contentDigest":"fdd7a733ce25601959c0aa760f3d23d2","counter":1503,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Date picker","description":"Date and time pickers allow users to select a single or a range of dates and times.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Date picker\ndescription: Date and time pickers allow users to select a single or a range of dates and times.\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<PageDescription>\n\nThe date picker React Carbon component has been tested against the latest\n[W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success\ncriteria](https://www.w3.org/TR/WCAG21/) and violations have been identified\nas high priority issues. This document will be updated when these\naccessibility issues are resolved.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Accessibility considerations</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n  <AnchorLink>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## Accessibility considerations\n\n1. The date picker labels should clearly describe the dates that the user needs to input, such as arrival date or departure date when making travel arrangements.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Date Picker Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.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 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n  - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/guidelines/ci162/meaningful_sequence.html) (WCAG Success Criteria [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence))\n  - [2.1.1 Keyboard](https://www.ibm.com/able/guidelines/ci162/keyboard.html) (WCAG Success Criteria [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))\n  - [2.1.2 No Keyboard Trap](https://www.ibm.com/able/guidelines/ci162/no_keyboard_trap.html) (WCAG Success Criteria [2.1.2](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap))\n  - [2.4.3 Focus Order](https://www.ibm.com/able/guidelines/ci162/focus_order.html) (WCAG Success Criteria [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))\n  - [2.4.6 Headings and Labels](https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html) (WCAG Success Criteria [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))\n  - [2.4.7 Focus Visible](https://www.ibm.com/able/guidelines/ci162/focus_visible.html) (WCAG Success Criteria [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))\n  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html))\n\n## Accessibility testing\n\nAutomated, manual and screen reader accessibility verification test has been performed on the date picker 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.\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.2 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</Row>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/date-picker/accessibility.mdx"}}}}