Sliders and Accessibility: Usability of sliders for users with disabilities

Question

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?

Answer 1

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:

Value: 
[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).

Value: 
>========||========< [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!)

Answer 2

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.