W3C home > Mailing lists > Public > public-pfwg@w3.org > March 2014

Re: Regarding ARIA drag and drop?

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
Date: Fri, 14 Mar 2014 10:56:04 -0700
Message-ID: <6C87A18484814297BC592E4314D91B9B@WAMPAS>
To: "Joseph Scheuhammer" <clown@alum.mit.edu>, "James Craig" <jcraig@apple.com>
Cc: "public-pfwg" <public-pfwg@w3.org>
Thanks, I've had a chance to test out this as well, and it seems to share 
the same issues that all of the others have that I've been checking out.

The biggest problem from a screen reader perspective, is that there is no 
textual equivalent to convey the actions needed for interaction, and the 
modes needed to do so such as Applications Mode aren't activated unless 
forcibly done by the user, after which the focused element is still not 
reliably conveyed. E.G arrowing to a draggable item and pressing Enter in 
JAWS does nothing, nor does tabbing into and out of the focusable element, 
since the mode remains within Virtual Cursor mode. Similar issues occur for 
NVDA. For VoiceOver on iOS touch screen devices, the draggable and droppable 
regions are not conveyed at all, making it impossible to determine what is 
draggable and where these elements should go.

Basically, I need to find a reliable method for implementing drag and drop 
that is accessible for as many people as possible, which I believe I have 
done so at
Which covers all of the following criteria:

1. Keyboard accessibility for sighted keyboard only users.
2. Keyboard accessibility for screen reader users in both Applications Mode 
and in Virtual Buffer Mode.
3. Standard drag and drop for sighted mouse and touch screen device users.
4. Accessible drag and drop for blind touch screen device users.

The method covers variable draggable regions that can contain any type of 
content, text, images, etc, and uses offscreen positioned drag links that 
are dynamically generated for each region. Similarly, offscreen drop links 
are dynamically generated when a region is toggled for dragging, and 
associated with the drop target on the page.
The aria-grabbed and aria-dropeffect attributes are dynamically updated 
according to the drag state and drop zones.
Whenever an offscreen drag or drop link receives focus, it will appear 
visually as an overlay for sighted keyboard only users, then disappear when 
focus moves away. Sighted mouse users should never see the drag/drop link 
overlay since it's sized to 1px and layered beneath the visible page. The 
offscreen method ensures accessibility for screen readers that support 
Virtual Buffer navigation.

Tested successfully using IE, FF, Chrome, and Safari, with JAWS, NVDA, 
Window Eyes, and VoiceOver on iOS.
I don't have access to Orca, but it should work there as well, if somebody 
could give it a try to confirm I'd appreciate it.

Since VoiceOver on iOS doesn't actually convey which region is draggable or 
droppable via the ARIA attributes, it is impossible for a VO user to move 
around and locate where the drop zones are located.

The following method can be used to interact with the draggable regions 
1. Move your fingers like you are turning a knob to move the rotor until 
'links' is selected.
2. Swipe up and down with one finger to switch between each drag link.
3. Double tap to toggle draggability for the link.
4. Swipe down through the links until you locate the related drop link.
5. Double tap to initiate the drag and drop action.

I haven't been able to find any more of a reliable method for performing a 
drag and drop action than this that covers all of the bases. Please let me 
know if others exist that may fit the bill.
Also, if you notice any bugs, please let me know, and I'll fix them as soon 
as possible.


----- Original Message ----- 
From: "Joseph Scheuhammer" <clown@alum.mit.edu>
To: "James Craig" <jcraig@apple.com>
Cc: "Bryan Garaventa" <bryan.garaventa@ssbbartgroup.com>; "public-pfwg" 
Sent: Thursday, March 13, 2014 6:33 AM
Subject: Re: Regarding ARIA drag and drop?

> On 2014-03-12 4:52 PM, James Craig wrote:
>> Please donít use that example. It uses an invalid ARIA grid with no rows.
> Okay, try this one.  It's a list instead of a grid:
> http://fluidproject.org/releases/1.4/demos/reorderer/listReorderer/html/listReorderer.html
> -- 
> ;;;;joseph.
> 'A: After all, it isn't rocket science.'
> 'K: Right. It's merely computer science.'
>              - J. D. Klaun -
Received on Friday, 14 March 2014 17:56:29 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 16:45:01 UTC