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.

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.

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.



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.

Text box(es)
Continue button

Continue button
Jump to next slide

Text box(es)
Try Again button

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.


86 Replies
Robyn Dischar

Hi, I have been following this thread for awhile and was curious if anyone from Articulate had any updates or predictions about when drag and drops will be accessible for keyboard users and screen reader users. Also, if anyone has any examples of alternatives to drag and drop activities they are willing to share, please let me know! I'm looking for something more interactive, outside of the standard multiple choice options. I tried using the instructions above, and 1) they did not work for me (I'm not sure where I went wrong), although I followed them step by step. 2.) this option, if I could make it work, would not be a logical choice considering the amount of time and effort invested in one knowledge check question. Accessibility is very important and I want to make sure I can offer all users a meaningful, equitable experience. 

Jose Tansengco

Hi Robyn, 

Here's a helpful webinar from my colleague Sarah Hodge that you can check out which demonstrates how to create accessible drag and drop interactions. 

There's also a project file that you can download for your reference. If you have any additional questions regarding accessibility, feel free to reach out to our support team here to connect with one of our support engineers.  

Ellysa Yes

Hi Sally thank you so much for sharing! This is an excellent resource as faculty often use drag and drop and form view despite its accessibility issues. Is there any way to use this technique for instant corrective feedback? Or would that require the learner pressing the submit button after every choice they make?

Diarmaid Collins

Hi there. Can I ask, for Drag Items, Point 2 it says:

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)

If I select all my Drag items and had them as a "Button Set" wouldn't that cut out the need for this step? Or would that impact on the functionality?

I ask because I am trying to simulate a DragonDrop but with 6 items, and it seems to be exponentially more complicated with every additional line of triggers. To be honest, there was probably less coding involved in getting Apollo 11 to the moon.

Why is there a state on each DROP called DROP CORRECT, when the Submit button just monitors the states of the DRAG items? What is the practical purpose of that state?

Do items only become draggable in non-Freeform (regular ordinary) slides when they have a DROP CORRECT and DROP INCORRECT state applied to them?

The reason I'm asking is that when the user opens the slide and uses the mouse to drag the items, the slide activity gets 'registered' when the SUBMIT button is clicked.

However, when the user uses keyboard tabbing and RETURN/ENTER to complete the activity, the SUBMIT doesn't see anything as being completed.

I have had to manually create an INVALID ANSWER layer to show if the user hits SUBMIT without doing anything but the keyboard commands just don't convert the correct or incorrect motion path movements to the DROPZONE states.

I now have 17 lines of triggers, PER OPTION, and it's a nightmare to try and troubleshoot.

 I have always found relying on STATES within Storyline to control stuff to be very flaky and it seems that this is a prime example to remind me why I never bother with them as key triggers for interactions. Give me hardcore TRUE/FALSE or something tangible, that can be monitored by a reference variable - not some Drop Correct state that gets immediately covered by whatever gets dropped upon it nonsense.



Diarmaid Collins

Hi Sally. Thank you for responding. I think your work is a beautiful solution to a complex problem. I wasn't criticising your coding - despite the simplicity of your example my brain is just not working no matter what I try.

I think Storyline is glitching its trigger monitoring of states on me. Also, triggers seem to be deleting as I create them.


Dorothy Miller

Hi Everyone

I've just logged a call again regarding the keyboard strokes to make this accessible.  I followed the instructions in the recommended link:  Build an Accessible Drag and Drop Interaction in Storyline - Articulate Storyline Discussions - E-Learning Heroes.

However, I can't seem to get to the finishing line to make it work with keystrokes - if anyone has an easy solution I would love to hear it.



Danielle Ryan

Hello - I have attempted to follow this after having one of my projects sent back because the drag and drop was not accessible for people who can't use a mouse. I've spent all day copying this but I can't seem to get it to work. I'm having the following problems:

- When I preview the slide the objects stay at the end of the motion path instead of stacking neatly within my drop target which they would do when the drag and drop interaction is done with a mouse. Therefore, they all stack on top of each other at the end point of the motion path and the user can't see what they have put where.

- I had set the drag and drop items to be revealed one at a time, however when the user has selected the drop target for last item, the next one does not appear. There doesn't seem to be a way to un-select the item.

I deleted the slide and have created a drop down list interaction instead, but I was just curious if anyone could tell me why I had the above problems with that fix? I will probably want to use a drag and drop again and will need to make it accessible (I don't have time with this project so just need to find a quick alternative now)

Any thoughts or ideas would be much appreciated!


Karon Wright

I ran into the same problem.  Switched from Slide View to Form View under in the Question Pane and noted the items with Drop Return only had no Drop Target identified.  

I find it's really important for me to name all objects in my slide or I will go CRAZY.  Once I named the objects and targets them the items were accepted.  Still need Layers and Triggers. But that problem was solved.

Dorothy Miller

Thank you.  I've revisited my design since my post and have now added in motion paths - I'm still not able to replicate it with keyboard strokes (ie I don't know what they are to select, move and drop).  

If anyone could advise me on the keyboard strokes to select the item and move it along the motion path and drop I would be most grateful!


ian morais

Thanks @

Sally Wiedenbeck

An elegant solution. I too wanted to use it as part of a graded assessment and found that if, after following Sally's steps, you convert the slide to a freeform pick many, you can them use the drop states to select the quiz options.

Here is an example

It seems to work for me, but do let me know if there are issues. Thanks

Sherri Fricker

Hello, We have successfully recreated this, but would like to control the number of attempts a user makes. I tried adding a varaible that would change once they saw the try again layer and use this variable on the submit button to help identify which layer should appear (incorrect or try again) but it doesn't seem to stick. Any help would be greatly appreciated.

Michelle Pike

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


Tora Bailey

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.