508 Compliant Dials and Sliders

And just out of interest. I know that drag and drop & hotspots are not complaint which other quiz types should be avoided when designing in 508 in mind?

The slider works fine with the left, right, up, and down arrows. However, when I move to the next stop, I can't get the screen reader to read the content on that specific layer. Any suggestions?

Hello, Ghislaine.

I'd like to understand better how your project is set up, so I can help you troubleshoot or offer specific suggestions. Are you comfortable sharing a sample .story file here or through a private link? 

Hi, Ghislaine.

Thank you for clarifying!

Since the slider is on the base layer, and by using the keyboard to navigate, you are focusing on that base layer, the screen reader is not verbalizing the content on each of the other layers. 

A workaround would be to adjust the layer properties of each of your seven layers by checking the following options:

• Hide other slide layers
• Hide objects on base layers
• Prevent the user from clicking on the base layer

Then you can add a button to hide the layer and allow the user to continue to move the slider.

While this works, I would suggest using a different type of interaction that will better suit an accessible course and be screen-reader friendly if your design allows it. 

Hi Maria,

Thank you for the suggestions and workarounds. It is a shame that you state that the Slider is an alternative to drag-and-drop interactions for people with mobility and visual impairments...

I appreciate your feedback, Ghislaine, and we're going to look into this a bit more with our teams.

Hi again, Ghislaine. 

We agree. Many users use layers to display the information that pairs with their slider, so we've submitted this as a bug to our team.

I wanted to share some information on how we define bugs and how we tackle them when they occur. This conversation is attached so that we can share any updates with you here.

Another option is to have the content on the base layer of the slide, with your slider, and use states to control the display. For example, y shape starts in a disabled state and when slider = x, change the state of y shape to normal. Take a look at slide 2 in this attached example if you're interested in learning more.

Hi Leslie,

Thank you very much for your reply and sharing information about how you define bugs. Thank you, also, for submitting this issue as a bug! Our company is an avid user of Storyline and other Articulate products, and with growing demands from our clients to make our courses and learning objects accessible (WCAG, 508, etc.), we appreciate all your effort and updates in recent years. 

I have tested your slider example (slide 2) with a screen reader, and I am still unable to activate the reading of the text... I will test it again with my team. Thanks again!

No problem, Ghislaine.

It's not perfect. The user will need to use the 'back to top' button to focus on the slide content. Then they can arrow through the slide content and have it read by a screen reader as expected. They will then tab back to the slider for further steps/information.

Ahhhh, I see what you mean. It works with the 'back to top' button, so it's a start, but like you said, not perfect :-)