Keyboard Accessibility

[franciscolourenco]

Is it possible to interact with the slider using only the keyboard?

[tom-dudman]

+1

It would be great to be able to focus on the slider, and use the arrow keys to tweak the value.

[leongersen]

I'd recommend showing the slider value in an input, which seems ideal for keyboard users. You'll find an example implementation in the documentation.

[franciscolourenco]

accessibility should be baked in, not extra
and it would not look so pretty...
but thank you for the recommendation :)

[braneof]

+1

I'd like to see this too. It also causes another problem. The noUiSlider doesn't take focus, so when I click from one widget to the slider, pushing up or down on the keyboard causes changes on the old widget (which is unexpected).

And showing the slider value won't work for me because the numbers are meaningless for the end user of my site. It would be confusing to show it.

[leongersen]

I'll look in to it. Would you have any suggestions as to how this would work?

• What part of the slider would be focusable? Handles? The base?
• How about touch devices?
• Would linking disable focus?

Looking forward to your ideas.

[braneof]

Thanks for the quick response. Here's what I'm thinking, you might have a better idea:

• Just the handles would be focusable
• It could work the same on touch, though it probably doesn't matter whether it takes focus or not on touch.
• Linking wouldn't need to disable focus, the linked field or the handle could each take focus.

[tremmer]

Here is a great example of accessibility on sliders that would be great to see baked in

http://oaa-accessibility.org/example/32/

[leongersen]

Merging with #246.

[mshwery]

Was this ever integrated? Latest from npm seems to say no.

[simevidas]

The main demo on http://refreshless.com/nouislider/ isn’t keyboard accessible, from what I can tell. Note that ARIA attributes only provide semantic information, not behaviors like keyboard access.

[MartinMuzatko]

This is now tracked here: #724

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.