Keyboard Accessible Drag & Drop Example

May 12, 2016

The challenge was to make a drag and drop interface that is also keyboard accessible for JAWS screen readers (with Internet Explorer 11). I took a portion of the existing Healthy Choices example and converted it to a multiple choice quiz. In the "standard version" when the different food images are drug on to the plate they cause a check box to be selected in the background. In the "keyboard accessible version" the multiple choice question are in view and can be selected by tabbing. You can also drag and drop items with a mouse if wish.

Looking for feedback!

40 Replies
Teresa Vanderpost

If Terry still subscribes, could you provide a little more insight.  I am pretty new to Storyline 2 and I assume the new slide was a drag and drop question but I can't figure out where on the timeline the multiple choice response comes in.  Are there two quiz options here.  I think I am missing something for sure, my apologies.  We would like to use this in Moodle for a course, but I want to ensure I understand the process.

Teresa Vanderpost

Thanks Leslie, I will see if he responds here and if nothing in a few days I will reach out.  I am actually going to ask a second part to my question.  

We tried the course on an iphone and we could not see the activity for the keyboard version. Also we found if we clicked Next with the mouse then we did not have the option for the keyboard activity, but I sense it may be built that way.


Leslie McKerchie

Hi Teresa!

I downloaded Terry's file so I could take a peek and better understand your questions here.

As for your first question - it's the same question, just depends on how it's presented to the learner.

I hid the 'background' as the trigger states will happen if the user has activated the keyboard mode via the Tab key:

You can see the multiple response question box now.

You can check out the chart here and scroll down to the accessibility section to see that Flash is the supported output for these features.

You will not be able to 'tab' on a mobile phone to activate the requirements in Terry's example, so yes that's how it's built.

Leslie McKerchie

Hello Pratik - Not sure if Terry is still subscribed here. You are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.

You may also want to consider sharing your .story file and what you have so far along with the details of what you would like to see and someone in the community will probably be able to assist :)

Joe Waddington

Hi all - I used to work with Terry, and can share with you that he has retired (Lucky him! - unfortunately for us!) he was amazing at finding creative ways to address accessibility. I just stumbled upon this post because I was searching for a creative way to make accessible drag-and-drops.

I'll grab his file, and if I'm able to come up with any interesting add-ons, I'll share it with the community.

Teresa Vanderpost

Thanks so much,
I am trying to convince organization to use Drag and Drops, but with accessibility it is a hard sell.

I was trying to review how Terry did this, and my only issue is that the Tab feature only works if I start with the spacebar for the next button, if I click with the mouse it doesn’t activate it on the next screen, and I think they want people to have both options available…



Leslie McKerchie

Hi Teresa - Well hopefully Joe will be able to pop back in with some additional information. In the meantime, would you be able to share your .story file to see if others in the community would be able to pop in and assist you?

Also, please note that your email signature came through when you replied via email. You can remove that if needed and here’s a quick Peek video if you need help.

Teresa Vanderpost

I don't have my story file, yet, I was using Terry's to try and tweak to see if I could have the second slide activated to be able to use tab/spacebar whether I clicked the next button or used the tab/spacebar on the first still curious, but I was just using his file at this time...