The problem
drag and drop
/ˈdraɡ ən ˌdräp,ˌdraɡ ən ˈdräp/
verb
move (an image or highlighted text) to another part of a screen using a mouse or similar device.
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
A guideline file that functions as an instructional resource to enable designers and cross-functional partners to provide an accessible drag-and-drop experience.
Understanding the user
It’s always recommended to test with actual assistive tech users rather than assuming how they’ll interact with a software or product based on compliance standards.
Competitive Audit
Additional research was conducted to gather more information on other accessible drag-and-drop experiences within other design systems.
Lightning design system by Salesforce provided a really good example of keyboard functionality hand-in-hand with helpful screen reader announcements.
The design
Concept
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.
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.
Once an item is activated with space it has then been “grabbed”.
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.
Concept
Once the user enters the item list, they immediately receive placement information about their focused item (name, function, and position).
Once they select the item, they hear feedback that it’s been grabbed.
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.
par·i·ty
/ˈperədē/
noun
1.
the state or condition of being equal, especially regarding status or pay
