Text input

How it works

The 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.

Accessibility considerations

  1. Provide labels and instructions that are clear and concise.
  2. Provide instructions for completing the field. For example, Passwords must contain at least 8 letters and/or numbers.
  3. If the text input is a required field include the aria-required property and indicate that it is a required field and use the validation message for input errors.

Resources

Accessibility testing

Accessibility issues are tracked in the Carbon Component GitHub repository.

Automated test

Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test:
- No violations

macOS screen reader tests

Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) text input fully controlled toggle password visibility test:
  1. Control-Option-Shift Down Arrow to enter the Web area.
  2. Control-Option-Right Arrow to the text input label. VO announces the label and that its a text element.
  3. Control-Option-Right Arrow to the optional helper text. VO announces the label and that its a text element.
  4. Control-Option-Right Arrow to the text input field. VO announces the number of characters, and that it is a secure text field that will not be spoken by VO.
  5. Control-Option-Right Arrow to the icon and VO announces that it is a show password button.
  6. Press Space and the password is displayed.
  7. Control-Option-Left Arrow to the Text Input field and VO announces the password.
  8. Tab to the Hide Password button. VO announces the label and that it is a button.
  9. Tab to the Show Password button. VO announces the label and that it is a button.
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) text area test:
  1. Control-Option-Shift Down Arrow to enter the Web area.
  2. Control-Option-Right Arrow to the Text Area label. VO announces the label and that its a text element.
  3. Control-Option-Right Arrow to the Optional helper text. VO announces the label and that its a text element.
  4. Control-Option-Right Arrow to the Text Area. VO announces the placeholder text and that it is a text area.
  5. Enter text in the text field. VO announces each character as it is typed.
  6. Tab out of the Text Area and then tab back. VO announces the entered text.

Windows screen reader tests

Environment
Results
- Microsoft Windows 10
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
JAWS text input fully controlled toggle password visibility test:
  1. Alt-Down area. JAWS announces the labels.
  2. Tab to the text input field. JAWS announces that it is the main region, password, label, type and text.
  3. Tab to the icon and JAWS announces that it is a show password button.
  4. Space and Enter key can be used to show and hide the password.
  5. Shift-Tab to go back to the text input field and JAWS announces the password when it is displayed.
  6. Tab to the Show Password button. JAWS announces the label and that it is a button.
  7. Press Space on the Show Password button. The password displays.
  8. Tab to the Hide Password button. JAWS announces the label and that it is a button.
  9. Press Space on the Hide Password button. The password is hidden.
- Microsoft Windows 10
- Firefox 68
- JAWS 18
- Carbon React version 7.7.1
JAWS text area test:
  1. Alt-Down Arrow. JAWS announces the label and that its a text element.
  2. Tab to the text area. JAWS announces the main region, text area label and that it contains text.
  3. Enter text in the text area. JAWS announces each character as it is typed.
  4. Tab to move out of the text area and then Shift-Tab to go back. Press Insert-Up Arrow. VO announces the entered text.

iOS screen reader tests

Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver(VO) text input fully controlled toggle password visibility Test:
  1. Swipe Right to the text input label. VO announces the label and that its a text element.
  2. Swipe Right to the optional helper text. VO announces the label and that its a text element.
  3. Swipe Right to the text input field. VO announces the number of characters, and that it is a secure text field that will not be spoken by VO. As well as character mode and insertion point at end of text.
  4. Swipe Right to the icon and VO announces that it is a show password button.
  5. Double Tap and the password is displayed.
  6. Swipe Left to go back to the text input field and VO announces the password.
  7. Swipe Right to the Hide Password button. VO announces the label and that it is a button.
  8. Swipe Right to the Show Password button. VO announces the label and that it is a button.
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver(VO) text area test:
  1. Swipe Right to the text area label. VO announces the label and that its a text element.
  2. Swipe Right to the Optional helper text. VO announces the label and that its a text element.
  3. Swipe Right to the text area. VO announces the placeholder text and that it is a text area.
  4. Enter text in the text field. VO announces each character as it is typed.
  5. Swipe Right to move out of the text area and then Swipe Left to go back. VO announces the entered text.
Edit this page on GitHub
Previous
Text input: Style
Next
Components: Tile