Scalable Accessible Drag and Drop Now Available

The concept for making drag and drop accessible has always been seemingly straightforward. Add an ARIA menu button to make it possible to dropdown and choose the desired target drop zone. Simple, right? In practice, not at all.

It is extremely difficult to create a scalable accessible drag and drop implementation. Not because the concept of the dropdown is difficult, but rather, because the act of adding accessible controls often breaks the underlying drag and drop capability. So, it is necessary to create sharable API methods that are used by both mouse and keyboard events to prevent conflicts, and to facilitate related callbacks.

After you finish debugging all of that for basic event binding, then you must make it scalable. This requires adding support for full configuration, dynamic naming for multiple drop targets, support for any type of draggable content ranging from standard images to dialogs or content panels, proper focus management within variable content, and full callback support for other developers to plug into.

Here is the fun bit, now try doing it using a screen reader and without ever being able to see the monitor. Exactly, I will spare you from all the pain, frustration, and the times I wanted to throw the computer out the window.

Instead, I present to you a shiny new drag and drop implementation as though by magic, which you can use and implement guilt-free to your hearts content. Doesn't that feel much better?

There are 3 primary variations, Copy, Move, and Sort, though they can be mixed and matched and fully customized to do anything you wish.

·      Copy: https://whatsock.com/Templates/Drag/Copy

·      Move: https://whatsock.com/Templates/Drag/Move

·      Sort: https://whatsock.com/Templates/Drag/Sort

·      Download: https://github.com/whatsock/apex

Enjoy!