Action 291: Drag Drop BPG update

This note constitutes my proposal to complete action item 291. I have 
rewritten section 7 (Drag-and-Drop Support) in the Best Practices Guide (
http://www.w3.org/wai/pf/aria-practices) to accommodate the additional 
aria drop-effect values in the WAI-ARIA specification and the changes to 
the WAI-ARIA keyboard style guide (
http://dev.aol.com/dhtml_style_guide#draganddrop). If possible, please 
provide feedback by Monday's WAI-ARIA call.

Two important observations. 

- Jon, in your examples you use the space bar ((
http://test.cita.uiuc.edu/aria/draganddrop/index.php) ) to execute the 
drop whereas the style guide recommends the use of control+v. Does people 
agree we should use control+v and have Jon switch the example or should 
the space bar be recommended.
- When multiple source objects are being selected should we be using a 
modifier key, with the space bar, to allow the user to select multiple, 
disparate objects? 

7.  Drag-and-Drop Support 

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 aide Web application 
authors with the drag and drop process, called aria-grab and 
aria-dropeffect. The property aria-grab is applied to the source(s) being 
dragged, while aria-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.

   1. Identify draggable objects

      Set the initial aria-grab state of all draggable interface objects. 
Roles that typically support drag and drop operations are listitem and 
treeitem. 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 aria-grab state to "supported". This will allow assistive technologies 
to indicate which object are draggable and potentially facilitate in 
choosing the objects to grab. Note: it is very important that objects, 
capable of being dragged, have a determinable role. HTML tags, such as 
<div> and <span>, provide no semantics unlike <select> and would require 
you to set the WAI-ARIA role attribute.

      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 move the user 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. At this point, drop targets 
cannot be consistently determined as targets capable of receiving a 
draggable object don't yet know if the object you are dragging can be 
received in a drop operation.

All grabbable objects must be be navigable using the keyboard. 

2. Allow the user to initiate the appropriate drag operation using the 
keyboard

      To select a drag operation, the author must provide a keyboard 
accessible way of selecting one or more elements for drag. It is 
recommended that the space bar be used to select an object for drag. It is 
recommended that Control+c be supported to indicate that all objects have 
been selected 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). 
As each object is selected for drag its aria-grab property must be set to 
"true", giving the ATs a references as to what has been grabbed.

Note: Selection of the objects to be moved may differ depending on the 
type of object or objects to be moved. Example. A list of emails that 
might be selected one at a time or many at a time in contiguous or 
non-contiguous locations may be easily selected with the Space key as 
indicated above. However, text in a document might better be selected by 
positioning the cursor at the beginning of a word and holding down the 
control key while using the Arrow keys Left and Right to mark the letters 
you wish to move.  

3. Mark the drop targets 

When it is determined that all source objects have been "grabbed" you must 
indicate which targets may receive the drop by setting the aria-dropeffect 
properties on those targets. This allows an assistive technology to keep 
track of the drop targets so that they can be used to assist the user in 
navigating to drop targets. The aria-dropeffect property supports one or 
more of the following values reflecting what your application will support 
in the case of a drag:

          * 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.
          * execute: A function supported by the drop target is executed, 
using the drag source as an input.
          * popup:      The author must provide a popup menu or dialog to 
allow the user to choose one of the drag operations (copy, move, 
reference) and any other drag functionality, such as drag cancel.
          * none: no drop operation is supported. This is the default for 
all objects.

      Example:

      <div role="treeitem" aria-dropeffect="copy move popup"> 

CSS may 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 an 
aria-dropeffect property set will have an assumed aria-dropeffect value of 
"none." Any object with a aria-dropeffect value of "none" is ignored by 
ATs in the drop operation. 

4. Implement keyboard functionality which assist the user and AT with 
executing the drop

Once all objects have been grabbed the author should provide standard 
keyboard accessible navigation (such as through tabbing) to enable the 
user to navigate to the desired drop target. To achieve this you may 
optionally support Shift+F10 to brings up a Dialog (Modal) window with a 
select list of possible drop points from which the user may choose. 
Otherwise, you must provide a keyboard accessible way (through tabbing and 
arrowing) to allow the user to navigate to the drop target. The user's 
point of regard should be clearly visible during this navigation. 

Once the user arrives at the drop target the author should provide a 
keyboard accessible way to drop the selected object(s) on the drop target. 
Control+V should be used to provide the mose intuitive type of drop, 
either copy, move, or a shortcut. In the case of their being only one drop 
operation Control+V should be used to drop the selected object(s) on the 
target. 

When additional drop operations are supported by the drop target the 
author should provide an ARIA-enabled pop-up menu from which the user can 
choose a supported operations from the list. A recommended way to do this 
is to use the Shift+Control+v key sequence on the drop target. 
Furthermore, the aria-dropeffect property should include a value of 
"popup" in the list of values to indicate that a keyboard accessible menu 
is provided. After the user has selected an action from the pop-up menu, 
the menu must 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 must dismiss the menu, returning focus to the 
last object selected for grab.

5. Cancelling a drag operation

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


6. 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 must also be determinable.

Note: It is recommended that other methods of performing the drag and drop 
operation may be the best way to meet the accessibility requirements. As 
an example, when moving a mail message from the inbox to another folder, a 
list of those folders could be presented in a select list as an 
alternative to a Drag and Drop.

7. Documentation of non-recommended keyboard navigation

If the author must use alternatives to the recommended keyboard 
navigation, provided here, it should be documented on the page.


Rich Schwerdtfeger
Distinguished Engineer, SWG Accessibility Architect/Strategist
blog: http://www.ibm.com/developerworks/blogs/page/schwer