Usability and accessibility » Drag-n-drop

Sebastian Greger This is a living document
Last update:

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.

A vanilla JS drag-n-drop library that has a11y in its mission statement.

HTML5 Sortable library

This appears to have at least some ARIA-features implemented, but the UX lacks a bit in regards to displaying the new location before the drop


Apparently one of the most popular, and with very smooth UX, but unfortunately also not accessible vanilla JS library

Accessibly drag-n-drop patterns

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

Extensive Smashing Magazine article describing the challenges and how the DragonDrop library solves them.

Article and demo examples showcasing accessible interaction patterns for drag-n-drop UIs.

Example implementations

I'm Sebastian, Sociologist and Interaction Designer aiming to bring toge­ther social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. This is my "digital garden" with carefully curated resources. For a more stream-like outlet, see my journal.

My occasionally sent email newsletter has all of the above, and there is of course also an RSS feed or my Mastodon/Fediverse profile.