aria-dropeffect to accomplish the task.
The Development Process
1. The developer must identify the draggable objects by setting the
aria-grabbed to either true or false. Setting it to true indicates the object is grabbed. Setting it to false indicates it is draggable. Setting it to “” or “undefined” indicates it is not grabbable. Roles that support drag and drop are
treeitem. The object must have a role declared for ARIA to work.
2. The developer must provide a way to select the draggable objects with the keyboard by setting the object’s
3. The developer must indicate the objects that can be drop targets using the
aria-dropeffect. There are a number of properties that can be used to set
- copy: A copy of the source object will be dropped on the target.
- move: The source object will be moved to the new location and removed from the orginial location.
- link: A shortcut link will be created.
- execute: the source is executed when it is dropped on the target.
- popup: Uses a popup menu that will let the user choose one of the other operations.
- none: No drop operation is supported. This is the default.
4. The developer is required to implement his/her own keyboard handlers to accomplish the dropping of the object. It is recommended that you follow the guidelines set out by the ARIA DHTML Styleguide. As an example, Control + M is used to drop once focus is on a droppable object. And ESC is used to cancle the operations.
5. After the operation the developer must:
- Set all
aria-dropeffectproperties to “none” or remove them altogether.
- Set all
aria-grabbedof draggable objects to “false”.
- Set all objects that are not grabbable must either omit the
aria-grabbedproperty or have an
aria-grabbedproperty set to “undefined”.
- Set focus on the appropriate DOM element, and its role must also be determinable.
Note: The developer may want to consider adding a CSS style for the sighted keyboard only user to indicate visually what is draggable and where the drop points are located.
As an example, if the task at hand envolves moving a picture to a album folder, you may want to provide a list of the pictures with check boxes that can be used to select all the images you wish to move. And then provide a drop down select list of the possible destination folders. This can be much easier in the long run.
Example 1: Creating a Draggable Object
Picture 1Picture 2Picture 3Picture 4
Example 2: Creating a Drop Spot
Album 1Album 2
Example 3: Alternative
Picture 1 Picture 2 Albums:
- WAI ARIA Drag-and-Drop
- DHTML Style Guide: Recommended keyboard shortcuts for drag and drop.
- WCAG 2.0 SC 2.1.1: All functionality of the content is operable through a keyboard interface.
WCAG 2.0 General Techniaque G202:Ensuring keyboard control for all functionality.
- Accessible drag and drop using WAI-ARIA