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

There are tons of drag-and-drop list reordering modules out there today, very few of them are built with accessibility in mind. Dragon Drop seeks to fill this gap by providing means for all users to perform this somewhat common task.
2021

HTML5 Sortable library

Lightweight standalone library for creating sortable lists and grids using native HTML5 drag and drop API.
2021
JavaScript library for reorderable drag-and-drop lists
2021

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

Keyboard/assistive technology accessible drag-and-drop reorder list.
2021

4 Major Patterns for Accessible Drag and Drop

Building an interaction that works for both mouse and non-mouse users
2021

Example implementations

Taming the dragon: Accessible drag and drop

2022