Sliders are they accessible?

Jan 04, 2018

Hi there,

I am about to do my first Process Step (5 steps) and I thought a slider might be a nice way to move through the process.  I have searched everywhere trying to see if a slider is accessible, or if I should look for a different approach.  I found the accessibility list but couldn't find anything about sliders.  I did think I saw it here once but now no luck.  I search "are sliders accessible" but couldn't find anything, appreciate any knowledge you may have about sliders and accessibility.

19 Replies
Bob O'Donnell

Sliders are accessible via the keyboard arrow keys. You would need to make sure all the information displayed is available to an impaired user, but it should be doable. If you get something working, post it.

Check this page out for some 360 accessibility guidance:
https://articulate.com/support/article/Storyline-360-How-to-Design-an-Accessible-Course

Good luck!

Teresa Vanderpost

Hi Bob and Wendy, okay I went for it this is my first slider.  This is the start.  I think I figured it out, 6 steps, I just quickly put numbers on top will make it prettier later.  Because I have 6 images I had them hide if they didn't equal the slider number it was relevant to and visiable when it is equal to it, it seems to have worked.  Now with each one I have to include  the detail steps so it will be a text box under each image that appears, would I just do the same triggers the equals and not equals.  I had all of them start as state hidden.  I think it is not bad considering I didn't really have a clue what I was up to...  Please take a look any advise would be great, and the arrow keys worked.  Would I have to mention that on the slide or when they tab with their reader will it know it is a slider and to use arrow keys.

Teresa Vanderpost

Hi Bob and Wendy again...so this morning I realized with all the Steps they were better to be on Layers when the slider moves otherwise I had text hiding on top of text on the base layer hard to work with.

Can you take a look here, Step 6 is the same as the others but without the layer for some reason the Layer 5 Step doesn't disappear when I move to Step 6 and Step 6 doesn't show the Step 6 picture even though I believe I have it set to show Normal state when at that step.

also, do you have any advise for Step 3 from a design perspective.  I placed all the content that is supposed to be represented on the slide so you could see it, it is a lot , any suggestions how to make it work....

I am attaching the Slider story again.  Slide 1 is the one I sent above.  But Slide 2 is the one I am talking about now with all the steps included. 

Wendy Farmer

Hi Teresa

should there be a layer for Step 6 ? I'm not seeing one in the slide layers panel so I created one and also moved the images from the base layer to their step layer and then you don't need all the 'change state of picture' triggers. I also added a hide layer for Step 1 trigger.

Is this what you are after? See Peek video

Teresa Vanderpost

Oh okay, so put everything on the layer, I just figured I didn't have layers before so I could leave them but yes that would be a lot less work.  And I didn't put 6 on a layer as it worked with the start from hidden.  But I think I will update it to this layer view.

Also, did either you have thoughts on Step 3 - and how to make that content fit??

Wendy Farmer

Hi Teresa

here is your updated file - I duplicated the slide and worked on that 1.3.  For layer 3 you could add a marker with the image and text 

 

If there are still too many points in the step you could add buttons that reveal the first 4 and then reveal the second 5 

Wendy Farmer

Glad to help Teresa.  If you want feedback on how your project is designed you can always post it in the Building Better Courses forum and ask people for comments. Alternatively, take a look at some of the elearning examples to give you ideas on how to lay out screens and deal with lots of text.

Good luck with your project.

Bob O'Donnell

Wendy, One quick thing... don't leave the file extension name in your Alt text. When you insert an image be sure to remove the file extension. Its a meaningless addition for the user to hear. Be short and to the point as much as you can with the descriptions. For example, that image on layer 3 - the text currently says "syringeand gloves.png". It should say something like:
"Gloved hands stabilizing a syringe". If an image is instructionally irrelevant, you can simply hide it from being accessible. Give it a good name though, just in case you have to turn it back on.

This discussion is closed. You can start a new discussion or contact Articulate Support.