General
- Ensure sufficient colour contrast for all slider elements
- Always provide an input field alongside the slider for precise value entry
- Do not rely on colour alone to indicate the selected value or track position
- Make all controls keyboard accessible
- Provide clear labels and helper text
Web
Semantic markup
- Use <input type="range"> for the slider
- Use <input type="number"> for the accompanying number input field
- Use <label> to associate the label with both inputs
- Link the slider and input field programmatically so they update each other
Accessible labelling
Key accessibility attributes:
- Label: Use <label> to describe what the slider controls
- Helper text: Use aria-describedby to associate helper text with the slider
- Range values: Use aria-valuemin, aria-valuemax, and aria-valuenow to communicate the range and current value
- Value text: Use aria-valuetext to provide a human-readable version (e.g., "50 percent" instead of just "50")
- Input field: Provide aria-label for the number input to distinguish it from the slider
Keyboard navigation
The label should be announced when the input field or slider handle receives a focus state.
Slider keyboard controls:
- Right Arrow (→) or Up Arrow (↑) — Increment the value and move the handle to the right
- Left Arrow (←) or Down Arrow (↓) — Decrement the value and move the handle to the left
- Home — Jump to the minimum value
- End — Jump to the maximum value
- Page Up (optional) — Increase by larger increment
- Page Down (optional) — Decrease by a larger increment
Input field keyboard controls:
- Up Arrow (↑) — Increment the value
- Down Arrow (↓) — Decrement the value
- Standard number input behaviour applies
Focus order:
- Use the Tab key (⇥) or Shift + Tab (⇧ + ⇥) to navigate between the input field and slider handle
- Focus indicators must be clearly visible and use the correct tokens
Live announcements
- Use aria-live="polite" to announce value changes to screen readers
- Throttle announcements to avoid overwhelming users (e.g., announce every 5% change rather than every 1%)
- Announce the value in a meaningful way (e.g., "Volume: 75 percent")
Validation and errors
- Use aria-invalid="true" when the input value is outside the allowed range
- Use aria-describedby to associate error messages with both the slider and the input field
- Display error messages in a way that is visible and announced to screen readers
React Native
- Use the Slider component (or platform-appropriate slider)
- Provide accessibilityLabel describing what the slider controls
- Use accessibilityValue to communicate min, max, and current values
- Provide accessibilityHint for additional context
- Include an accessible number input field alongside the slider
- Ensure controls meet minimum 44px × 44px touch targets