Accessible drag and drop

I'm trying to create a template for an accessible drag and drop interaction. I need it to be able to work with keyboard only navigation as well as by the usual drag with mouse. I was hoping to use triggers so that the user could tab to the first item which would bring up the question, "Where do you want to put it?" (on a layer) and when they choose from the 3 options, the item moves along a motion path and lands on the drop zone. Everything worked, except for two things:

1. The draggable items don't get tab focus. It's like they don't exist.

2. When the item moves automatically (rather than by mouse drag) the drop zone doesn't seem to recognise it. 

Is there a better way to attempt this? Has anyone succeeded in making an accessible drag & drop, that doesn't rely on a mouse?


4 Replies
Nicki Berry

Yes, and that is what I always tell my client. However, I recently saw a drag & drop (healthy eating) where it had been developed to be accessible. When you tabbed to each item of food, it brought up a choice and then moved the item to where the user chose to put it. It was really good. I would like to be able to make something like that.