Accessible drag and drop
Jun 02, 2021
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?
5 Replies
Drag and drop is not accessible, always advise not to use drag and drop, but if you want to add a separate track for the user where they get asked a question or something else.
Could ask them a question at the beginning or just jump to the next slide when the user presses the tab key.
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.
Hi, Nicki.
Thank you for reaching out! I found a few discussions that might give you some ideas for what you're trying to accomplish:
I hope this helps!
Thank you! This is how I'm doing mine at the moment but I abandoned the motion paths in the end, I'll attach my file which is a work in progress.
Hi Nicki. Did you get any further with this? I am looking for something similar so would be interested to know if you were able to succeed with this. Thanks Martin