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: Bryan Garaventa
Date: Oct 4, 2011 11:12AM

Excellent thanks, I'll check it out :)

----- Original Message -----
From: "Vincent Young" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Tuesday, October 04, 2011 9:36 AM
Subject: Re: [WebAIM] A Module for Morphing Standard Elements into
Automatically Accessible Drag and Drop Components Using CSS Selectors


> 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
>>