HTML and CSS Reference
In-Depth Information
drop.setAttribute('aria-dropeffect', 'copy');
// then do something fancy with dataTranfer.setData
boxes[i].ondragend = function () {
this.setAttribute('aria-grabbed', 'false');
// reset the drop targets
drop.tabIndex = -1; // for keyboard supportZ
boxes[i].tabIndex = 0; // for keyboard support
boxes[i].setAttribute('aria-grabbed', 'false');
In the previous code, you're searching for the divs that have the
draggable attribute. Then you add the ARIA support starting in
the dragstart event. Once the element begins to drag, you set
the aria-grabbed attribute to true , so that an assistive device
can feedback. You're also now making the drop zone an ele-
ment that can accept keyboard focus using tabIndex = 0 and
fi n a fi fi y y o u ' r e s a y fi n g t h e d r o p e fi e c t s h o u fi d b e ' c o p y ' . Y o u c o u fi d
mirror the allowedEffect and dropEffect in the native drag and
drop, but for now you'll remain focused on the ARIA support.
Next, you add the new dragend event handler, and once the
element is no longer being dragged, you remove the aria-
grabbed attribute and reset the drop zone attributes, i.e. no
tabIndex and no dropEffect . Lastly, you initialise the draggable
element, by setting the tabIndex and the grab fl ag.
With this completed code, your users can move around your
application and its drag and drop components and their screen-
readers (if they support ARIA) will feed back the current state of
the operation.
However—and this is a big however—since no browser has
implemented the keyboard support for drag and drop, you will
most likely have to consider rolling your own drag and drop
using JavaScript to handle everything (instead of relying on the
native drag and drop functionality)—a rather sad ending to what
is a particularly common operation on the web.
Search WWH ::

Custom Search