Sliders and Accessibility

Nov 26, 2021

Are sliders truly accessible? I was playing around and could toggle through the different layers using the slider and keyboard controls, but I couldn't get the screen reader to read any of the text on the layers because the arrow keys would only adjust the slider and not focus on the text.

I tested using NVDA.

27 Replies
Robbie Christian

Oh no! Now that I'm reading this thread, I'm worried I made the mistake of thinking sliders were easier than drag/drop hotspots for accessibility. I've successfully done the latter with much effort; I thought that I would save time/effort by using a slider this time, but this thread is making me wonder if I need to bail and go back to the effort-intensive accessible drag and drop.

Can someone help me figure out if/how to make this attached interaction accessible?

For those who aren't able to open the file, I have a layer with a 3-step slider that starts in the middle and slides either left to answer "myth" or right to answer "fact." Then I multiplied it out (all on one single slide) to have five unique myth/fact questions, each on its own separate layer, and each with an incorrect and a correct layer associated with it. That makes 15 separate layers: 5 separate sliders, all accessed one at a time, but all on the same slide.

Leslie McKerchie

Hi Robbie,

Thanks for popping in to share your concerns. You didn't mention what accessibility issues you were currently experiencing.

I can navigate your sliders using NVDA in Chrome. Taking a look at the focus order for the first two sliders, here are a few thoughts:

  • The text boxes for myth and fact can be removed from the focus order since the Slider can provide direction.
  • Adjust the alt text for the Next button on the correct and incorrect layers.
  • Provide directions for the Slider. For example, select zero for myth or two for fact, then submit your response.
  • Adjust the focus order on a few slides:
    • Layer 1 Correct and Incorrect: directions to select next should come before the Next button.
    • Slide 2 directions should come before the Slider.
  • Add the main statement text back to Slide 2 (rectangle 1 - this statement is a myth) and move above the Slide 2 directions.

This should get you headed in the right direction for the other layers. I've attached before and after images to help visualize the above list.

This was a quick first pass, so please let us know if you were thinking of a specific concern not mentioned here.