Dragging examples

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

Received on Tuesday, 14 January 2020 16:17:57 UTC