5

mockup

download bmml source – Wireframes created with Balsamiq Mockups

How do you make range inputs / sliders screen reader accessible?

What is the best solution for making these types of inputs accessible for blind users?

Remember it could also have added issues if the slider is used to select a range for values.

mockup

download bmml source

1
  • Have you found any reasonable solution without adding new input elements? In my case the Microsoft Narrator still can't read values in 2020.
    – eapo
    Nov 15, 2020 at 22:21

2 Answers 2

7

It's not just visually-impared users you should be considering here. Think of users who only use keyboard, or have broken their wrist, or all sorts of users. Accessibility ≠ only blind users.

But anyway, to answer your question - you have a text field in your first example. That is the approach to take. The slider should be an enhancement to the form, it shouldn't be the only input method.

Provide fields whose value is linked to the slider (sliding the thumb changes the value in the field) and vica-versa (typing in the field moves the thumb too). Give those fields proper labels; if not visually definately in the markup itself, so that the users know what they are for (i.e. 'maximum value' + 'minimum value') and provide on-screen text and feedback explaining the rules of the fields, and you should be fine.

That will cover the screen-reader issue (marking up your HTML using correct standards is almost always all that is needed to be screen-reader compliant) and will make it usable for persons not using a mouse as well.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2
  • 1
    Plus, even fully capable mouse users often find slider controls annoying. I always strongly recommend the text fields be visible. It's often easier for people to just type what they want in directly .
    – DA01
    Jul 4, 2015 at 19:27
  • @DA01 yup. We just did some usability testing and found just that too.
    – JonW
    Jul 4, 2015 at 20:00
1

Check OpenAjax. Here you can find an example of how an accessible slider widget: http://www.oaa-accessibility.org/example/32/

Basically, you can say your slider component is accessible if every user can complete the task of picking values from a range. To summarize, what you should add to your components is:

  • Labels and descriptions: Users with blindness navigate with screen readers, so you have to make sure your slider has form labels or ARIA tags that tell the screen reader what is going on, and what values are selected
  • Keyboard navigation Users with motor impairments might use special keyboards or other devices than mice, so you must add keyboard event handlers to the range picker as well
  • Sufficient color contrast: Users with low vision or under extreme light conditions might not be able to see it (use a contrast checker and adjust colors afterwards)

    Hope it helps!

3
  • I tested the sliders with a screen reader, when you use the range slider the only response you receive is "blank" and reading through the mark up and JavaScript it wouldn't be any better even if I added the suggested aria roles because they don't function as such.
    – Tony UK
    Jul 30, 2015 at 14:20
  • Tony, which screen reader have you used? I know that many of them do not provide support for aria. I will test it with voiceover or nvda and let you know.. To me accessibility is about providing options to complete a task. I would add a classic numeric <input > for the value below the slider, so that you can move the slider and change it, or enter a number..
    – maia
    Jul 31, 2015 at 13:20
  • I tested with NVDA
    – Tony UK
    Jul 31, 2015 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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