Text field
Text field
Accessibility
Easy to use for everyone
Text inputs can havearia-labelledby
oraria-label
tags that provide additional content to the visible label.
For Assistive Technology
Text inputs usearia-invalid="true"
andaria-live="assertive"
for validation. Usearia-invalid="false"
for successes or warnings andaria-live="polite"
to announce the character count.
We have included a hidden label througharia-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.