Jaws 11 ARIA Drag & Drop Support

31 August 2009

Code things

Jaws 11 public beta introduces support for drag and drop with WAI ARIA. Although Jaws has included desktop drag and drop capability for some while, the same functionality on a web page has always been more difficult. Jaws 11 now indicates which elements on the page can be dragged, and where they can be dropped.

ARIA Properties

Jaws 11 makes use of two ARIA properties intended to facilitate accessible drag and drop:

Aria-grabbed Property

The aria-grabbed property indicates whether an element has been selected or not. If an element has been grabbed, it can be dragged and dropped elsewhere on the page. If an element does not have the aria-grabbed attribute, it cannot be selected at all.

Aria-dropeffect Property

The aria-dropeffect property describes what happens when the grabbed element is dropped onto a target. Amongst other things, an element can be copied or moved onto a target. More than one drop effect can be defined for a given element.

Jaws Technique

Freedom Scientific include the following information in the Jaws 11 public beta announcement:

"The CTRL+EQUAL SIGN keystroke opens the ARIA Drag and Drop dialog box. It shows a list of droppable objects, as tagged by the author, on the current Web page. When you select one of these objects, JAWS will move focus to that object. If no droppable objects are available, JAWS will announce the message, “No droppable elements were found on the page” instead of opening the dialog box."

Test Cases

Jaws 11 public beta ARIA drag and drop support can be tested in either Internet Explorer 8 or Firefox 3.x.

Gez Lemon's Drag & Drop Example

With thanks to Gez Lemon.