{"componentChunkName":"component---src-pages-components-text-input-accessibility-mdx","path":"/components/text-input/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Text input","description":"Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/text-input/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"f1bc83a5-01c9-5a4c-a661-7cc5fce023b3","children":[],"parent":"f9d0f10e-71d8-51af-ac50-b06877188d99","internal":{"content":"---\ntitle: Text input\ndescription: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.\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 text input components are form fields that are provided for user input of text information. The validation message should be included to advise the user of text that is input incorrectly or a required field that is missing. The optional helper text should be used to provide instructions to help users understand how to complete the text field as well as indicate any required and optional input, data formats, and other relevant information.\n\n## Accessibility considerations\n\n1. Provide labels and instructions that are clear and concise.\n2. Provide [instructions](https://www.w3.org/WAI/tutorials/forms/instructions/) for completing the field. For example, Passwords must contain at least 8 letters and/or numbers.\n3. If the text 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 and use the validation message for input errors.\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 Information and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/content-structure-separation-programmatic.html))\n  - [3.3.1 Error Identification](https://www.ibm.com/able/guidelines/ci162/error_id.html) (WCAG Success Criteria [3.3.1](https://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](http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n  - [3.3.3 Error Suggestion](https://www.ibm.com/able/guidelines/ci162/error_suggestion.html) (WCAG Success Criteria [3.3.3](http://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.2.1](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones).\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</Row>\n\n### macOS 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            - 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>\n              VoiceOver(VO) text input fully controlled toggle password\n              visibility test:\n            </strong>\n            <OrderedList>\n              <ListItem>\n                Control-Option-Shift Down Arrow to enter the Web area.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the text input label. VO announces\n                the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the optional helper text. VO\n                announces the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the text input field. VO announces\n                the number of characters, and that it is a secure text field\n                that will not be spoken by VO.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the icon and VO announces that it\n                is a show password button.\n              </ListItem>\n              <ListItem>Press Space and the password is displayed.</ListItem>\n              <ListItem>\n                Control-Option-Left Arrow to the Text Input field and VO\n                announces the password.\n              </ListItem>\n              <ListItem>\n                Tab to the Hide Password button. VO announces the label and that\n                it is a button.\n              </ListItem>\n              <ListItem>\n                Tab to the Show Password button. VO announces the label and that\n                it is a button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\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) text area test:</strong>\n            <OrderedList>\n              <ListItem>\n                Control-Option-Shift Down Arrow to enter the Web area.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the Text Area label. VO announces\n                the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the Optional helper text. VO\n                announces the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the Text Area. VO announces the\n                placeholder text and that it is a text area.\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each character as it\n                is typed.\n              </ListItem>\n              <ListItem>\n                Tab out of the Text Area and then tab back. VO announces the\n                entered text.\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            - Firefox version 68\n            <br />\n            - JAWS 18\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>\n              JAWS text input fully controlled toggle password visibility test:\n            </strong>\n            <OrderedList>\n              <ListItem>Alt-Down area. JAWS announces the labels.</ListItem>\n              <ListItem>\n                Tab to the text input field. JAWS announces that it is the main\n                region, password, label, type and text.\n              </ListItem>\n              <ListItem>\n                Tab to the icon and JAWS announces that it is a show password\n                button.\n              </ListItem>\n              <ListItem>\n                Space and Enter key can be used to show and hide the password.\n              </ListItem>\n              <ListItem>\n                Shift-Tab to go back to the text input field and JAWS announces\n                the password when it is displayed.\n              </ListItem>\n              <ListItem>\n                Tab to the Show Password button. JAWS announces the label and\n                that it is a button.\n              </ListItem>\n              <ListItem>\n                Press Space on the Show Password button. The password displays.\n              </ListItem>\n              <ListItem>\n                Tab to the Hide Password button. JAWS announces the label and\n                that it is a button.\n              </ListItem>\n              <ListItem>\n                Press Space on the Hide Password button. The password is hidden.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Firefox 68\n            <br />\n            - JAWS 18\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS text area test:</strong>\n            <OrderedList>\n              <ListItem>\n                Alt-Down Arrow. JAWS announces the label and that its a text\n                element.\n              </ListItem>\n              <ListItem>\n                Tab to the text area. JAWS announces the main region, text area\n                label and that it contains text.\n              </ListItem>\n              <ListItem>\n                Enter text in the text area. JAWS announces each character as it\n                is typed.\n              </ListItem>\n              <ListItem>\n                Tab to move out of the text area and then Shift-Tab to go back.\n                Press Insert-Up Arrow. VO announces the entered text.\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>\n              VoiceOver(VO) text input fully controlled toggle password\n              visibility Test:\n            </strong>\n            <OrderedList>\n              <ListItem>\n                Swipe Right to the text input label. VO announces the label and\n                that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the optional helper text. VO announces the label\n                and that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the text input field. VO announces the number of\n                characters, and that it is a secure text field that will not be\n                spoken by VO. As well as character mode and insertion point at\n                end of text.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the icon and VO announces that it is a show\n                password button.\n              </ListItem>\n              <ListItem>Double Tap and the password is displayed.</ListItem>\n              <ListItem>\n                Swipe Left to go back to the text input field and VO announces\n                the password.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the Hide Password button. VO announces the label\n                and that it is a button.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the Show Password button. VO announces the label\n                and that it is a button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\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(VO) text area test:</strong>\n            <OrderedList>\n              <ListItem>\n                Swipe Right to the text area label. VO announces the label and\n                that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the Optional helper text. VO announces the label\n                and that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the text area. VO announces the placeholder text\n                and that it is a text area.\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each character as it\n                is typed.\n              </ListItem>\n              <ListItem>\n                Swipe Right to move out of the text area and then Swipe Left to\n                go back. VO announces the entered text.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","type":"Mdx","contentDigest":"e249e25256d053355dedfb3d28d7bcd8","counter":1589,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Text input","description":"Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Text input\ndescription: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.\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 text input components are form fields that are provided for user input of text information. The validation message should be included to advise the user of text that is input incorrectly or a required field that is missing. The optional helper text should be used to provide instructions to help users understand how to complete the text field as well as indicate any required and optional input, data formats, and other relevant information.\n\n## Accessibility considerations\n\n1. Provide labels and instructions that are clear and concise.\n2. Provide [instructions](https://www.w3.org/WAI/tutorials/forms/instructions/) for completing the field. For example, Passwords must contain at least 8 letters and/or numbers.\n3. If the text 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 and use the validation message for input errors.\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 Information and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/content-structure-separation-programmatic.html))\n  - [3.3.1 Error Identification](https://www.ibm.com/able/guidelines/ci162/error_id.html) (WCAG Success Criteria [3.3.1](https://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](http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n  - [3.3.3 Error Suggestion](https://www.ibm.com/able/guidelines/ci162/error_suggestion.html) (WCAG Success Criteria [3.3.3](http://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.2.1](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones).\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</Row>\n\n### macOS 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            - 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>\n              VoiceOver(VO) text input fully controlled toggle password\n              visibility test:\n            </strong>\n            <OrderedList>\n              <ListItem>\n                Control-Option-Shift Down Arrow to enter the Web area.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the text input label. VO announces\n                the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the optional helper text. VO\n                announces the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the text input field. VO announces\n                the number of characters, and that it is a secure text field\n                that will not be spoken by VO.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the icon and VO announces that it\n                is a show password button.\n              </ListItem>\n              <ListItem>Press Space and the password is displayed.</ListItem>\n              <ListItem>\n                Control-Option-Left Arrow to the Text Input field and VO\n                announces the password.\n              </ListItem>\n              <ListItem>\n                Tab to the Hide Password button. VO announces the label and that\n                it is a button.\n              </ListItem>\n              <ListItem>\n                Tab to the Show Password button. VO announces the label and that\n                it is a button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\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) text area test:</strong>\n            <OrderedList>\n              <ListItem>\n                Control-Option-Shift Down Arrow to enter the Web area.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the Text Area label. VO announces\n                the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the Optional helper text. VO\n                announces the label and that its a text element.\n              </ListItem>\n              <ListItem>\n                Control-Option-Right Arrow to the Text Area. VO announces the\n                placeholder text and that it is a text area.\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each character as it\n                is typed.\n              </ListItem>\n              <ListItem>\n                Tab out of the Text Area and then tab back. VO announces the\n                entered text.\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            - Firefox version 68\n            <br />\n            - JAWS 18\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>\n              JAWS text input fully controlled toggle password visibility test:\n            </strong>\n            <OrderedList>\n              <ListItem>Alt-Down area. JAWS announces the labels.</ListItem>\n              <ListItem>\n                Tab to the text input field. JAWS announces that it is the main\n                region, password, label, type and text.\n              </ListItem>\n              <ListItem>\n                Tab to the icon and JAWS announces that it is a show password\n                button.\n              </ListItem>\n              <ListItem>\n                Space and Enter key can be used to show and hide the password.\n              </ListItem>\n              <ListItem>\n                Shift-Tab to go back to the text input field and JAWS announces\n                the password when it is displayed.\n              </ListItem>\n              <ListItem>\n                Tab to the Show Password button. JAWS announces the label and\n                that it is a button.\n              </ListItem>\n              <ListItem>\n                Press Space on the Show Password button. The password displays.\n              </ListItem>\n              <ListItem>\n                Tab to the Hide Password button. JAWS announces the label and\n                that it is a button.\n              </ListItem>\n              <ListItem>\n                Press Space on the Hide Password button. The password is hidden.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Firefox 68\n            <br />\n            - JAWS 18\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS text area test:</strong>\n            <OrderedList>\n              <ListItem>\n                Alt-Down Arrow. JAWS announces the label and that its a text\n                element.\n              </ListItem>\n              <ListItem>\n                Tab to the text area. JAWS announces the main region, text area\n                label and that it contains text.\n              </ListItem>\n              <ListItem>\n                Enter text in the text area. JAWS announces each character as it\n                is typed.\n              </ListItem>\n              <ListItem>\n                Tab to move out of the text area and then Shift-Tab to go back.\n                Press Insert-Up Arrow. VO announces the entered text.\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>\n              VoiceOver(VO) text input fully controlled toggle password\n              visibility Test:\n            </strong>\n            <OrderedList>\n              <ListItem>\n                Swipe Right to the text input label. VO announces the label and\n                that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the optional helper text. VO announces the label\n                and that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the text input field. VO announces the number of\n                characters, and that it is a secure text field that will not be\n                spoken by VO. As well as character mode and insertion point at\n                end of text.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the icon and VO announces that it is a show\n                password button.\n              </ListItem>\n              <ListItem>Double Tap and the password is displayed.</ListItem>\n              <ListItem>\n                Swipe Left to go back to the text input field and VO announces\n                the password.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the Hide Password button. VO announces the label\n                and that it is a button.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the Show Password button. VO announces the label\n                and that it is a button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\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(VO) text area test:</strong>\n            <OrderedList>\n              <ListItem>\n                Swipe Right to the text area label. VO announces the label and\n                that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the Optional helper text. VO announces the label\n                and that its a text element.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the text area. VO announces the placeholder text\n                and that it is a text area.\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each character as it\n                is typed.\n              </ListItem>\n              <ListItem>\n                Swipe Right to move out of the text area and then Swipe Left to\n                go back. VO announces the entered text.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/text-input/accessibility.mdx"}}}}