HTML5 Drag and Drop Model

Hi,

I've gone through HTML5's drag and drop mechanism and have outlined
some accessibility issues. This topic will be discussed in an upcoming
Thursday teleconference, so comments and suggestions are very welcome.

WAI-ARIA defines an aria-grabbed state (values true or false) to
determine if an element has been selected to take part in a drag and
drop operation. If aria-grabbed is not provided, the element cannot
take part in a drag and drop operation. HTML5 defines a draggable
attribute to determine whether an element may take part in a drag and
drop operation. The attribute defines the values true, false, or auto
(browser's default). The draggable property does not determine whether
the element is currently selected for the drag and drop operation, but
does determine if the element can take place in a drag and drop
operation.

Recommendation:

Either define a native grabbed state with values true or false, or use
the aria-grabbed property:

<li draggable="true"
   aria-grabbed="true">


WAI-ARIA defines an aria-dropeffect property with the following values:

* copy
* move
* link
* execute
* popup
* none


HTML5 defines a dropEffect attribute for the DataTransfer object with
the following values:

* none
* copy
* link
* move

The execute and popup values are not defined in HTML5.

Recommendation:

Add execute and popup to the list of attribute values support by the
dropEffect attribute.


Ensure an Accessible Workflow

This is the most problematic area for HTML5's drag and drop mechanism.
WAI-ARIA defines a workflow for drag and drop [1] in the Authoring
Practices document. The recommendation is made up of seven key points:

1: Identify draggable objects

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

3: Mark the drop targets

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

5: Cancelling a drag operation

6: Clean-up after drag/drop

7: Document non-recommended keyboard navigation


The DataTransfer object is a property of an event, so there is no way
of creating the object without raising an appropriate event (for
example, dragenter, dragover - events that are required in the HTML5
drag and drop procedure). As far as I could determine, these events
can only be raised by physically moving the source over a target using
a pointing device. It is possible to identify draggable objects in
HTML5 and initiate the drag and drop operation using the keyboard, but
it's not possible to complete the operation using the keyboard alone.

Some people have suggested that drag and drop operations can be
completed using the Copy and Paste API. This needs more research, but
the user would still need to know which items were copyable, and what
the effect would be of pasting the source in the target.

I can't find any mention of a copy and paste API in the HTML5
specification, but it must have been included at one point, as I've
found several references to the URL:
http://dev.w3.org/html5/spec/Overview.html#copy-and-paste, but that
section doesn't appear to exist now.

If copy and paste is able to adequately define what can be achieved
using drag and drop, then it could be recommended that HTML5 defines a
copy and paste API in their current work. Otherwise, the
recommendation should be that the drag and drop API is amended to
allow the workflow suggested for drag and drop [1] in the WAI-ARIA
Authoring Practices document.

[1] http://www.w3.org/WAI/PF/aria-practices/#dragdrop

Regards,

Gez



-- 
_____________________________
Supplement your vitamins
http://juicystudio.com
http://twitter.com/gezlemon

Received on Wednesday, 26 May 2010 17:43:29 UTC