How do you make a range input / slider accessible to screen readers for blind UX

Question

^{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.

^{download bmml source}

Answer 1

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

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!