4

Does anyone know if there are any designs or coding techniques that make drag-and-drop UI features WCAG-compliant in software applications (specifically web apps)?

I noticed that drag-and-drop features are difficult to implement for keyboard-only users, and this is the main reason drag-and-drop features are frowned upon for accessibility purposes (https://www.w3.org/WAI/intro/aria).

I'm just curious if there has been a WCAG-compliant solution for including drag-and-drop functionality. Thanks in advance for the feedback.

Improve this question

3 Answers 3

Reset to default
6

The answer to this question is going to be difficult if I cannot see your design.

Firstly, WCAG explicitly states in 2.1 "Make all functionality available from a keyboard". This will obviously present a number of challenges when it comes to mouse drag and drop.

You can add ARIA attributes to your HTML to add keyboard interaction for drag and drop, but this is not a silver bullet to solve your problem for keyboard use. Only when you fully appreciate all the elements of your drag and drop can you begin to understand how you can support keyboard users.

In their book "Designing Web Interactions", Bill Scott & Theresa Neil identified 15 events for cuing the users during a drag and drop interaction, and each of these will need to consider an accessibility alternative:

  • Page load
  • Mouse Hover
  • Mouse Down
  • Drag Initiated
  • Drag Leaves Original Location
  • Drag Re-enters Original Location
  • Drag Enters Valid Target
  • Drag Exits Valid Target
  • Drag Enters Specific Invalid Target
  • Drag is Over No Specific Target
  • Drag Hovers Over Valid Target
  • Drag Hovers Over Invalid Target
  • Drop Accepted
  • Drop Rejected
  • Drop on Parent Container

Not all of these event will be applicable to your drag and drop design, but hopefully you will now see the challenge that awaits you.Thinking about accessibility will cause you to approach design differently.

This article describes how to use ARIA attributes to make drag and drop work with a keyboard: https://dev.opera.com/articles/accessible-drag-and-drop/ (there is demo on this site so you can see it in action too), however, because there is a lot more to drop and drop, it might be simpler to re-think your design.

For example depending on your design, you can use copy & paste triggers from a menu, or place move buttons on the movable object for keyboard users, while mouse users can continue to use mouse drag and drop.

Improve this answer
5

How to make drag-and-drop interaction accessible depends on what that interaction tries to achieve.

For example, if it is about dragging items from one panel in the screen to another (like moving files in a file manager from directory to another), I would follow the approach from the DHTML Style Guide Working Group. The script in your web application will need to listen for the key presses listed there and adapt the WAI-ARIA states accordingly.

If the goal of the drag-and-drop interaction is to reorder items in a list, the following approach could work: give each item an editable number and allow the keyboard user to reorder the items by editing their numbers. LinkedIn uses this approach to allow users to rearrrange the order of the groups they are in.

If the goal of the drag-and-drop interaction is to rearrange items in a two-dimensional plane, you need to define what the meaning of that (visual) arrangement is and define an alternative interaction that achieves the same goal without relying on vision.

Improve this answer
1

Contrary to popular belief, drag and drop does not have to be accessible.

What?! Blasphemy you say?

Nay. Drag and drop is just a means to an end. It allows you to accomplish some task. However, that task should also be possible using some other action.

Take buttons for example. You normally click on them with a mouse. But we didn't make a button mouse click accessible. There aren't ARIA tags to make a mouse click accessible. We provided another way to perform that action - you can tab to the button and hit space or enter. It's a different paradigm.

Same with drag and drop. You have to look at the task you're trying to accomplish. Are you dragging a widget from a pallet and dropping it on a canvas? Fine. Allow the keyboard user (and thus the screen reader user) a way to get their keyboard focus to the pallet, select a widget and automatically place it on the canvas (such as in the top left corner, or below a stack of other widgets), then allow them to put their focus on the newly placed object (or put the focus on the object by default) so they can use the arrow keys to move the object to where they want it.

Voila. You accomplished the same task as the drag and drop action but with a different action set. Drag and drop doesn't have to be accessible itself.

That doesn't mean you can't make the DND action accessible. Try moving the tabs around in Safari with Voiceover running on an iPad. It's pretty cool. You press and hold to select the tab then can literally drag your finger left and right and you'll hear the tab you're moving before or after before you drop by lifting your finger.

Note that in ARIA 1.1, aria-dropeffect and aria-grabbed are deprecated.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.