Using Drag-and-Drop in E-Learning #468: Challenge | Recap
If there’s one e-learning interaction that belongs in every instructional designer’s toolkit, it’s drag-and-drops.
Drag-and-drop ...
Published 6 months ago
Version 1.0
Blog Post
Hello everyone! After a bit of a break from ELHC, and fortunately being quite busy with contract work, I am back to drop in a simple interaction that I made. I have been working with making drag-and-drop more accessible, and this sample demonstrates that with the use of motion paths. I like this option, because it still gives the effect of items being "dragged and dropped", without having to actually do any mouse dragging. The source file is available in the Resources tab.
https://360.articulate.com/review/content/9f12b96b-31b0-4448-bd11-e690bfba7ed4/review
https://360.articulate.com/review/content/9f12b96b-31b0-4448-bd11-e690bfba7ed4/review
Thaddaeus, You did a fantastic job with the drag-and-drop example and the click-to-move feature—very intuitive and user-friendly! How did you manage the focus order with both methods? It might be worth ensuring the interaction is fully keyboard and screen reader accessible too, to make it even more inclusive. Great work overall!
- Thank you, Hilla! Thank you for pointing out the keyboard accessibility. I thought that it was not possible to make drag-and-drop items visible when using a keyboard, but after poking around a bit and taking a look at the tutorials that were provided in this challenge, I figured it out and learned something new! Thank you for helping me push myself to learn more!