Build an Accessible Drag and Drop Interaction in Storyline
Jan 22, 2020
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.
90 Replies
This work great until I hit the the drag item 3 to drop target 1 and then i hit drag item 1 and hit drop target 1 again. The both went to target 1. What I am looking for is you can only match ine drop to one target.
See my file, the issue is having a tab item reappear. I want them to stay hidden after the have be paired. I have tried it so many ways, I am getting confused.
Thanks for sharing.
Liz, I don't understand what you mean by "having a tab item reappear" - can you explain a little more?
What I mean is, I do not want them to be able to tab on something that has been pick already. My triggers are arguing with each other. Ugh, I don't think it is doable the way my clients want. Works great in normal use, but tabbing, no.
I see you changed the state of the top button to hidden when the option has been used, which removes it from the tab order. You could do the same for the definition, which would remove it from the tab order as well, preventing a keyboard user from selecting it a second time. You would need to add the definition object on each of your extra layers as well so that it is visible and readable, but then it would be a non-interactive object and not pickable again. Note that you would also need to remove any extraneous triggers for that visible object, because if there are triggers it is considered interactive and will be tabbed to.
Hello, I have a question.
I want to try this by converting an existing D&D from the latest version of Storyline (SL) but one thing I notice is that if I open your file there isn't any 'Form View' or 'Slide View' and obviously they govern a lot of the functionality of how you match drag items to drop targets. Is the Form view still working in your file and just not visible for some reason or is it not there, disabled or something?
You seem to achieve all the necessary functionality via triggers, where currently I still have the Form view covering some of that functionality. Is it possible to achieve what you have done with Form View in play?
Or should I just ignore Form View and Dropdown Options in the toolbar and create all the triggers you work with?
I am working with a set of templates that someone else n my company created; I am not starting from a completely blank slate.
Any help appreciated. Might take more than one conversation I feel.
Thanks
Andrew Lloyd
I don't believe it is possible to create this while using the built-in interaction with form view. The triggers that create the keyboard-accessible functionality are incompatible with the built-in interaction.
Hi Sally,
Thank you for that.
I note your attached file doesn't have the Form/Slide view in it. Is that because you're using a different version of Storyline, or have you suppressed it somehow? Or is there a way to bypass it, or simply ignore it, if you have it built-in, as I do. If we set up all the drag items as 'none' does that work, or is that pointless?
I am just trying to find a way through and understand how you have not had to worry about the Form view.
Andrew
Hello,
A final question. Is it the case that the accessible version described above is able to be used via both a keyboard and a mouse click? That is: is it just one version for everyone?
Andrew
Andrew-
Yes, this version allows for completing the interaction technically three
ways: tab+enter, select/click with mouse, or drag/drop with mouse.
For your previous question, sorry I didn't see it immediately. This
interaction is built outside of the built-in drag/drop, so you shouldn't
have a form view on the slide at all for this.
Sally
Hi Sally,
This is incredible! Thank you so much for sharing and helping fill a huge gap in developing content that is accessible for everyone!!
Thank you kindly, Angi
Greeting fellow heroes,
I've been attempting to recreate this activity, and thought I had it down, however, when I drag an object to the wrong drop spot, it goes back to its origin. In other words, the learner can't drag an object to the wrong spot, which makes it to easy to get all of them correct. I'm attaching my file with the hopes that someone might help me to debug. Thanks!
Hi Martin,
It looks like you missed adding the trigger for the incorrect answers. You have to add these triggers, because if there is nothing for an item to do when dropped in an area, it does just go back to the origin. If you add in these triggers, they will stay on the wrong spot when dropped there.
For your file, this would be triggers like:
Change state of (object) Braille Output to (state) Drop Incorrect when user drops (object) Braille output on (wrong answer object) Mobility impairments.
and
Change state of (object) Braille Output to (state) Drop Incorrect when user clicks (wrong answer object) Mobility impairments - if state of (object) Braille output is selected
You need to do this for each wrong answer for each drag item.
Also, it looks like you have an extra trigger on your Braille Output object to show the Correct layer when the user clicks on the object. This isn't related to the issue you mentioned, but will cause other errors unless you remove it.
Hope this helps!
Hello wonderful people,
I am working on my own keyboard accessible drag and drop slide, and found this post very helpful. I followed the instructions exactly, except the only difference I have is that I am using groups of images and textboxes as opposed to shapes with text built in.
I am having a significant amount of difficulty getting the drag-images to change states when I drop them over the target images, or when I click into the target shapes when the drag-image is selected.
As a result my quiz always returns incorrectly :'(
Any help would be much appreciated!
Hi Tom,
It looks like you haven't created the states for the drop correct/drop incorrect states. You'll need those states to exist on the drag objects (select the object, go to States, select "edit states," and then create the drop correct and drop incorrect states). Then, this should work for you.
Thanks Sally,
Since I am using a group object (consisting of an image as well as a text box) as my drag object storyline does not allow me to edit the states of the group. What I have done instead is create new states for the image behind the text box on every group. With triggers this is supposed to change state from Normal to drop correct/incorrect when the group is dragged onto the target image.
Unfortunately this isn't the behavior I am noticing. Even though I have the state change triggers, I do not notice a state change.
Thanks for your help anyways Sally!
This post was removed by the author
Hi Dominic,
Your triggers for showing the correct feedback layer and the try again feedback layer were identical, when they need to be different. They should look like this:
Your show layer correct was how it should be. Your show layer Try Again should be set to happen if the state of any drag item is drop incorrect (you had it to drop correct), and the conditions on it should be set to 'or' not 'and' so that it shows the try again layer if any of the drag items are in the drop incorrect state.
Hope this helps!
Dominic - just noticed a couple other things in your file:
1. You built these triggers on top of the built-in drag and drop. Unfortunately, that won't work for a keyboard accessible option, because the way the built-in drag and drop is created, a keyboard user cannot select the drag items. Go to the Insert tab and select remove freeform to change this.
2. If you want your user to try again, change the try again button on that layer to "jump to slide" and set it to the same slide. Make sure your slide settings are 'reset to initial state.' This will reset the interaction on the base layer when the user clicks the try again button.
3. When using the keyboard interaction (after completing step #1 above), your drag items move to underneath the drop targets. Make sure your drag items are at the top of the timeline stack so they move to on top of the drop targets instead of underneath.
These should all be quick + easy fixes, but let me know if you want more detailed information.
This post was removed by the author
Hi Dominic,
Your new file seems to be working for me - what specifically is not working for you?
The only thing I see is the drop targets are still above the drag items in the timeline stack, so in the keyboard use the drag items move behind the drop targets instead of in front.
Hi Sally
I've resolved the issue having the drag items in top, but in preview the content doesn't move when using the Tab and enter keys. Should it work with these keys?
Dominic - It did work for me with those. I tabbed to a drag item, hit enter to select it, then tabbed to the drop target, and hit enter again. That moved the drag item to the drop target as it should.
Sally - Thanks for the reply. I'll need to look into it as it is not working for me.
Can you suggest anything?. I have used as laptop and normal keyboard and neither work.
Hi Sally. I want to attempt to build this. I have one question - does this approach work for a screen reader? I have been told that several layers are hard with accessibility because the screen readers will read all layers as if they are on one layer. It doesn't react to the triggers that leave layers inactive until they are triggered. Have you tested it with a screen reader or is that still an accessibility issue, even if we satisfy the keyboard compliance?