HTML and CSS Reference
In-Depth Information
If you've made it this far undeterred by the warnings and dead
bodies throughout this specifi cation, then hopefully the appli-
cation with drag and drop that you're implementing will come
under the question of accessibility. Is the drag and drop API
accessible, or can I make it accessible?
Well, as you'd expect with this specifi cation, there's a good
intention. So yes, the API has been designed with accessibility
in mind. It's not terribly clear, but latest thinking is that the user
should be able to control dragging and dropping using the key-
board copy and paste model.
The process is supposed to be: Navigate to the element you want
to drag, copy to the clipboard using the keyboard shortcuts, then
navigate to the drop zone, and paste using the keyboard.
As you've probably already guessed, no browser has imple-
mented this (yet).
However, you can prepare your drag and drop demos to include
ARIA support. You will need to set ARIA attributes on
dragstart
to indicate that the element is being dragged. We also need to
now bind to the
dragend
event to remove the ARIA attribute. We
should also use visual cues to indicate to the user what elements
can be dragged and where they can be dropped. I'm not going
to cover this detail, but Gez Lemon wrote a detailed article on
adding ARIA and general accessibility to nonnative drag and drop,
where the practises still apply to native drag and drop:
http://dev.
var drop = document.getElementById('drop'),
boxes = document.getElementsByTagName('div'),
i = boxes.length;
while (i--) {
if (boxes[i].getAttribute('draggable') != undefined) {
boxes[i].ondragstart = function (event) {
event = event || window.event;
this.setAttribute('aria-grabbed', 'true');
// set the drop targets up for ARIA support
drop.tabIndex = 0; // for keyboard support
