Drag-and-drop

The problem

Once upon a time there was a software that contained drag-and-drop functionality. In order to pass WCAG 2.1 AA requirements, this software needed to implement an accessible version of their drag-and-drop feature.

Drag-and-drop interfaces are inherently visual and pointer-based. Our existing components offered visual affordances, but non-pointer interactions, like keyboard navigation and screen reader feedback, did not exist within the design system..

I wanted to find a way to make this interaction accessible without overcomplicating the component or applying a band-aid to the Grand Canyon with one-off solutions.

In order to provide parity, as well as fulfill WCAG compliance, any task that can be accomplished with a mouse must also be achievable when using assistive technology.

The solution

I led the design of an accessibility framework for drag-and-drop interactions within a large-scale design system. The goal was to create a consistent, inclusive pattern that supported keyboard and screen-reader users, while aligning with the design system’s component architecture and UI standards.

The framework became a guideline file that functions as an instructional resource to enable designers as well as cross-functional partners to provide an accessible drag-and-drop experience.

What I did

I conducted a competitive audit of existing design systems to understand how accessible drag-and-drop interactions were being handled across the industry. This helped identify best practices for keyboard navigation and screen reader feedback, which informed our own approach.

Lightning design system by Salesforce in particular, demonstrated strong alignment between keyboard interaction and assistive technology feedback—insights that directly influenced our interaction model.

The design

Rather than reinventing drag-and-drop, I focused on creating a model that translated the separate states of drag-and-drop into predictable, perceivable moments for all users.

This meant mapping out each affordance (like hover, grab, or drop) to the corresponding categories of keyboard commands, screen reader announcements, and visual focus indicators.

First and foremost, the user should be able to drag-and-drop an item by navigating to it within an item list using arrow keys. That item should then receive visual focus.

The user can then press space to “activate” the item. This initiates “drag-and-drop” mode and the item is now moveable. There should be some form of visual feedback that lets the user know that the selected item is in drag-and-drop mode. In this case, it’s a dash border.

From there it can then be moved to a different position within the item list by pressing the left or right arrow keys.

The item can then be dropped in its desired position by pressing space again.

Screen reader

Additionally, screen reader users should receive accurate feedback on what’s happening throughout. Since this is an unusual pattern, as much feedback as possible is the best approach.

Once the user enters the item list, they immediately receive placement information about their focused item (name, function, and position).

Once they drag the item, they hear where the item is currently in the process of moving to.

And once the item is dropped, the user hears feedback regarding the item’s new position.

Design system work

After resolving the aforementioned accessibility issues, I translated the final approach into design system guidance: high-level principles, annotated interaction flows, and do’s/don’ts for designers and developers.

Components

Drag-and-drop specific components such as “drag-and-drop mode” border treatments and drop zone target indicators were contributed to the design system.

Drop zone pattern

In addition to the item list setup shown earlier, guidance was documented for designs in which something needs to be dragged to a separate section of the page, for example dragging from one list to another

We start with a focus state on hover for a draggable item  

The dash border shows up when the item is selected 

The item is then visually represented by the target indicator component as it gets dragged. It is still visible with dash border in its original position. 

The item can now be previewed in the desired draggable position

Once the item is dropped, it is “officially” moved from it’s original spot into its new home

Accessibility

The item receives keyboard focus

Spacebar to select

Spacebar to drop the item

The impact

• Improved efficiency: Teams were able to adopt an accessible drag-and-drop pattern without reinventing logic each time.

• Increased accessibility compliance: The pattern passed accessibility audits and became the reference standard for moveable components.

• Cross-disciplinary alignment: Designers gained clearer guidance for inclusive motion and interaction states.

Drag-and-drop standards were then available to be implemented in other more complex patterns and scenarios from a systems level.