Sliders and Accessibility

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.

7 Replies
Lauren Connelly

Hello Lauren!

In order to navigate through the Slider, the right and left arrow keys are used. Since those keys are also used to navigate to the next item, the Slider is going to take priority of the following text. This is expected behavior, but since you want the layers to be read, you might consider hiding the Slider on the layers so the text is technically the next item available.

I'm eager to see what other community members recommend!

Phil Mayor

Hi Lauren

I think this should be looked at, using a slider with layers is currently not accessible. I checked it and the up and down arrows also move the slider. As a normal way to use a slider or dial is to show a layer for me there needs to be a change in the focus order to allow the end of the layer to go back to the slider or dial. At the moment to make something like this accessible will probably need the addition of buttons there by hiding the slider on the focus order and for users requiring accessibility it turns into a tabbed interaction. I don’t think the suggestion of hiding the slider helps as on the first layer it then breaks the interaction for everyone.

Sent from my iPhone

Lauren Connelly

Hello Phil!

I've connected with our Engineers to determine the expected behavior, and that is correct - the focus should shift to the new layer and then return to the slider after the content is read. Thanks for calling attention to that!

We have this behavior logged as a software bug, and I've linked this discussion. I appreciate your feedback!