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
- Provide labels and instructions that are clear and concise.
- Provide instructions for completing the field. For example, Passwords must contain at least 8 letters and/or numbers.
- If the text input is a required field include the
aria-requiredproperty and indicate that it is a required field and use the validation message for input errors.
Resources
- W3C Web Tutorial: Labeling Controls
- W3C Web Tutorial: Form Instructions
- IBM Accessibility Checklist Checkpoint:
- 1.3.1 Information and Relationships (WCAG Success Criteria 1.3.1)
- 3.3.1 Error Identification (WCAG Success Criteria 3.3.1)
- 3.3.2 Labels and Instructions (WCAG Success Criteria 3.3.2)
- 3.3.3 Error Suggestion (WCAG Success Criteria 3.3.3)
- 4.1.2 Name, Role, Value (WCAG Success Criteria 4.2.1)
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
- 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
- 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
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) text input fully controlled toggle password visibility test:
- Control-Option-Shift Down Arrow to enter the Web area.
- Control-Option-Right Arrow to the text input label. VO announces the label and that its a text element.
- Control-Option-Right Arrow to the optional helper text. VO announces the label and that its a text element.
- 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.
- Control-Option-Right Arrow to the icon and VO announces that it is a show password button.
- Press Space and the password is displayed.
- Control-Option-Left Arrow to the Text Input field and VO announces the password.
- Tab to the Hide Password button. VO announces the label and that it is a button.
- 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
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) text area test:
- Control-Option-Shift Down Arrow to enter the Web area.
- Control-Option-Right Arrow to the Text Area label. VO announces the label and that its a text element.
- Control-Option-Right Arrow to the Optional helper text. VO announces the label and that its a text element.
- Control-Option-Right Arrow to the Text Area. VO announces the placeholder text and that it is a text area.
- Enter text in the text field. VO announces each character as it is typed.
- 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
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
JAWS text input fully controlled toggle password visibility test:
- Alt-Down area. JAWS announces the labels.
- Tab to the text input field. JAWS announces that it is the main region, password, label, type and text.
- Tab to the icon and JAWS announces that it is a show password button.
- Space and Enter key can be used to show and hide the password.
- Shift-Tab to go back to the text input field and JAWS announces the password when it is displayed.
- Tab to the Show Password button. JAWS announces the label and that it is a button.
- Press Space on the Show Password button. The password displays.
- Tab to the Hide Password button. JAWS announces the label and that it is a button.
- Press Space on the Hide Password button. The password is hidden.
- Microsoft Windows 10
- Firefox 68
- JAWS 18
- Carbon React version 7.7.1
- Firefox 68
- JAWS 18
- Carbon React version 7.7.1
JAWS text area test:
- Alt-Down Arrow. JAWS announces the label and that its a text element.
- Tab to the text area. JAWS announces the main region, text area label and that it contains text.
- Enter text in the text area. JAWS announces each character as it is typed.
- 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
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver(VO) text input fully controlled toggle password visibility Test:
- Swipe Right to the text input label. VO announces the label and that its a text element.
- Swipe Right to the optional helper text. VO announces the label and that its a text element.
- 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.
- Swipe Right to the icon and VO announces that it is a show password button.
- Double Tap and the password is displayed.
- Swipe Left to go back to the text input field and VO announces the password.
- Swipe Right to the Hide Password button. VO announces the label and that it is a button.
- 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
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver(VO) text area test:
- Swipe Right to the text area label. VO announces the label and that its a text element.
- Swipe Right to the Optional helper text. VO announces the label and that its a text element.
- Swipe Right to the text area. VO announces the placeholder text and that it is a text area.
- Enter text in the text field. VO announces each character as it is typed.
- Swipe Right to move out of the text area and then Swipe Left to go back. VO announces the entered text.