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 made the changes you suggested, but I'm still encountering the same problem: When I press the up/down arrows it just changes the slider/layer number.
I agree with you I did not realise that up down worked on controlling sliders as well, I cannot get them to read either, may need an Articulate team member to drop in
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!
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.
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!
Also interested in the resolution of this issue. I would think designers/developers would often use layers with sliders, making this functionality important for those concerned with accessibility.
Hi all on this thread. Later this month I am doing a demo at DevLearn on 10 Ways to Use Sliders at the Articulate User Conference. David Anderson alerted me to be ready to address questions on accessibility. I found this thread to be super helpful, especially your issues with layers. Since you have all been challenged with this, do you have any suggestions on how I should serve up the issues? I appreciate any thoughts! I'm not going to set up myself as an accessibility expert, but I would address the accessibility pros and cons of using sliders.
Accessibility and Storyline never been best friends. If you get questions on that... tell them the real hard truth. Storyline for sure cannot deliver 100% accessible content without a lot of extra work and workarounds. As is Storyline cannot deliver accessible courses with the default elements and interactions provided in the tool.
At the moment I would say you cannot make sliders where multiple content appears accessible as they do not allow the focus to move and then move back to the slider.
As with all Issues you can workaround it with some tricks. Then you however need to not use the default Storyline sliders but create custom fully Html5 compatible and accessible sliders.
While I don't have an update on the reported issues related to sliders and accessibility just yet, you're in the right place and we'll let you know as much as we can, as soon as we can!
We're still looking at this issue, and we'll definitely share an update here when we have any news to share. In the mean time, I wanted to share this workaround that we've identified for the issue:
Don't use layers - instead, use states to show content as the slider moves.
Even when using objects with states on base layer, the focus has to be moved off of the slider in order to hear the content on the slide. I've attached an example project (sliderexample.story with a 7 step slider on Slide 2) For each step, the user must tab to go 'back to top' and select this, then arrow to read the slide content before bringing focus back to the slider to read the next step. Not intuitive for a sighted user and certainly would not be for someone visually impaired.
Apologies if my previous response didn't contain the file. I've edited it to include the Storyline 360 .story project file. Let me know if you need anything else!
The above thread has blown my mind a bit, but can I just check that the above solution would apply to my project please?
I have a slide that has a slider at the bottom and as the slider is moved through the slider points layers appear with different messages on (text boxes). The person testing my project with a screen reader has said that they have to cycle through everything before being able to read each message. I assume that they mean the home button, slide title and instructions on the base layer that are above the slider.
I know that you can 'prevent user from clicking on base layer' in the layer settings, which I have used to avoid this issue on other slides. However, as the slider is on the base layer and is how they navigate to the next layer, I can't use this on this occasion.
I am just developing my understanding of screen readers and accessibility so this has meant that a lot of my projects have been rejected as I had built them before I realised that some of the interactions in storyline were not accessible. In the future I will avoid the type of interactions that are causing me issues - but for now I need to try and make this slide accessible so I don't have to start again from scratch.
Can you confirm if the states workaround above would apply to my interaction? (I hope my explanation makes sense?!)
States on the slide should help with text don't see it working for images you may have on the layers, you can keep the layers you already have just add the text to the states of the slider
I have added a text box and an image to each slider state and adjusted the trigger to change the state of the slider when it moves to each point, rather than show layer. Fingers crossed this works for the screen reader! Thanks all!
27 Replies
In the focus order you need to move the slider above the layers and should then read the text may need to press down arrow on each layer
I made the changes you suggested, but I'm still encountering the same problem: When I press the up/down arrows it just changes the slider/layer number.
I agree with you I did not realise that up down worked on controlling sliders as well, I cannot get them to read either, may need an Articulate team member to drop in
Good to know it's not just on my end at least. Thank you for looking into it.
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!
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
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!
Also interested in the resolution of this issue. I would think designers/developers would often use layers with sliders, making this functionality important for those concerned with accessibility.
Wondering if there has been any news on this. I'm in the same boat at the moment.
Hi Vanessa and Noelle!
Thank you for sharing how this functionality would be helpful to you. I have shared your comments with our team.
I have no updates to share at the moment, but you are linked to the bug, and we will be sure to let you know of any news.
For some additional context, here's how we define and tackle bugs.
Hi all on this thread. Later this month I am doing a demo at DevLearn on 10 Ways to Use Sliders at the Articulate User Conference. David Anderson alerted me to be ready to address questions on accessibility. I found this thread to be super helpful, especially your issues with layers. Since you have all been challenged with this, do you have any suggestions on how I should serve up the issues? I appreciate any thoughts! I'm not going to set up myself as an accessibility expert, but I would address the accessibility pros and cons of using sliders.
Accessibility and Storyline never been best friends. If you get questions on that... tell them the real hard truth. Storyline for sure cannot deliver 100% accessible content without a lot of extra work and workarounds. As is Storyline cannot deliver accessible courses with the default elements and interactions provided in the tool.
At the moment I would say you cannot make sliders where multiple content appears accessible as they do not allow the focus to move and then move back to the slider.
Sent from my iPhone
Thank you! I'll have to think about how to anticipate this.
As with all Issues you can workaround it with some tricks. Then you however need to not use the default Storyline sliders but create custom fully Html5 compatible and accessible sliders.
Thank you--that is beyond my capability at the moment. :) I wish it were otherwise. I guess I would find another way to create my interaction.
Staff - any update on this?
Hi Kerry!
While I don't have an update on the reported issues related to sliders and accessibility just yet, you're in the right place and we'll let you know as much as we can, as soon as we can!
Hi there,
I was wondering if there are any updates to this issue yet?
I wasn't able to get my JAWS screen reader to read the layer text (I can move the thumb along the track using the keyboard).
Hi Matthew,
We're still looking at this issue, and we'll definitely share an update here when we have any news to share. In the mean time, I wanted to share this workaround that we've identified for the issue:
Hope this helps!
Hi Joe - Would love to see the example but I don't see the attachment. Thanks.
Hi Margaret,
Apologies if my previous response didn't contain the file. I've edited it to include the Storyline 360 .story project file. Let me know if you need anything else!
Hi Joe,
The above thread has blown my mind a bit, but can I just check that the above solution would apply to my project please?
I have a slide that has a slider at the bottom and as the slider is moved through the slider points layers appear with different messages on (text boxes). The person testing my project with a screen reader has said that they have to cycle through everything before being able to read each message. I assume that they mean the home button, slide title and instructions on the base layer that are above the slider.
I know that you can 'prevent user from clicking on base layer' in the layer settings, which I have used to avoid this issue on other slides. However, as the slider is on the base layer and is how they navigate to the next layer, I can't use this on this occasion.
I am just developing my understanding of screen readers and accessibility so this has meant that a lot of my projects have been rejected as I had built them before I realised that some of the interactions in storyline were not accessible. In the future I will avoid the type of interactions that are causing me issues - but for now I need to try and make this slide accessible so I don't have to start again from scratch.
Can you confirm if the states workaround above would apply to my interaction? (I hope my explanation makes sense?!)
Thanks!
States on the slide should help with text don't see it working for images you may have on the layers, you can keep the layers you already have just add the text to the states of the slider
I have added a text box and an image to each slider state and adjusted the trigger to change the state of the slider when it moves to each point, rather than show layer. Fingers crossed this works for the screen reader! Thanks all!