WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Drag n drop

for

From: Tim Harshbarger
Date: Jun 28, 2018 7:03AM

In case it helps--here is how I would go about solving an accessibility problem with drag and drop. This approach isn't necessarily unique to myself. I have observed others do the same thing when they are confronted with particularly difficult accessibility issues.

First you want to figure out what the purpose of the interaction is in the current interface. What does this interaction help the user accomplish? Regarding drag and drop, I have seen it used to do a couple of things. Your situation might not fit either one of these.

I have seen drag and drop used to help a user move something from one state to another. For example, moving a task from an incoming queue to a completed queue. I have also seen it used in a maze game--where the user selects the character, drags the character along a path in the maze, and drops the character into a specific position of the maze. In that situation, the purpose of drag and drop seemed to be to allow the user to draw the path for solving the maze.

I also try to break the interaction down into smaller pieces. For example, with regards to drag and d drop I would probably break it down like this.

* The user identifies the item that they want to drag.
* The user identifies the destination where they want to place the item.
* The user selects the item in its origin location.
* The user drags the item along a drag path to the destination.
* When the user reaches the destination, the user does something to indicate that the item should be placed at the destination.

Between those 2 things, I end up with a better idea of what the problem is and that gives me ideas for what might be needed for a solution.

For example... With regards to dragging a task from one queue to another, I would assume that I don't need to solve the problems involved with a drag path. I just need to find a way for the user to identify the item they want to move, provide a way for them to select the item, allow the user to identify the destination, and provide a way for the user to indicate the destination of the item they selected.

For the maze game, I know I would also need to provide some way that allows the user to select the path through the maze--perhaps if the maze is broken into tiles I need to provide a way for the user to select the tiles that make up the drag path.

If I do all the things above and neither I nor my colleagues can come up with a solution, I usually look at starting over again since it might mean that I still haven't quite understood the purpose of the interaction or have broken it down correctly. Of course, it also can mean that there just might not be a solution currently available for the problem. If that is the case, then it is time to come up with an alternative that is accessible.

I hope this helps in some way.

Thanks,
Tim