Re: ACTION-291: Drag and Drop BPG update, again.

Hi Joseph,

Thank you. I have made a slight change to indicate that selection selection
would move focus to that
drop target:

To achieve this you may
optionally support Shift+F10 to invoke a single select list of possible
drop targets from which the user may choose a single drop target which
when selected would move focus to that drop target.

We will make the change to the BPG. I am posting this to the PF Editors
list.

Rich

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


                                                                           
             Joseph                                                        
             Scheuhammer                                                   
             <clown@utoronto.c                                          To 
             a>                        W3C WAI-PFWG <w3c-wai-pf@w3.org>,   
                                       "wai-xtech@w3.org"                  
             12/19/2008 10:16          <wai-xtech@w3.org>                  
             AM                                                         cc 
                                       Richard                             
                                       Schwerdtfeger/Austin/IBM@IBMUS      
                                                                   Subject 
                                       ACTION-291:  Drag and Drop BPG      
                                       update, again.                      
                                                                           
                                                                           
                                                                           
                                                                           
                                                                           
                                                                           




Rich et al,

Regarding the BPG drag-and-drop update, there has been a minor
modification to the style guide since my last modifications.  I've made
the associated changes to the update and included it at the end of this
post.

The change was to drop specific reference to a modal dialog when the
user presses Shift+f10 to acquire a list of drop targets.  Instead, the
guide leaves it to the implementor as to the means of presenting the
list.  For example, it could be a context menu.  Specifically, the
changes are:

<old>
Optionally brings up a Dialog (Modal) window with a select list of
possible drop targets.  The user can navigate the list to choose a drop
target to complete the operation.
</old>

<new>
Optionally brings up select list of possible drop targets.  The user can
navigate the list to choose a drop target to complete the operation.
</new>

The complete text for drag-and-drop is:
http://dev.aol.com/dhtml_style_guide#draganddrop

With that in mind, here is the latest version of the BPG:

=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 noncontiguous 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 noncontiguous 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 single select list of possible
drop targets from which the user may choose a single drop target which
when selected would move focus to that 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 -