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.

 

12 Replies
Liz Watkins

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.

Sally Wiedenbeck

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.

Andrew Lloyd

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

Andrew Lloyd

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

 

Sally Wiedenbeck

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

Angi Lewis

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

Martin Evans

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!

Sally Wiedenbeck

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!