General
- Ensure sufficient colour contrast for all text elements
- Prefix and suffix indicators must be programmatically associated with the input field
- Labels must clearly describe what the user should enter
- Keep the prefix and suffix text concise and easy to understand
Web
Semantic markup
- Use the standard <input> element for the text field
- Use <label> associated with the input via the for attribute
- Prefix and suffix should be semantically linked to the input
Accessible labelling
There are multiple approaches to associate a prefix and a suffix with the input:
Helper text and errors
- Use aria-describedby to associate helper text with the input
- Stack multiple IDs in aria-describedby if you have both prefix/suffix and helper text
- Example: aria-describedby="price-currency price-helper"
Keyboard navigation
- Users should be able to Tab into the input field
- Prefix and suffix are not focusable (they are static indicators)
- Standard input keyboard behaviour applies
React Native
- Use standard TextInput component
- Provide accessibilityLabel that includes context from the prefix or the suffix
- Example: accessibilityLabel="Price in pounds"
- Prefix and suffix should be visually present but hidden from screen readers if the context is included in the accessibility label
- Alternatively, use helper text positioned above the input to provide context