Re: current form and baseline of WAI-ARIA best practices

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

Received on Monday, 10 December 2007 15:43:44 UTC