RE: Drag and Drop with Drupal 8

Hi,
My apologies for joining this thread late, but I recently published an article that outlines many of the issues regarding drag and drop here
https://www.linkedin.com/pulse/important-considerations-regarding-accessible-drag-drop-garaventa/


Personally I’m not a fan of the cut/copy/paste method because it is not scalable across all devices, such as the necessity for having one implementation that works equally across desktop and mobile via touch.



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
Bryan.Garaventa@LevelAccess.com
415.624.2709 (o)
www.LevelAccess.com

From: Matt King [mailto:a11ythinker@gmail.com]
Sent: Monday, November 06, 2017 11:12 PM
To: 'Sean Murphy (seanmmur)' <seanmmur@cisco.com>; 'Mark Weiler' <mweiler@alumni.sfu.ca>; 'Jennifer Sutton' <jsuttondc@gmail.com>; 'Mike Gifford' <mike@openconcept.ca>; 'w3c WAI List' <w3c-wai-ig@w3.org>
Subject: RE: Drag and Drop with Drupal 8

I like cut/paste paradigm for a lot of things, especially in lists like in MacOS Finder or Windows Explorer.

However, I have found moving blocks or cards around with arrow keys pretty efficient. One reason why it works so well is you only have one action for ending the process and are able to have the landing position be at the very start or very end of the positional grid. With the paste paradigm, there is always the issue of moving something to the first or last position, depending on whether you have paste drop after or before the currently focused item. And, there is always a bit of learning that goes along with where paste will drop it. IOS addressed this by having multiple actions for ending the move, which adds a little complexity but is much better for a touch interface.

If using arrow keys with a live region where the live region tells you the current position, you always know where it will land and can land it in any position with a single landing command.

BTW, hats off to GitHub for responding to my request to make GitHub projects keyboard accessible. you can now rearrange cards in a GitHub project this way. It is not yet as screen reader friendly as I would like it. But, they got a lot of it right.

Matt
From: Sean Murphy (seanmmur) [mailto:seanmmur@cisco.com]
Sent: Monday, November 6, 2017 8:44 PM
To: Mark Weiler <mweiler@alumni.sfu.ca<mailto:mweiler@alumni.sfu.ca>>; Jennifer Sutton <jsuttondc@gmail.com<mailto:jsuttondc@gmail.com>>; Mike Gifford <mike@openconcept.ca<mailto:mike@openconcept.ca>>; w3c WAI List <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: RE: Drag and Drop with Drupal 8

I would have thought this is a  1.3.1, 2.1.1, 4.1.2 (posibley), also possible the SC related to errors and information. ARIa 1.0 had information on drag and drop. ARIA 1.1 dropped this requirement.

I have seen some impleamentation of drag and drop. None of them work  with a screen reader. Some of the times I have seen it, I didn’t think it was required. The best pattern I can think of is:

Using the cut, copy and paste keyboard commands built into the OS. There are challenges around this as you do not want to override the ability of cut/copy/paste when a web page is selected. If the shortcut keys can be isolated to the elements, then this would work.

Using the spacebar to select the item to be copied. When the focus is on the area where the content is meant to be pasted. Pressing spacebar again.

I prefer the first option as it is more natural for a keyboard user.

[https://www.cisco.com/c/dam/m/en_us/signaturetool/images/banners/standard/08_standard_graphic.png]




Sean Murphy
ENGINEER.CUSTOMER SUPPORT
seanmmur@cisco.com<mailto:seanmmur@cisco.com>
Tel: +61 2 8446 7751










Cisco Systems, Inc.
The Forum 201 Pacific Highway
ST LEONARDS
2065
Australia
cisco.com



[http://www.cisco.com/assets/swa/img/thinkbeforeyouprint.gif]

Think before you print.

This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.
Please click here<http://www.cisco.com/c/en/us/about/legal/terms-sale-software-license-agreement/company-registration-information.html> for Company Registration Information.







From: Mark Weiler [mailto:mweiler@alumni.sfu.ca]
Sent: Tuesday, 7 November 2017 12:33 PM
To: Jennifer Sutton <jsuttondc@gmail.com<mailto:jsuttondc@gmail.com>>; Mike Gifford <mike@openconcept.ca<mailto:mike@openconcept.ca>>; w3c WAI List <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: Re: Drag and Drop with Drupal 8

Is there clarity on what WCAG 2.0 success criteria a drag and drop component should meet (e.g., 1.1.1,  2.1.1, 2.1.2, 1.3.1, 1.3.2, 2.4.3, 3.3.2)?

On Monday, November 6, 2017 3:42 PM, Jennifer Sutton <jsuttondc@gmail.com<mailto:jsuttondc@gmail.com>> wrote:

Greetings, WAI and Mike:

This kind of Drag and Drop functionality is needed, more and more, and even if/when it's done right, I think it's so rarely done that I'm not sure screen reader users (only, here) will actually have seen it often enough to understand how to do it.

In Mike's issue, here, for easy reference:
    https://www.drupal.org/node/2920006


there's discussion of using ARIA grid. Again, grids are rare, and often not done right, so I'm not sure whether that would be necessary for drag and drop; it might be "over-ARIA-fication."
I'll add a few more links, below, but suffice it to say, in my mind, WordPress *may* also come to need this functionality, such as, perhaps, via the new Gutenberg editor. So, it would be great if folks could collaborate/learn from one another.
To that end, I'm bcc-ing some WordPress folks who, as far as I know, aren't on the WAI list. And I'm including some others who may have an interest/additional contributions.

To my way of thinking, user testing with a range of users will be essential to getting this right, but the CMSs are in an excellent position to serve as training grounds for end users + promote tested approaches.

There are several more links, below, perhaps for addition to Mike's Drupal issue. And good luck to all.
Best,
Jennifer

A discussion of four possible patterns -- post via SalesForce:
https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09


This, from Shopify, which has been begun, but wasn't finished, last I looked at it:
https://shopify.github.io/draggable/


This SitePoint article by James Edwards that came out a while ago, but likely has concepts worth considering:
http://www.sitepoint.com/accessible-drag-drop/


And finally, this, related to Drag and Drop and React, which may not have much to do with accessibility, but does seem to have some useful usability concepts:
https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b



On 11/5/2017 11:52 AM, Mike Gifford wrote:
We’ve built a bunch of great accessibility solutions in Drupal 8 Core, but we haven’t modernized our Drag/Drop solution significantly. Because of some great innovations with a Layout Builder, we’re having to work on a 2D solution to this problem.

We’ve got links to some terrific ideas here, but it seems that there isn’t a good best practice out there that works for grids or other complex spatial organization.
    https://www.drupal.org/node/2920006


We’re looking for examples of what we might have missed here.  Also, if there are folks interested in working on a common GPL solution to this, that would be amazing.

MIke
--
Mike Gifford, President, OpenConcept Consulting Inc.
Drupal 8 Core Accessibility Maintainer - https://drupal.org/user/27930

Twitter: @mgifford @openconcept_ca

Open source web development for social change - http://openconcept.ca<http://openconcept.ca/>
Drupal Association Member | Acquia Partner | Certified B Corporation

Received on Friday, 1 December 2017 02:11:46 UTC