Usability and accessibility » 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.
A vanilla JS drag-n-drop library that has a11y in its mission statement.
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 together 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.