“drag-and-drop” Articles

I know it’s been awhile (*checks notes* wow, almost two years!), but I’m finally back with the next article in my “screen readers and drag-and-drop” article series. Here, I’ll be diving into how to convey to screen reader users when an element has been picked up or put down. Ideally, I’ll be able to identify at least a few approaches to prototype into full patterns to test later.

Most screen reader users have limited to no vision and will miss visual cues showing an item’s been grabbed. So it’s important to communicate these actions programmatically as well so that everyone can perceive the interaction.

I’ve been using the HTML Drag and Drop API (DNDAPI) a fair amount lately, which is a native way to build draggable interfaces. Despite some quirks, it works pretty well – making it easy for developers to create drag-and-drop functionality.

But the DNDAPI has a big flaw: there’s no built-in accessibility features. This means screen reader users (and many others) won’t be able to use interfaces built with it without a lot of mindful, additional work from developers (which, let’s face it, most don’t do).

Last year, I worked on a project which contained a reorderable list component – essentially, a group of items that users can rearrange in any order. Though I had no prior experience designing such a pattern, the end result worked well for our purposes. But I was sure that my lack of familiarity meant that there were improvements to the usability and experience that I could implement for the future.

As a result, I dove deep into the pattern – learning, creating, and testing versions of it to deduce as much as I could. In this article, I'm going to channel my findings into how we can create a reorderable list with a great user experience (UX).