Forum Discussion

Ron_Katz's avatar
Ron_Katz
Community Member
4 years ago

A different approach to Accordions

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

  • 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's avatar
      Ron_Katz
      Community Member

      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.

  • BWoods's avatar
    BWoods
    Former Staff

    Hi Ron,

    It's so fun to see the different ways people can recreate one kind of interaction with a completely different process! Using the "accordion" rectangles as buttons did a great job of simulating how people would expect the standard approach for this interaction would work.

    • Ron_Katz's avatar
      Ron_Katz
      Community Member

      Thank you, Bianca.  Different minds work different ways and I guess that is the fun of it.

  • The only issue I have with this presentation is I don't know what the tabs are about until I click on them.  This is not only annoying, I don't see visually how they fit together into a schema. 

    Could this be redone with icons or descriptions on the tabs?

    • Ron_Katz's avatar
      Ron_Katz
      Community Member

      Thanks for your feedback, Thaddeus.  Yes, adding icons or text to the tabs might be helpful.  Do you have any examples I could see?