Are you looking to create more engaging interactions that everyone can experience? Some course creators mistakenly think they have to avoid certain online learning activities in order to meet accessibility guidelines. This accessible Storyline 360 drag-and-drop chat template dispels that misconception and shows just how easy it is to create engaging interactions that work for every learner.
Hello Sarah, thank you so much for sharing this project. it's super clear and visually attractive.
I am new to articulate and had a question:
To which extent can I use this template? (public, non-commercial, ...)
Thank you
Thanks for creating this template, Sarah. It's great. Enjoying your webinar as well. I appreciate that Articulate is doing so much to help us with making engaging accessible courses.
Hi, Sarah
Great webinar on this just now - thank you!
I am making a short Storyline 360 module on Accessibility for our eLearning Developers, plus I have also been asked to share it once completed across a few other NHS Trusts. I have nearly finished adding content, and am very pleased to say I have included almost all of what you went through in the webinar. However, I have a drag and drop in one of my modules I would like to adapt and showcase in my Accessibility module, but!!!!! It has multiple drag options and multiple drop options, rather than just one drag option to two different drop options. How can I adapt to cater for multiple options on screen, please?
Hi Samantha! It sounds like your project is going well! As for your drag-and-drop interaction, Sally Wiedenbeck shared this download file that seems similar to what you’re looking to do: https://community.articulate.com/discussions/articulate-storyline/build-an-accessible-drag-and-drop-interaction-in-storyline
Another option I can think of (that could work similarly to the template I made here) would be to introduce all the options and drop fields, and then focus on one drop field at a time. Then have the learner select all the options that go into that one drop field. This makes it so the motion path always goes to that drop field. Then move onto the next drop field and repeat by having the learner select all options that go into that field. I haven’t tried building this yet, but just... Expand
Hi Samantha! It sounds like your project is going well! As for your drag-and-drop interaction, Sally Wiedenbeck shared this download file that seems similar to what you’re looking to do: https://community.articulate.com/discussions/articulate-storyline/build-an-accessible-drag-and-drop-interaction-in-storyline
Another option I can think of (that could work similarly to the template I made here) would be to introduce all the options and drop fields, and then focus on one drop field at a time. Then have the learner select all the options that go into that one drop field. This makes it so the motion path always goes to that drop field. Then move onto the next drop field and repeat by having the learner select all options that go into that field. I haven’t tried building this yet, but just an idea!
Hi, Sarah
Thank you for replying - your idea sounds like a good one. I like that only one drop field will show at a time, I think that would work for me. I'm planning to have a 'play' next week, I'll let you know how it goes!
Thank you
Thanks for the great webinar! Could you clarify how to use states and the timeline?
It sounded as though state changes are not recognized by the screen reader. Should they be used only for visual enhancements?
What about the timeline? Will the screen reader only recognize objects that are visible when the timeline starts so objects that appear later should be on separate layers?
Thank you, Marianne! Great questions! From what I understand, when it comes to states, the states names aren't automatically added in the alt text. But as I was researching a little more on this topic, I realized I incorrectly explained that custom message text on the first slide. Screen readers can read the text when it changes if you select the accessibility checkbox for the new text within that added state and edit the Alt Text. Here's a video example by Maria that shows what that looks like (using shapes and editing the ALT text): https://360.articulate.com/review/content/b46673ef-b554-4f9c-9999-971c9f3d9696/review
As for using States for color changes, those are just visual enhancements, and the change of color is not recognized by a screen reader so don’t rely on color alone to co... Expand
Thank you, Marianne! Great questions! From what I understand, when it comes to states, the states names aren't automatically added in the alt text. But as I was researching a little more on this topic, I realized I incorrectly explained that custom message text on the first slide. Screen readers can read the text when it changes if you select the accessibility checkbox for the new text within that added state and edit the Alt Text. Here's a video example by Maria that shows what that looks like (using shapes and editing the ALT text): https://360.articulate.com/review/content/b46673ef-b554-4f9c-9999-971c9f3d9696/review
As for using States for color changes, those are just visual enhancements, and the change of color is not recognized by a screen reader so don’t rely on color alone to convey meaning (whether on a state or a slide/layer).
As for the timeline, it’s a good idea to not have items appear and disappear because items can disappear before screen readers can read.
Thanks, Sarah! The video example is very helpful. I have been using layers to avoid accessibility issues with state changes. I am going to look for situations where I could edit the alt text.
This is great Sarah - I am recently having challenges with a Rise course and the carousel parts. It is not all keyboard accessible and continues to read even when the user doesn't advance using arrow keys. Any tips?
Hi Amanda! Thanks for reaching out here! We're currently working on making the carousel interaction accessible. Here's a link to our roadmap so you can see which other accessible items and features we're working on: https://articulate.com/support/article/Articulate-360-Feature-Roadmap#rise-360
Thank you so much for the excellent webinar and training, Sarah! I created a new media piece and it works perfectly. The one challenge I am having is getting the NVDA reader to read my Storyline piece. I also tried to use the NVDA reader on your example and it also won't read it. Wondering if you have thoughts. TIA!
While continuing my search - I found this thread:
https://community.articulate.com/discussions/articulate-storyline/text-not-read-by-screen-reader-nvda
While the content is super helpful, I can't seem to get the NVDA to read on Review360 or published to the Web. Do I need to test in another external environment?
Thanks so much, Dana! 😊
Also, I'm sorry it's not working! On the webinar page linked above, there’s a video walkthrough that goes through my example with an NVDA screen reader. If you’re experiencing something different and are using the latest build of Storyline (3.61.27106.0), then please reach out to our support team so they can help figure out what's going on: https://articulate.com/support/contact
Hi Lori! I haven't created anything like that yet, but I do share two optional ideas earlier in this thread in case you want to take a look: https://community.articulate.com/download/storyline-accessible-drag-and-drop-chat-interaction?page=1#comment-106046
Hi Sarah, thank you for this.
I'm trying to make this work with a Drag and Drop interaction that is set to 'Reveal drag items one at a time'. But I cannot get it to work.
It would seem if a Drag item is not actually dropped onto a Drop target, and is simply moved over it using a motion path, the drag and drop interaction will not register the item being 'dropped' and therefore the next draggable item in the list does not appear.
Do you think it should work and I'm doing something wrong, or is the expected?
Thank you in advance.
Hi, Barry,
Have you tried adding triggers to change the state to dropped? A couple that might work are
Change state of X to dropped when motion path Y completes on X.
Change state of X to dropped when objects X intersects with target T.
Hi all,
I cannot get this to work with a real drag and drop. When I say real, I mean one that can be scored and have multiple draggable items dropped (or moved) into a drop area.
In my example I have 9 draggable objects that appear one at a time, which need to be dropped onto 1 of 3 drop areas. When dropped, the draggable state is switched to hidden and the next draggable item appears.
If I use the keyboard to move an item over the drop area, nothing happens and the 'drop' is not registered.
The only way I think I can achieve this would be with multiple triggers and variables that update when am item's motion path completes.
It seems like an awful lot of work for interactivity that I would have hoped would be included in Storyline after all these years.
So, I think I... Expand
Hi all,
I cannot get this to work with a real drag and drop. When I say real, I mean one that can be scored and have multiple draggable items dropped (or moved) into a drop area.
In my example I have 9 draggable objects that appear one at a time, which need to be dropped onto 1 of 3 drop areas. When dropped, the draggable state is switched to hidden and the next draggable item appears.
If I use the keyboard to move an item over the drop area, nothing happens and the 'drop' is not registered.
The only way I think I can achieve this would be with multiple triggers and variables that update when am item's motion path completes.
It seems like an awful lot of work for interactivity that I would have hoped would be included in Storyline after all these years.
So, I think I'll need to ditch the use of drag and drops and let the client know that they are not accessible.
I will try again to make this work, but I would love Articulate to make the drag and drop interaction keyboard accessible.
Thanks for reading.
Hey Barry! So sorry that it's not working. I set this up as more of a knowledge check, so I didn't use the built-in drag and drop quizzing feature. I know this was built in Storyline 360, but as a future option, I wanted to let you know that we're currently working on an accessible drag-and-drop feature for Rise 360. Here's more info about it: https://articulate.com/support/article/Articulate-360-Feature-Roadmap#:~:text=Accessible%20Drag%2Dand%2DDrop%20Interactions
Hi Sarah Hodge,
I appreciate you providing this simple example. Unfortunately, my attempt to design something akin to the example you provided here does not function with the actual graded drag and drop interaction.
I initially believed that this sample was made utilizing the built-in free form drag and drop interaction, but after downloading the file, I eventually realized that this was not the case.
Is it possible to produce a similar sample using the graded DND question type? If so, can you kindly guide me?
I much appreciate your assistance in advance.
Hi Sandeep! I'm sorry I didn't make it clear that it's not a quiz. I built this as more of a knowledge check type interaction. The drag-and-drop quiz option in Storyline 360 is currently not accessible, but we do have it on our roadmap to make the Rise 360 drag-and-drop interactions and sorting activities accessible. Here's more info about it: https://articulate.com/support/article/Articulate-360-Feature-Roadmap#:~:text=Accessible%20Drag%2Dand%2DDrop%20Interactions
Hey William! Great question! Elizabeth Pawlicki did a webinar that shows how to create that shortcut so it works throughout the course. You can watch her tutorial here: https://training.articulate.com/webinars/how-to-create-accessible-courses-with-articulate-360
The accessible shortcut explanation starts at 30:34. I hope that helps!
Is there an updated version of this? I attempted to download it and the latest version of SL says it is corrupted likely due to being built in an older version.
45 Comments
Hi Samantha! It sounds like your project is going well! As for your drag-and-drop interaction, Sally Wiedenbeck shared this download file that seems similar to what you’re looking to do: https://community.articulate.com/discussions/articulate-storyline/build-an-accessible-drag-and-drop-interaction-in-storyline Another option I can think of (that could work similarly to the template I made here) would be to introduce all the options and drop fields, and then focus on one drop field at a time. Then have the learner select all the options that go into that one drop field. This makes it so the motion path always goes to that drop field. Then move onto the next drop field and repeat by having the learner select all options that go into that field. I haven’t tried building this yet, but just... Expand
Thank you, Marianne! Great questions! From what I understand, when it comes to states, the states names aren't automatically added in the alt text. But as I was researching a little more on this topic, I realized I incorrectly explained that custom message text on the first slide. Screen readers can read the text when it changes if you select the accessibility checkbox for the new text within that added state and edit the Alt Text. Here's a video example by Maria that shows what that looks like (using shapes and editing the ALT text): https://360.articulate.com/review/content/b46673ef-b554-4f9c-9999-971c9f3d9696/review As for using States for color changes, those are just visual enhancements, and the change of color is not recognized by a screen reader so don’t rely on color alone to co... Expand
Hi all, I cannot get this to work with a real drag and drop. When I say real, I mean one that can be scored and have multiple draggable items dropped (or moved) into a drop area. In my example I have 9 draggable objects that appear one at a time, which need to be dropped onto 1 of 3 drop areas. When dropped, the draggable state is switched to hidden and the next draggable item appears. If I use the keyboard to move an item over the drop area, nothing happens and the 'drop' is not registered. The only way I think I can achieve this would be with multiple triggers and variables that update when am item's motion path completes. It seems like an awful lot of work for interactivity that I would have hoped would be included in Storyline after all these years. So, I think I... Expand