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
drop.removeAttribute('aria-dropeffect');
};
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.
