Keyboard Accessible Drag & Drop Example

May 12, 2016

Terry Springer
By Terry Springer

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!

40 Replies
Teresa Vanderpost
over 6 years ago09/06/17 at 3:46 pm (UTC)

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
over 6 years ago09/06/17 at 6:12 pm (UTC)

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
over 3 years ago08/19/20 at 7:06 pm (UTC)

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
over 3 years ago10/02/20 at 3:20 pm (UTC)

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
over 3 years ago10/06/20 at 2:59 pm (UTC)

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
over 3 years ago12/14/20 at 2:44 pm (UTC)

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.

Julia Allen
1 year ago01/31/23 at 6:23 pm (UTC)

Hi, Terry and community, I downloaded this file and opened it in my Storyline 360 application, and when I preview it or publish it to Review 360, using the tab key on the first slide to start the presentation does not activate the accessible version of the second slide. It does not work. Which may explain why so many users are confused here. I don't know if something changed in  a recent update of Storyline (it asked me to update the file when I opened it) or if it must be published to an LMS to work correctly, but this solution is not working. Either the variable is not recognizing the keyboard activity, or the triggers are not functioning as indicated. Please help. Thank you!

Teresa Vanderpost
1 year ago01/31/23 at 6:31 pm (UTC)

@Julia, I am in the latest Storyline and I just did a preview to check for you, and it works for me.  I did Preview the scene.  I had to hit Tab twice then you see Yellow box around the Next button, then I pressed enter to move forward, then used tab and spacebar to move through and select options on the second slide and submit.  So right now it still does work.
Here is a Peek video recording of how it worked for me just now, hope this helps.

https://360.articulate.com/review/content/03205ae2-f50d-42f3-b61e-a9e717525ac1/review

Julia Allen
1 year ago01/31/23 at 8:13 pm (UTC)

Hi, Teresa, Thank you for responding but it is most definitely not working for me. I knew how to use the tab key and enter key to move forward, but when I get to slide 2, I see the non-accessible version of the slide. I am on v3.67.28569.0. Please see the screenshots of the first slide with Next selected, right before I clicked Enter, and the second slide, right after I clicked Enter.

Next Selected on first slide

Non accessible version displayed

Julia Allen
1 year ago01/31/23 at 8:19 pm (UTC)

I think I figured out why it worked in your preview and not for me. According to the logic on the first slide, it states "When user presses Tab AFTER clicking on Button 1, Set ADA to value True". So if I click tab just until I get to Button 1 (the Next button) then click Enter, that does not set the variable value to True. If I click Tab to go PAST Button 1 (as you did in your recording) and then either tab or Shift-tab to get back to it, then the variable is set to True and I see the accessible slide.

Sign In to Reply