Slider

Keyboard

Use the arrow keys to adjust the value. Home selects the minimum and End selects the maximum.

Semantics

Give the slider a label and explain what its current value means.

Checklist

  • Use aria-label or aria-labelledby to name the value being adjusted.
  • Check arrow-key adjustment and keep the minimum, maximum, current and displayed values in sync.
  • Disabled sliders must not change. Hiding the displayed value must not remove its accessible name or value.

For contrast, zoom and screen reader checks, see the common accessibility checklist.