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!
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.
Thanks Terry for sharing here - and you may want to update the title to include the words "Example" so that others are more aware of what you're sharing here.
Fantastic example, Terry! Thanks for sharing in the forums as well as this week's e-learning challenge.
I just posted the recap where you'll find your example: https://community.articulate.com/articles/choose-your-own-challenge#TerrySpringer
Thanks David!
Hi Terry,
How did you do that? Is there a tutorial that I can follow?
Thanks.
Hi Tina!
Not sure that Terry is still subscribed here, but it does look like the source file was shared - so be sure to check that out to dig into the details :)
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.
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.
Hi Leslie,
Thanks for the response. With so many things going on, I forgot to look at the source file. Thanks for directing me to it. I'm looking at it now and figuring out how he did it.
Thanks again,
Tina
No problem Tina! Good luck :)
Hi Tina,
Were you able to download the storyline file?
Let me know if you have any question.Terry
Hi Terry,
Thanks for checking. Yes, I have downloaded the file. I think I know how you did it. For now, I have no question but I may reach out to you later as I will try to replicate what you've done.
Thanks again.
Tina
Thanks for the update, Tina! Don't hesitate to reach out if you have further questions :)
