Forum Discussion
Build an Accessible Drag and Drop Interaction in Storyline
If you've ever needed to build an accessible course in Storyline, you may know that the built in drag and drop interactions are not accessible (see the VPAT).
However, with some extra work it is possible to create your own drag and drop interaction in Storyline that is fully accessible.
The issue with drag and drop interactions and accessibility is that people who access the computer using only a keyboard or assistive input device, and no mouse, cannot click-and-drag. So, the interaction must have another option, that works through the use of keyboard inputs (typically, the tab and enter keys). In Storyline triggers, anything that is done "on click" can be mimicked by a keyboard or other input device. To build a keyboard-accessible drag and drop requires building a second set of triggers that function using click-based rather than drag-based interactions.
Here is how to build your own keyboard accessible drag and drop interaction in Storyline.
Please note that you may include other elements that are not fully accessible. Take a look at the WCAG Guidelines to evaluate other aspects of your course creation
This interaction relies on a user-selected submit button. This button needs to be on the slide, as the triggers used are not compatible with the built-in submit button in the Storyline player.
Note: It will be easiest to create all layers, elements, and states before creating the triggers.
LAYERS NEEDED
Base Layer – Most of the triggers will be on the base layer.
Correct – A feedback layer for when the user submits the interaction, when all items have been moved to the correct drop location.
Incorrect – A feedback layer for when the user submits the interaction, when the interaction is incomplete or some items have been moved to the wrong location on the screen.
BASE LAYER
Elements Needed
Drag items – one or more
Drop targets – one or more
Submit button – one
Drag Item States
Normal - The built in state. This does not need to be modified.
Selected - Create a “Selected” state. Make sure to edit the selected state to include a visual indicator that the item is selected. An easy way to do this is to add a “glow” shape effect in a color contrasting the object.
Drop Correct - Create the “Drop Correct” state. You may want to visually signal that the drop was completed. One way to do this is to darken or desaturate the object in the “drop correct” state.
Drop Incorrect - Create the “Drop Incorrect” state. Make this state visually identical to the Drop Correct state.
Triggers
Submit Button
1. Show layer Correct when user clicks
If Drag item 1 state equals Drop correct
And Drag item 2 state equals Drop correct
… (Continue through the rest of the drag items)
2. Show layer Incorrect when user clicks
If Drag item 1 state does not equal Drop correct
Or Drag item 2 state does not equal Drop correct
… (Continue through the rest of the drag items)
Drag Items
For each drag item:
1. Change the item’s state to Drop Correct when it is dropped on the right drop target
Change state of Drag Item 1 to Drop Correct when user drops Drag Item 1 on Drop Target 1
2. “Deselect” all other drag items when this drag item is selected (Change other drag items’ states to Normal, if they are currently selected)
Change state of Drag Item 2 to Normal when user clicks Drag Item 1
If Drag Item 2 state is equal to Selected
Change state of Drag Item 3 to Normal when user clicks Drag Item 1
If Drag Item 3 state is equal to Selected
… (add this trigger for all other drag items on screen)
3. Change the item’s state to Drop Incorrect when it is dropped the wrong drop target(s)
Change state of Drag Item 1 to Drop Incorrect when user drops Drag Item 1 on either Drop Target 2 or Drop Target 3 … (include all incorrect drop targets in the list)
Drop Targets
For each drop target:
1. Move the selected Drag Item along a motion path to the Drop Target when the user selects the drop target. NOTE: The move triggers MUST be before the state change triggers in the list
Move Drag Item 1 on Motion Path* when the user clicks Drop Target 1
If Drag Item 1 state is equal to Selected
* For the motion path, create a line motion path with start and end points in the center of the drop target. This will move the object to the correct location without showing movement on screen. Make sure to go into the path options and select “locked” for origin. This will ensure that no matter where on the slide the object starts from, it will move to the correct position with the trigger. Name the motion path something descriptive so you can identify it in the trigger list (ex: Drag 1 to Drop 1 Path).
NOTE: When you create a motion path, Storyline automatically adds a trigger to the object to follow the motion path when the slide timeline starts. Make sure to go in and remove all of these triggers.
… Make this trigger for all drag items on the slide.
2. Change the state of the corresponding Drag Item to Drop Correct, if the Drag Item is selected
Change State of Drag Item 1 to Drop Correct when the user clicks Drop Item 1 if Drag Item 1 state is equal to Selected
3. Change state of the selected drag item to Drop Incorrect for all drag items that do not match with this drop target
Change State of Drag Item 2 to Drop Incorrect when the user clicks Drop Item 1 if Drag Item 2 state is equal to Selected
… Make this trigger for all remaining drag objects on the slide.
CORRECT LAYER
Elements
Text box(es)
Continue button
Triggers
Continue button
Jump to next slide
INCORRECT LAYER
Elements
Text box(es)
Try Again button
Triggers
Try Again button
Jump to slide (current slide) – this restarts the interaction on the slide base layer
NOTE: Make sure the slide is set to “Reset to initial state” for the “when revisiting” selection in the slide properties.
And there you have it! It looks like a lot, but once you've done it a time or two you can get the hang of it.
Below is an example .story file of this interaction. It uses the same names as the instructions above so you can see how this all looks in a project.
Hi Sally, I am hoping this thread is still working as you have helped me build an amazing fully accessible drag and drop. My only struggle is that, as above you say the motion path needs to be before the state change trigger, which i understand. But for some reason I cant move the state change to after the motion path. I have tried deleting the state change of the drag items and doing them again but they just come before. Any ideas what I am doing wrong?
Many thanks
Michelle
There are various trigger sequence combinations that can be used. Personally I found it easier to use SLs built in "number of tries" after converting to a freeform question.
Hi Ian,
I built my drag and drop on a regular slide, not a question slide, so I don't have that option available to me.
This is an amazing post and it really helped me create an accessible drag and drop activity. Thank you so much!
I do have a slight problem, however, that I'm not sure how to fix. If a user drags and drops a drag object onto a drop target that already has a drag object on it, it will stack it on top. I would really like it to move back to its original position. Is there a way to stop it from stacking? I know that there is the option to stop this when using the drag and drop freeform question but because I've built it without using that in order to make it accessible for keyboard users I don't have the option (at least I don't think I do) and I'm not sure how to achieve it.
Again thank you for the fantastic post.I was able to add that to my build (above) by adding additional conditional triggers.
Hi Ian,
That's great. I can see from your example above that you've managed to stop objects from stacking on top of each other. How did you do it? I've tried adding additional triggers but as yet I haven't had any success. I think I may be missing something.
I appreciate the help.
I set motion paths back to the the drag objects' original positions, then set conditional triggers to move drag object (back) to their original position from a drop when another drag object's state is that drop.
That's what I've done but it doesn't seem to work properly. At least now I know I'm doing the right thing, there's just something stopping it from working. I'm sure I'll figure it out. Thank you!
Thanks for all of your comments.
I built mine on a regular slide first and then used "convert to freeform slide".
It can be done with a combination of conditional triggers and variables, I found it simpler to put them across multiple layers rather than trying to get the logic to work from the base layer alone.
Thanks so much for this! I tried to build one out myself. It works when I preview it using the drag and drop functionality, but when I use the more accessible selecting method with motion paths, I always get the "Try Again" layer. I can't for the life of me figure out what is off in the triggers. If anyone would be able to take a look, I'd appreciate it.
There is something definitely wrong with these triggers:
I don't understand for sure what it is. When you click to move a drag object to its target, it gets set to Drop Correct. Then when you click the next drag object, all the previously moved objects are reset to Normal state, even if they aren't selected. Those triggers are firing even if their conditions aren’t met. It doesn't happen when you drag them. It may some corruption in the states, the paths, the targets, or the triggers. I couldn't isolate it. But I do know that when I got rid of these triggers, it started working. I'm not sure why these triggers were used in the first place. What they do is mimic exactly the built-in actions of the selected state if the objects are in a button set. I renamed Selected_ to Selected, deleted these triggers, put the drag objects in a button set, and almost everything started working.
What did not work was clicking on drag item 1 and moving it to target 2. When I deleted target 2 and recreated it from scratch, it started working, so there must be some sort of corruption in it.
Everything is on the New slide, and I think it works. Besides, it's a lot less work designing the interaction using the built-in functions.
Love this template! However, I am running into an issue on each custom state with the motion paths. The motion paths copy into the Drop Correct, and Drop Incorrect states. I cannot remove them and this causes the drag items to the far right of the screen, because once it is in place on the correct drop target, the same motion path is followed, and the drag item is hovering to the right.
