A different approach to Accordions

Dec 14, 2021

For ELC-350 we were asked to use Accordions to Chunk information.  I experimented with different ways to do this and have been asked how I achieved this result:

https://360.articulate.com/review/content/1d424c46-ec2d-41b1-aaad-a395e5977432/review

This is, in reality, not an accordion per se.  It is really just a set of slides with tabs on either side that are trigged when those tabs are clicked.  

There are twice as many slides as you would expected so that when they transition (and the transition is the secret) they can transition from the right or the left.

Want to learn more.  Download and study the storyline file.

6 Replies
Sam L

Thanks for this. I used the slide layer method for an interaction on a training but am now trying to wrap my head around how to make screenreader compatible and also tab key accessible in a logical order because I have multiple copies of buttons showing up on each layer.

From an accessibility perspective do you think this would be an easier approach?

Ron Katz

Good thought, Sam.  Yes, now that you mentioned it this method might be better a better accessibility approach.  However, in my specific example, all of the words are part of the picture not separate text.  This is, to my understanding, not accessibility friendly.  On would need to add a lot of alt text to every image to read the slide and describe what the learner is seeing.