Forum Discussion

SalWiedenbeck's avatar
SalWiedenbeck
Community Member
5 years ago

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.

 

  • GregGarner's avatar
    GregGarner
    Community Member

    I came across this today when trying to design an accessible drag and drop activity. I have a few questions:

    1. ONLY if all the answers are correct or incorrect can I submit it. How can I make it submit if they have some correct and some incorrect?

    2. How can I lock down the drop targets? Mine will move via mouse and keyboard. I don't want them to move.

    3. And probably biggest question is, when using keyboard navigation, if I select one drag item and move it to the incorrect drop target, the state of the drag item changes but it does not actually move. Do I need to create move actions for even the incorrect answers? If so, how do I program that?

    I've attached the slide here.

     

    Thanks and best!

     

    James

  • GregGarner's avatar
    GregGarner
    Community Member

    Hi,

    Hopefully someone can help me with this....


    I'm trying to create a drag and drop 508 compliant activity. I've followed all these steps but when I get to the Drop Targets steps, I'm getting a bit lost. How do I make the drop targets accessible to the keyboard feature? I've just added the items to the screen, but can't seem to get anything to drop in them. What step am I missing?

    Also when making the move path, do I need to make a move path for both correct and incorrect drops?

    Any help would be greatly appreciated.

    • GregGarner's avatar
      GregGarner
      Community Member

      I went back through step-by-step, and I did have a few items that needed adjusted. However, I'm still running into an issue. If the user would select some correct answer and some incorrect, the submit button will not work. The only way to get the submit button to work is if all the answers are either correct or incorrect. Does anyone know how to make it where the submit button works if they only have a few wrong? I've attached the file here so you can see that its working if all answers are correct or incorrect. I need to make the submit button work if not all the answers are correct.

  • Change The "and"s in this trigger to "or". That way, if even one choice is incorrect, the Try Again layer will show.

    If you connect your conditions with "and", they must all be true for it to function.

  • Hello, Liz:

    Sorry to be dense....I looked at the example, and I don't get what the user does instead of dragging and dropping. 

    • SherriFricker-7's avatar
      SherriFricker-7
      Community Member

      The user can complete it like a regular drag and drop using a mouse or they can use keyboard controls to select and drop the objects onto their targets.

  • Using the tab and enter keys. Tab will move from object to object enter selects the object and then tab will move from drop zone to drop zone and enter selects the drop zone which performs the same function as dragging the object to the drop zone.

  • DebClemons's avatar
    DebClemons
    Community Member

    I came across this today and find it very interesting. Does anyone know if the accessibility built in Storyline will remain when the storyline block is inserted in RISE?

     

    • ShaneDrosi-188d's avatar
      ShaneDrosi-188d
      Community Member

      Yes! Whatever you do accessibly in SL will persist in a SL block in RISE.

  • Sally Wiedenbeck Hello thank you. How do I trigger Try again or continue with the other two layers? Thanks

     

     

  • HUGE Thanks to those of you who contributed to this thread years ago. It saved my bacon as I converted a drag and drop to an accessible "click and click" variation that should also be keyboard friendly.

    I did all the things in the tutorial, and also removed the Form view as recommended in the comments. The only remaining issue is that I can't seem to get the submit button to switch states when the items are dropped on the targets. Rather, it works when the items are dragged over, just not when they are clicked/selected and dropped with a click. I am using True/False variables.

    If anyone has suggestions, they're much appreciated. It took FOREVER to build this. :)

    • StevenBenassi's avatar
      StevenBenassi
      Staff

      Hi Amy!

      Thanks for sharing your file!

      In Storyline 360, Drag-and-Drop interactions are not fully accessible yet. I'm hopeful the community will be able to share additional workarounds with you! In the meantime, I'd like to point you to this resource with community input and sample files for your reference.

  • Hi! I used this example and tweaked for a course I'm developing but I need to alter the motion paths and am unable to. Can anyone give suggestions on how I would be able to alter the motion paths to match up with the way I have the drop targets laid out?