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!
- TeresaVanderposCommunity Member
@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
- JuliaAllen-1574Community Member
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.
- JuliaAllen-1574Community Member
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.
- JuliaAllen-1574Community Member
I changed the command on the first slide to state, "When user presses Tab after clicking on THIS SLIDE, Set ADA to value True", and now it works every time.
- TeresaVanderposCommunity Member
Good sleuthing Julia! Glad it is working now, and I will be sure to update my copy as well in case I ever use something similar.
Cheers
T