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!

34 Replies
Teresa Vanderpost

I quickly grabbed a piece of an existing one that would be where I need help.  On slide two they can tab to the PWA Facts button but then the layers with the stickie notes there are hotspots.  Is there a way I could create a variable that when they got to the black arrow they could click spacebar or enterand it would open the first layer and then how could we get them and then tab through and get to arrow and see next layer by using spacebar or enter on the arrow.

The next slide would be similar, and the other one is I have an example where they hover over a picture to make it appear larger (on another layer) so again trying to give them away to do this.

I haven't configured the Tab Order button yet, it was a little confusing when I went in there on this particular slide

Joe Waddington

Hi Teresa -

Since you can't use hotspots in the tab order, what we've done is set up buttons either under things or just off screen. The sighted user will see the corner and know to click on the hotspot. For the blind user, the button will be the way they will turn the pages, and it will be hidden from the sighted user.

Check out my modified version of your file. I've also adjusted the tab order on your file to see how it should be set up.

Julia Strauss

I am looking for the solution to make the drag and drop activities accessible. I am really happy to find this thread. I downloaded the file and opened it in Storyline 3. It did not work in Storyline 3. Can someone help me with it, please? This is such an important solution. I hope someone can create a video to show the details. I am sure a lot of people will benefit from it. Thanks a lot!

Dominic Knowles

Hi Tina

I'm not sure if you are still subscribed, but just come across this article and found it really useful.  I have managed to re-create the content, but when I have gone to preview the content, I'm having a problem tabbing into the tick boxes and not sure if I'm missing something?

Any help appreciated.   

 

Leslie McKerchie

Hi Dominic,

Thanks for sharing that you've run into an issue tabbing to items in your project. 

With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Lee Webber

you use TAB to move between the checkboxes and spacebar to select the item. To view this you need to run the project form the beginning and press tab on the first screen to activate the ADA variable in the project which then displays a checklist for use with the TAbB and SPACEBAR buttons. 

This is fine for simplistic one option drag and drop but where you have multiple drop zones and choices I have still not found a suitable solution.