I was wondering if the use of sliders would make it harder for people with disabilities to select values. How hard is it to drag and drop for them? How easy is it for them to see values changing while moving a different element, or to select a specific value?

  • Consider touchscreen and pen tablet usability as well. Sliders are - in my personal experience - pretty unusable on those. – Mels Jul 22 '13 at 11:59

Sliders are an enhancement--not a replacement for data entry. Anyone with motor skill difficulties may have trouble with sliders, so you want to ensure that the input values can also be manually entered via the keyboard. This requires that you make the value field visible and focus-able.

The markup should produce an input field by default:

[50%     ]

Then via JS you'd 'enhance' this by adding the slider, which, in turn, would update the text field (and conversely, if you manually update the text field, it should update the slider).

>========||========< [50%     ]

Note that HTML5 now includes the range input type which will render as a slider. I'm not entirely sure of the accessibility of that particular input at this time, however. I tried pulling up a reference for it, but I'm not finding any references to the range input that specifically address accessibility (if anyone has a link, please share!)

  • This 2010 analysis predicted that range would be implemented as a spinner with up/down buttons. That would mimic an OS widget and be accessible. If it's become a slider in browsers, that would appear to be less accessible. – Andrew Leach Jul 22 '13 at 7:50

There's no bad or good components, it depends on implementation. In general slider isn't very accessible UI component, but you could make it better.

When I'm thinking about slider's accessibility, I'm starting from WAI-ARIA specification, that specifies how to increase the accessibility of UI components developed with Ajax, HTML, JavaScript and related technologies. WAI-ARIA 1.0 Authoring Practices says:

A slider is user input where the user selects a value from within a given range. Sliders typically have a button such that when moved will change the current value within the current range of the slider. The button must be keyboard accessible (focusable and operable). It is typically possible to add or subtract to the current value by using directional keys such as arrow keys.

  • (Right Arrow) and (Up Arrow) increase the value of the slider.
  • (Left Arrow) and (Down Arrow) decrease the value of the slider.
  • Home and End move to the minimum and maximum values of the slider.
  • Tab into and out of the slider.
  • Page Up and Page Down optionally increment or decrement the slider by a given amount.

So, my recommendation - if you think, that you need slider, use it, but make it accessible. And, of course, test test test.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.