WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A Module for Morphing Standard Elements into Automatically Accessible Drag and Drop Components Using CSS Selectors

for

From: Vincent Young
Date: Oct 4, 2011 10:45AM

Really good stuff here Bryan. Some feedback:

Was thinking about the user experience for keyboard only users primary with
motor impairments and tabbing through to the other side could be a bit of
work. The DHTML style guide (
http://dev.aol.com/dhtml_style_guide#draganddrop) has some ideas about how
to accomplish this... of course ARIA would be involved, but the SHIFT + CTRL
+ M makes sense in your case.

I feel the accessibility community should get together and standardize the
behavior for ARIA/Non-Aria, especially with the ever so common book
drag/drop example you presented.


On Mon, Oct 3, 2011 at 11:17 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> Hi,
> I thought I'd pass this on in case it's of interest. The CSS Drag and Drop
> Module automatically morphs standard DOM elements into automatically
> accessible drag and drop components using CSS Selectors.
>
> I decided not to use ARIA in this case for several reasons. One being
> automatic cross-platform compatibility. Another is dynamic localization, so
> that action keywords and accessible text can be changed on the fly to
> accommodate any language. Lastly, the action words themselves can be changed
> to fit the UI concept of any application. E.G. Drag and Drop, Cut/Copy and
> Paste, Grab and Dunk, Flip and Flop, whatever fits the metaphor... Allowing
> such components to be useful when adding items to a shopping cart, videos to
> a playlist basket, documents to a desktop or shredder, job listings to a
> job-cart, or whatever.
>
> The implementation automatically supports multiple draggable objects and
> multiple drop zones, whatever matches the CSS Selectors.
>
> Live demo: http://whatsock.com/modules/css_drag_drop_module/demo.htm
> Zip download: http://whatsock.com/modules/css_drag_drop_module.zip
>
> Instructions:
> . Activate the "Set Drag&Drop" button to morph all book images into
> draggable AccDC Objects.
> . Using the mouse, drag and drop each book that you would like to read into
> the Reading List section, or visa versa to remove them from the Reading
> List.
> . Using the keyboard, arrow or tab between each draggable book, and press
> the Enter or Spacebar keys to toggle dragging.
> . Tab to the Reading List section, or jump to the Reading List heading
> using screen reader quick navigation commands, then drop each item currently
> being dragged by pressing the Enter or Spacebar key on relevant drop links.
> . Do the same for the books in the Reading List section, then press
> shift+tab to navigate to the drop links at the beginning of the Bookshelf
> section, or use screen reader navigation commands to jump to the Bookshelf
> section heading where the new drop links are located.
> . Alternatively, use the hotkeys associated with each of the Bookshelf and
> Reading List headings to jump between each section.
>
> I set the drop animation duration to 2000ms for the demo, so keyboard users
> will notice a 2 second delay between the time that the drop link is
> activated and when the dragged item appears in the same section. This can be
> set to any value though, such as 0 to instantly apply the drop event
> handler. All drag and drop event handlers are cross-referenced so that
> sighted mouse users trigger the same events as screen reader and keyboard
> only users.
>
> All the best,
> Bryan
>