WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bryan Garaventa
Date: Oct 4, 2011 12:15AM

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