Text field - Intelligence Community Design System

Skip to page content

Show navigation section

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.

Last reviewed 15 April 2024 .