Overview
Numeric steppers should be accessible via keyboard navigation and provide clear value communication to screen readers. Ensure proper labelling and value announcement for assistive technologies.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction (minimum 44px touch target).
Keyboard Interactions
|
tab |
Moves focus between stepper elements |
|
shift + tab |
Moves focus backwards through stepper elements |
|
enter |
Confirms value entry |
|
arrow up / arrow down |
Increment/decrement values when input is focused |
|
home / end |
Navigate to minimum/maximum values |
Semantic markup & WAI-ARIA
- Use <input type="number"> with appropriate min, max, and step attributes for semantic meaning.
- Use aria-label or associate with labels to clearly describe the stepper's purpose.
- Use aria-valuemin, aria-valuemax, and aria-valuenow to communicate value constraints to assistive technologies.
- Ensure increment/decrement buttons are properly labelled for screen readers.
- Use aria-describedby to associate hint text or error messages with the stepper input.