Hi Al,
You wrote:
> please refer to
>
> http://www.w3.org/WAI/PF/aria-practices/
>
> Al
I'm cross-posting this to wai-xtech and fluid-work. For those on the
fluid-work list, the above url leads to a set of recommendations for how
to apply ARIA roles and states to various html constructs. Section six,
in particular, deals with drag-and-drop. Last week's DTHML style guide
teleconference had, in part, a discussion of the keyboard based drag and
drop. Al Gilman noted that there were some guidelines in the best
practices document in that regard, and provided the link.
I compared what Fluid does with its Reorderer with the best practice
recommendations, and came to two conclusions: (1) the Reorderer almost
does it "right", and could/should use this guide for future
improvements, and (2) that the best practices describes a simulation of
mouse-based drag-and-drop. Regarding the latter, I'm not convinced that
every context should be handled that way. It's conceivable that some
situations are simple enough that not all of these practices apply.
But, I'm not certain of that, and admit that it is influenced by the
development of Fluid's Reorderer. A functional description of the
Reorderer is: to allow reordering of items within a container.
Drag-and-drop, on the other hand, is a mouse-based user interface for
accomplishing many things: reordering, moving objects between
containers, copying objects, launching applications, and others. So,
while one can use drag-and-drop to accomplish reordering, reordering is
by no means identical with drag-and-drop.
The question is: if the context (e.g., reordering) by itself limits the
functionality, do *all* of the best practices apply?
With that in mind, here is a brief commentary on how the Reorderer as
applied in the Lightbox compares to the drag-and-drop ARIA best practices:
6.1 Step 1: Identify draggable objects
- done: image thumbnails (div's) are marked "grab='supported'"
- all moveable thumbnails are navigable using the keyboard using the
cursor keys.
6.2 Step 2: Allow the user to initiate the appropriate drag operation
using the keyboard
- done: movement of a thumbnail is accomplished via the cursor keys
modified with the control key. When the user moves a thumbnail to a new
location using the keyboard (or mouse), the "grab" attribute of the
to-be-moved item is set to "true".
Comment: since, in this context, users can only *move* an item, the
Reorderer does not support the pop up menu offering a choice among
"copy", "move", and "reference".
6.3 Step 3: Mark the drop targets
- done, I think, but I'm not sure: image thumbnails (div's) are marked
"dropeffect='move'" in the html.
Since the drop targets are the same items as the draggables, this is
accomplished by adding the "dropeffect" attribute to the same <div>'s as
the "grab" attribute.
With respect to the escape key to cancel the drag-and-drop: the
Reorderer does not implement that. That's because the thumbnail is
immediately moved to its new location when using the keyboard. If the
user wishes to move back, they simply move it back using the opposite
arrow key.
However, Fluid's user experience team have recently suggested that the
thumbnail not be moved immediately, but a marker appear that indicates
where the object would move to. Such feedback is closer to what the
mouse-based drag-and-drop does. When the user is satisfied with the new
location, they make a gesture, such as releasing the control key, to
move the thumbnail there. If the keyboard operation of the Reorderer is
modified in this way, it will require another gesture to cancel the move
operation.
6.4 Step 4: Configure your script for AT drag-and-drop operations
- not done, but no AT is driving the keyboard nor mouse-based
drag-and-drop. That is, the mouse-based drag-and-drop provides the
usual feedback showing an avatar moving about the screen, and a marker
to indicate where it can be dropped. The keyboard-based move does not,
but see comments above about future development in that regard.
Nonetheless, the Reorderer does not "...move the mouse..." when operated
using the keyboard. That is, it doesn't attempt to simulate every
aspect of mouse-based drag-and-drop, nor do I think it needs to.
6.5 Step 5 Clean-up after drag/drop
- done: when the user drops the thumbnail using the keyboard, the
"grab" attribute of the draggable is set to "supported".
Aside: Here is a quick link to a concrete demonstration of the
Reorderer in the Fluid Lightbox:
http://build.fluidproject.org/sakai-imagegallery-tool/component-templates/html/Lightbox.html
To quickly reiterate how to use the Lightbox:
- tab into the Lightbox such that an image thumbnail acquire focus.
- move among the thumbnails using the cursor keys.
- move a thumbnail to a new position using control-cursor keys.
- move a thumbnail via mouse-based drag-and-drop.
--
;;;;joseph
'???'
- "Bob", W. A. Yankovic -
http://www.youtube.com/watch?v=RCG2E6AtNfc