Design for all » Inclusive usability » Drag-n-drop

Making a UI drag-and-drop, i.e. enabling moving around items with a mouse or by touch, inevitably leads to the need for alternative forms of interaction for non-keyboard users etc.

Sortable list

Unfortunately, most available libraries are solely focused on the visual interaction – all the way to outright a11y-hostile attitudes dismissing the need for making UIs universally accessible.

Enter The Dragon (Drop): Accessible List Reordering

smashingmagazine.com/2018/01/dragon-drop-accessible-list-reordering/

HTML5 Sortable library

lukasoppermann.github.io/html5sortable/index.html

SortableJS

sortablejs.github.io/Sortable/

Accessibly drag-n-drop patterns

Ultimately, it boils down to establishing or summarizing established patterns for inclusive interaction with such a UI:

schne324/dragon-drop: Accessible drag and drop list reorder module

github.com/schne324/dragon-drop

4 Major Patterns for Accessible Drag and Drop

medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09

Example implementations

Taming the dragon: Accessible drag and drop

react-spectrum.adobe.com/blog/drag-and-drop.html

Last edited: Nov 2022