From W3C Wiki
< PF‎ | ARIA‎ | BestPractices

Drag and Drop

Drag-and-drop operations are a common feature of Rich Internet Applications (RIAs). Drag-and-drop features have traditionally challenged people with functional disabilities. These problems arise from the difficulty of manipulating the mouse, finding targets capable of receiving the object being dragged, and actually moving the object to the drop target. Screen readers and alternate input systems assist the user to some degree by allowing the user to simulate a click, drag, and release operation. It is then up to the user to find a target that, hopefully, will receive the object being dragged. Additionally, the user may not be aware if the desired drop operation is supported or what source objects can be selected for dragging. The end result can be a very unproductive and frustrating experience.

ARIA introduces two new Drag and Drop properties that enable web application authors to facilitate with the drag and drop process, called grab and dropeffect. The property aaa:Grab is applied to the source(s) being dragged, while aaa:dropeffect is applied to the target. Use of these properties--combined with best practices for enabling the user to select the appropriate drag operation and for assigning appropriate keyboard operations for dragging and dropping--will vastly improve the accessibility of drag and drop functionality. The following steps will guide you through the process.

Step 1: Identify draggable objects

Set the initial grab state of all draggable interface objects. The default state for all objects is assumed to be false, meaning that they are not draggable. For objects that may be dragged, set the grab state to "aaa:supported." Note: it is very important that objects, capable of being dragged, have a determinable role. HTML tags, such as

and , provide no semantics unlike <select>. If you are repurposing the target object, you should apply an ARIA Role to it.

This step clearly marks elements that can be "grabbed" for drag-and-drop operation. Assistive technologies, such as screen readers or alternate input devices, can help the user move focus directly to the grab-supporting objects without having to navigate through all the elements and guess which could be ready to initiate a drag operation. Although not necessary, authors or intermediaries could use CSS to highlight those elements that may be grabbed.

All grabbable objects must be be navigable using the keyboard.

Step 2: Allow the user to initiate the appropriate drag operation using the keyboard

ARIA provides three drag operation types:

  • copy: A duplicate of the source object will be dropped onto the target.
  • move: The source object will be removed from its original location and dropped onto the target.
  • reference: A reference or short cut to the dragged object will be created in the target object.

To select a drag operation, the author must provide a keyboard accessible way of selecting one or more elements for drag. After the last object is selected for drag (if a single one object is used, it may simply be the last object with focus), the author should provide an ARIA-enabled pop-up menu from which the user can choose a supported operations from the list. A suggested way to do this is to use the Cntrl+Shift+F10 key sequence on the grab object. After the user has selected an action from the pop-up menu, the menu should close, with focus returning to the last object selected for grab. If the user does not choose an action and instead presses the Escape key (ESC), the application should dismiss the menu, returning focus to the last object selected for grab and from which the pop-up menu was launched.

Note: In implementations where only single operations are provided, the W3C ARIA Style Guide group is considering defining hot keys to initiate the appropriate drag operation.

All objects being grabbed must have their corresponding "aaa:grab" property set to "true." This will enable ATs to have a reference to the "grabbed" source object(s).

Step 3: Mark the drop targets

Now that you know the drag operation, you must decide which target elements may receive the drop and mark those for the AT. You mark them by setting their "aaa:dropeffect" value to "copy", "move", or "reference." Like grab, drop targets must have a determinable role. CSS can also be used to highlight the targets to show sighted users which objects can receive a drop of the grabbed source(s). Any object without a "aaa:dropeffect" will have an assumed "aaa:dropeffect" value of "none." Any object with a "aaa:dropeffect" value of "none" is ignored by ATs in the drop operation.

Step 4: Configure your script for AT drag-and-drop operations

You must now configure your script to handle mouse movements as if the user had depressed the mouse key and begun a drag. The AT will move the mouse to accepting drop targets based on its own keyboard navigation scheme defined for a drag. Drag operations usually show the source object(S) being moved, such as through the use of a bitmap representation drawn to follow the mouse cursor position, as the user moves the mouse while keeping the mouse button depressed. You need to perform the same operation with the exception that you ignore the mouse key's pressed state. AT will either move the mouse cursor automatically in response to their designated keyboard commands or through user tabbing to targeted elements. At some point, the user will have the mouse cursor over the desired drop target. You should assume that the user's pressing hitting the Enter key will cause the selected drop operation to occur on the drop target. This completes the drop operation.

If at any time during the drag process, the user pressed the Escape key to cancel drag operations, all "aaa:dropeffect" properties should be set to "none", keyboard focus should return to the last grabbed source object, and all "aaa:grab" properties should be set to "supported."

Step 5 Clean-up after drag/drop

Once the drop has occurred, you should clean up the DOM as you would do for any drag/drop operation. You must then set focus to the appropriate DOM element and its role should also be determinable.

Other considerations

Should the author wish to let the user decide which drop operation is chosen at the target, the author may use a single key sequence at the source to activate a grab and then set the drop effects that are possible on the accepting targets:


This allows the AT to surface to the user the drop effects that are available. Once the user navigates to the target, execute the drop. The author must provide the ability for the user to launch an ARIA-enabled pop-up menu to select the appropriate drop operation which is determined upon user selection. At this point, the author must perform the appropriate clean-up operations discussed in Step 5.