Re: Dragging examples

I've received permission to share this temporary demo link - to be used
towards discussion --- https://ml-savi.s3.amazonaws.com/dnd_demo/index.html

Let me know if this helps at all?

On Wed, Jan 15, 2020 at 1:47 PM Detlev Fischer <detlev.fischer@testkreis.de>
wrote:

> Hi Jerry,
> Both - even if called guidelines, WCAG is a standard (at least the basis
> of standards like EN 301 549 and numerous national directives).
> Any input from your team would be very welcome!
> Best, Detlev
>
> Sent from phone
>
> Am 15.01.2020 um 19:33 schrieb Jerry Lee <jerry.lee@macmillan.com>:
>
> 
> Hi Detlev,
>
> I'm currently part of a team working on drag and drop material for our
> company. Is this discussion towards WCAG or A11y standards?
>
>
> On Tue, Jan 14, 2020 at 10:18 AM Detlev Fischer <
> detlev.fischer@testkreis.de> wrote:
>
>> Looking for implementation examples I offer a small collection of links
>> unfortunately only number 4 seems to offer a single pointer activation
>> alternative. Will continue searching. Have not yet written to other
>> lists (or webaim list).
>>
>> CALL FOR HELP: Anyone coming across implementations of dragging (such as
>> drag and drop, list reordering) that offer operation via single pointer
>> activation on top of keyboard operability, please contact me!
>>
>> ------
>>
>> 1. Key resource: Keyboard-accessible drag-n-drop pattern, Jesse Hausler
>> (Salesforce)
>>
>> https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
>> Github repo:
>> https://salesforce-ux.github.io/dnd-a11y-patterns/#/?_k=znv9pu
>> Focus is on keyboard operability (incl. with Screenreader on), no single
>> pointer activation
>>
>> 2. Harris Schneiderman, Smashing magazine: Enter The Dragon (Drop):
>> Accessible List Reordering
>>
>> https://www.smashingmagazine.com/2018/01/dragon-drop-accessible-list-reordering/
>> Demo: https://schne324.github.io/dragon-drop/demo/
>> Focus is on keyboard operability (incl. with Screenreader on), no single
>> pointer activation
>>
>> 3. Brian Garaventa, Accessible Drag and Drop – Why Foolproof Scripting
>> Is Critical When Using ARIA
>>
>> https://www.levelaccess.com/accessible-drag-and-drop-why-foolproof-scripting-is-critical-when-using-aria/
>> Focus is on keyboard operability (with Screenreader on)
>> Links to examples currently fail
>>
>> 4. Barry Smith, Codepen of Drag and drop with number input for vertical
>> resorting of list items
>> https://codepen.io/barrytsmith/pen/kfiqj
>> A bit awkward but this would presumably meet a Dragging SC - number
>> input can be focused by single pointer touch, number added via virtual
>> keyboard via single pointer touch, new position saved by pressing "Update"
>>
>> 5. iOS11: ForScore offers a setting that offers alternatives but these
>> still seems to involve dragging (have not investigated this more closely)
>> https://forscore.co/accessibility-drag-and-drop/
>>
>> 6. Syncfusion jQuery Kanban Board
>>
>> https://js.syncfusion.com/demos/web/?_ga=2.242398018.1975078109.1579014604-190772274.1579014604#!/bootstrap/kanban/workflow
>> Looks like no keyboard operability, no single point activation
>>
>> 7. React-beautiful (drag-n-drop)
>>
>> https://egghead.io/lessons/react-course-introduction-beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd
>> Video intro promises operability with "only a keyboard or a screen
>> reader" (haven't verified that)
>>
>>
>> --
>> Detlev Fischer
>> Testkreis
>> Werderstr. 34, 20144 Hamburg
>>
>> Mobil +49 (0)157 57 57 57 45
>>
>> http://www.testkreis.de
>> Beratung, Tests und Schulungen für barrierefreie Websites
>>
>>
>>
>
> --
>
> *Jerry Lee* | SAVI Web Developer | T 917.710.6072
> Pronouns | (He/Him/His)
> [image: Achieve More. Macmillan Learning.] [image: Certified
> Accessibility Specialist. T. X. D. L. A.]
>
> Visit our Student Store <https://store.macmillanlearning.com/>! Questions
> about using our digital products? Find answers in our new Support
> Community
> <https://community.macmillan.com/community/digital-product-support>!
>
>

-- 

*Jerry Lee* | SAVI Web Developer | T 917.710.6072
Pronouns | (He/Him/His)
[image: Achieve More. Macmillan Learning.] [image: Certified Accessibility
Specialist. T. X. D. L. A.]

Visit our Student Store <https://store.macmillanlearning.com/>! Questions
about using our digital products? Find answers in our new Support Community
<https://community.macmillan.com/community/digital-product-support>!