Blog Post
Jonathan_Hill
3 years agoSuper Hero
Hello!
Drag and Drop is great and all, but it presents accessibility issues. This was highlighted to me when the Articulate team shared my Star Wars demo, FIX THE HYPERDRIVE, on their Templates pages:
https://community.articulate.com/download/storyline-star-wars-knowledge-check
So I 'retrofitted' the course to allow users to 'click' as well as 'drag' each item:
https://community.articulate.com/discussions/articulate-storyline/issues-retrofitting-accessibility-functions-to-a-former-drag-and-drop-exercise
At the start of the quiz, you can now select whether you would like to DRAG or CLICK, and this selection is also accessible using the TAB key.
In the CLICK version you can select your answer using the keyboard too.
Try it out here:
https://bit.ly/elhc353
Drag and Drop is great and all, but it presents accessibility issues. This was highlighted to me when the Articulate team shared my Star Wars demo, FIX THE HYPERDRIVE, on their Templates pages:
https://community.articulate.com/download/storyline-star-wars-knowledge-check
So I 'retrofitted' the course to allow users to 'click' as well as 'drag' each item:
https://community.articulate.com/discussions/articulate-storyline/issues-retrofitting-accessibility-functions-to-a-former-drag-and-drop-exercise
At the start of the quiz, you can now select whether you would like to DRAG or CLICK, and this selection is also accessible using the TAB key.
In the CLICK version you can select your answer using the keyboard too.
Try it out here:
https://bit.ly/elhc353
- DavidAnderson3 years agoStaffI forgot about this one, Jonathan. I'll update the post later this morning to also include your example. I should have known you'd have an example and write-up about the project.
- Jonathan_Hill3 years agoSuper HeroThanks David.
I learned a lot of important lessons modifying this demo and hope others benefit from reading my notes. I think it was the first time I'd really considered the focus order in a design.
- LizzieAngell3 years agoCommunity MemberThis is great and a great work around - still looks lovely in the click version - nice to see it working well with the tab order - which seems very hard to achieve with interactions at times
- Jonathan_Hill3 years agoSuper HeroThanks Lizzie - hotspots being accessible through the TAB key was central to this solution and helped me keep the flow/appearance of the quiz.
- fabulalearning3 years agoCommunity MemberI love this example! Until I saw this retrofit a while back, I regarded drag and drops and something to be avoided because they're not accessible. Thanks for inspiring me to strive to do better than just skip drag and drops altogether!
- LindaLorenzetti3 years agoSuper HeroVery cool, drag and drop alternative Jonathan. I hadn't seen that one before.