Forum Discussion
Keyboard Accessible Drag & Drop Example
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.
http://communities.des.wa.gov/testing/Drag_Drop_ADA/story.html
Looking for feedback!
- LisaMorganCommunity Member
Thanks for this, Terry. I love it! So happy to see a keyboard-accessible drag & drop--I hadn't thought that was an option. Nice work. Thanks also for the Storyline file download; haven't checked it out yet but definitely plan to.
Hello Lisa and welcome to E-Learning Heroes :)
Glad that this thread was able to help you as well. Thanks for chiming in to share.
- TeresaVanderposCommunity Member
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.
Hey Teresa!
Hopefully you'll hear back from Terry soon, but in case he's not subscribed you are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile.
- TeresaVanderposCommunity Member
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.
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.
- TeresaVanderposCommunity Member
Thanks Leslie, I will go back in and take a look again!
- igsctechCommunity Member
Hi Terry,
This example is awesome but there is just single drop area in this activity. Can you provide the similar example for multiple drops? Or can you suggest the workaround?
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 :)
- JoeWaddington1Community Member
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.
- TeresaVanderposCommunity Member
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…
Thanks
Teresa