{"componentChunkName":"component---src-pages-components-form-accessibility-mdx","path":"/components/form/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Form","description":"Forms are used for submitting data. Consider each field and what value the data will provide.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/form/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"621ff9a0-5fee-5166-9f11-10dab536e639","children":[],"parent":"b42e7786-ba9b-5b7a-8819-3abf7efc068f","internal":{"content":"---\ntitle: Form\ndescription: Forms are used for submitting data. Consider each field and what value the data will provide.\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 form React Carbon component can contain any number of React Carbon components that are used to obtain input data from a user. Validation messages should be included to advise the user of data that is input incorrectly or a required field that is missing information. Helper text should also be used to provide instructions to help users understand how to complete the form fields as well as indicate any required and optional input, data formats, and other relevant information. See the individual form components for additional 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. Provide labels and instructions that are clear and concise.\n2. Carbon Components should be used to create the form fields.\n3. Provide [instructions](https://www.w3.org/WAI/tutorials/forms/instructions/) for completing the field. For example, passwords must contain at least eight letters and/or numbers.\n4. If the number input 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.\n5. Although the form component passes accessibility testing, content authors need to ensure all content that is added to the form is accessible.\n\n## Resources\n\n- [W3C Web Tutorial: Labeling Controls](https://www.w3.org/WAI/tutorials/forms/labels/).\n- [W3C Web Tutorial: Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/).\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  - [3.3.1 Error Identification](https://www.ibm.com/able/guidelines/ci162/error_id.html) (WCAG Success Criteria [3.3.1](http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html))\n  - [3.3.2 Labels and Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html))\n  - [3.3.3 Error Suggestion](https://www.ibm.com/able/guidelines/ci162/error_suggestion.html) (WCAG Success Criteria [3.3.3](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-suggestions.html))\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\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones). For screen reader test results refer to the Accessibility guidance for each Carbon Component form control used.\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":"f3a3fe288a71fb1fbb46bc34ccf49489","counter":1516,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Form","description":"Forms are used for submitting data. Consider each field and what value the data will provide.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Form\ndescription: Forms are used for submitting data. Consider each field and what value the data will provide.\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 form React Carbon component can contain any number of React Carbon components that are used to obtain input data from a user. Validation messages should be included to advise the user of data that is input incorrectly or a required field that is missing information. Helper text should also be used to provide instructions to help users understand how to complete the form fields as well as indicate any required and optional input, data formats, and other relevant information. See the individual form components for additional 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. Provide labels and instructions that are clear and concise.\n2. Carbon Components should be used to create the form fields.\n3. Provide [instructions](https://www.w3.org/WAI/tutorials/forms/instructions/) for completing the field. For example, passwords must contain at least eight letters and/or numbers.\n4. If the number input 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.\n5. Although the form component passes accessibility testing, content authors need to ensure all content that is added to the form is accessible.\n\n## Resources\n\n- [W3C Web Tutorial: Labeling Controls](https://www.w3.org/WAI/tutorials/forms/labels/).\n- [W3C Web Tutorial: Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/).\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  - [3.3.1 Error Identification](https://www.ibm.com/able/guidelines/ci162/error_id.html) (WCAG Success Criteria [3.3.1](http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html))\n  - [3.3.2 Labels and Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html))\n  - [3.3.3 Error Suggestion](https://www.ibm.com/able/guidelines/ci162/error_suggestion.html) (WCAG Success Criteria [3.3.3](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-suggestions.html))\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\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones). For screen reader test results refer to the Accessibility guidance for each Carbon Component form control used.\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/form/accessibility.mdx"}}}}