Overview
Text inputs should be accessible via keyboard navigation and provide clear labelling for screen readers. Ensure proper form validation feedback is communicated to assistive technologies.
Maintain adequate colour contrast (4.5:1 minimum) and make sure text inputs have sufficient size for easy interaction (minimum 44px touch target).
Keyboard Interactions
|
tab |
Moves focus to text input |
|
shift + tab |
Moves focus away from text input (backwards) |
|
enter / space |
Submits form or moves to next field |
|
arrow keys |
Navigate within input text |
|
home / end |
Move cursor to beginning/end of input |
Semantic markup & WAI-ARIA
- Use <input type="text"> or appropriate input types (email, tel, password) for semantic meaning and browser support.
- Always associate labels with inputs using for attribute or by wrapping the input in the label element.
- Use aria-describedby to associate hint text and error messages with the input.
- Use aria-required="true" for mandatory fields and aria-invalid="true" for validation errors.
- Ensure error messages are announced to screen readers when validation fails.