Text field
Accessibility
Easy to use for everyone
Text inputs can have aria-labelledby or aria-label tags that provide additional content to the visible label.
For Assistive Technology
Text inputs use aria-invalid="true" and aria-live="assertive" for validation. Use aria-invalid="false" for successes or warnings and aria-live="polite" to announce the character count.
We have included a hidden label through aria-describedby, contained in a hidden span to inform the users of the maximum character count when the component is focused.
Based on
The text input component has been based on the following resources:
Labeling controls , W3, accessed July 2022.Validation Input , W3, accessed July 2022.Inputs , A11Y 101, accessed July 2022.Creating accessible forms , WebAIM, accessed July 2022.
Testing
We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.