ACTION-291: Drag and Drop BPG update

Rich (et al),

The DHTML Style Guide group discussed drag and drop at last Tue's 
meeting (Dec 9).  The discussion included Oliver Keim's comments, Colin 
Clark's post to the wai xtech list, and concerns about using 
control+c/control+v.  The result was some changes to the style guide.  
The relevant section is:
http://dev.aol.com/dhtml_style_guide#draganddrop

The main points are:

1. After defining the set of draggable objects, there is a need to tell 
the system that the user is ready to start dragging since the 
computation to locate drop targets may be expensive.  For example, if 
there are 1000 drop targets, you only want to calculate that once.  
Thus, a keystroke is needed at the end of the selection phase.

2. It is preferable to avoid using keystrokes that are associated with 
"copy" and "paste".

The outcome is to use "control+m" for both the "pick up" and "drop" 
phases.  Think: "start Move" and "end Move".

With this in mind, I've re-edited Rich's BPG update for drag and drop to 
coincide with the latest style guide recommendations.

=BEGIN=

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(s) 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(s). 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, qualified 
drop targets cannot be determined as they are determined based on the 
objects being dragged - which have not yet been selected.

All grabbable objects must be be navigable using the keyboard.

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

The author must provide a keyboard accessible way of selecting one or 
more elements to drag. It is recommended that the space bar be used for 
selection.  It is further recommended that shift+space be used to select 
multiple objects and define a contiguous set; and that control+space be 
used to define a discontiguous set.  As each object is selected, its 
aria-grab property must be set to "true", giving the ATs references as 
to what has been grabbed.  It is recommended that control+m be supported 
to indicate that all objects have been selected for drag.

Note: Selection of the objects to be dragged may differ depending on 
their type. 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 them 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-and-drop operation:

* 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 invoke a Dialog (Modal) window with a 
single select list of possible drop targets from which the user may 
choose a single drop target. 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) onto the target. 
Control+m should be used to provide the most intuitive type of drop, 
either copy, move, or a shortcut. In the case of their being only one 
drop operation control+m should be used to drop the selected object(s) 
onto 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 supported operations from the list. A recommended way to 
invoke this menu is to use the shift+control+m key sequence when focus 
is 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 drop target. 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 drop target.

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 property 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-and-drop operation. This should include:
- Setting all aria-dropeffect properties to "none" or remove them 
altogether.
- Setting all aria-grab properties of draggable objects to "supported".
- Setting focus on the appropriate DOM element and its role must also be 
determinable.

Note: It is recommended that other methods of performing the same 
operation as drag-and-drop 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.

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.

=END=

-- 
;;;;joseph

'This is not war -- this is pest control!'
      - "Doomsday", Dalek Leader -

Received on Thursday, 11 December 2008 21:19:42 UTC