Major Patterns for Accessible Drag and Drop

1. Jesse Hausler, Principal Accessibility Specialist
Cordelia McGee-Tubb, Lead Accessibility Specialist
Major Patterns for
Accessible Drag and Drop

2. Forward-Looking Statement
Statement under the Private Securities Litigation Reform Act of 1995
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if
any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the
forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections
of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of
management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments
and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our
service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of
growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and
any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain,
and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling
non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the
financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form
10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the
Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may
not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently
available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

4. Accessibility as Equality
A Note on Workarounds

5. Providing an accessible alternative to drag and drop
Is it acceptable if the accessible alternative is...
● A field inside a modal that is launched from a
menu, located in the column header?
● A field inside a modal that is launched from a
general settings menu for the entire table?
● On a separate table settings page?
Example: Resizing a table column’s width

6. Providing an accessible alternative to drag and drop
● Don’t take user further away from the action
● Don’t make them work harder for the same result
● The draggable component itself can be accessible
Ultimately, your users will tell you.
Ask and listen to them.
Example: Resizing a table column’s width

7. Know Your Users

8. Verbosity
Interaction Details
Language
Granularity
Methods for Describing Drag and Drop to Users

9. Native HTML ARIA Patterns Live Region Text
Programatically Describing Interactions

10. Four Major Patterns for Drag & Drop
Resize an object in 1-Dimension
Move an item from one list to another
Sort a list
Interact with objects on a canvas

11. Resize an Object in 1-Dimension
User’s interactions
● Increase
● Decrease
Engineer’s tasks
● Set minimum
● Set maximum
● Set default
● Set step

12. Resize an Object in 1-Dimension

13. Resize an Object in 1-Dimension
<th scope="col">
<span>Name</span>
<input type="range" value="100"
step="10" min="60" max="600"
aria-label="Width of Name Column"
class="visually-hidden"
onChange="handleWidthChange(event)"
/>
<span class="resizable-handle">
// mouse drag and drop work goes here
</span>
</th>
HTML

14. Resize an Object in 1-Dimension
handleWidthChange(event) {
const rangeSlider = event.target;
const newWidth = rangeSlider.value + "px";
const columnHeader = rangeSlider.closest("th");
columnHeader.setStyle(newWidth);
}
JavaScript

15. Resize an Object in 1-Dimension
Keyboard Interaction Model
● Tab to the slider
● Left arrow to decrease size
● Right arrow to increase size
Screen Reader Audio
Determined by AT + browser

16. Resize an Object in 1-Dimension

17. Move an object from one list to another
Moving items between list
● Order doesn’t matter
● Other items in the list don’t matter
● Selecting where to send a given item
What is a common pattern for choosing
one item from a list of many?

18. Move an object from one list to another
Menu
an existing ARIA design pattern

19. Move an object from one list to another
Keyboard Interaction Model
● Tab to the menu trigger
● Enter, space, or arrows to open
● Arrow to desired menu item
● Enter to select and close
ARIA Menu
Describes the interaction model

20. Move an object from one list to another
After Move
● Focus remains on the menu
trigger, but inside the new list
● Identifies the final state

21. Move an object from one list to another

22. Sort a List
Rank your favorite desserts!
Unlike moving items between
lists, order does matter.

23. Sort a List
ARIA Listbox
Describes the navigation model
Hidden Live Region
Provides status updates and
in-context operation details

24. Sort a List
Basic ARIA Listbox
● Tab into listbox
● Up and Down arrow to change selection
Custom Interactions
● Spacebar to Grab and Drop
● Up and Down arrow to move an item
● ESC cancel drag operation
Keyboard Interaction Model

25. Sort a List
<ol role="listbox" aria-label="Desserts" aria-describedby="instructions">
<li role="option" draggable="true" tabindex="0" aria-selected="true">
Ice Cream
</li>
<li role="option" draggable="true" tabindex="-1">
Pie
</li>
<li role="option" draggable="true" tabindex="-1">
Cake
</li>
...
</ol>
Listbox Markup
<span id="instructions">Press space bar to grab the selected item.</span>

26. Sort a List
.visually-hidden {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
updateLiveText(announcement) {
liveRegion.innerHTML = announcement;
}
Hidden Live Region
<span aria-live="assertive" class="visually-hidden"></span>

27. Sort a List
Step 1: Tab into the Listbox
Keyboard Interaction Model

28. Sort a List
Step 2: Down arrow to Cake
Keyboard Interaction Model

29. Sort a List
Step 3: Press spacebar to grab Cake
Keyboard Interaction Model

30. Sort a List
Step 4: Move Cake down one item in list
Keyboard Interaction Model

31. Sort a List
Step 5: Drop Cake in position 4
Keyboard Interaction Model

32. Sort a List
Alternative Path: Press Esc, Cancel move
Keyboard Interaction Model

33. Sort a List

34. Interacting with an Object on a Canvas
Behold, a canvas
● 2 dimensions
● Fixed number of “cells"
Choose a reference cell
● Top left cell as [1,1]

35. Interacting with an Object on a Canvas
Behold, an object on a canvas
● 2 dimensions
● 6 cells wide, 6 cells tall
Choose a reference cell for moving object
● Top, left cell at [2,2]
● Move object by the top-left cell
Choose a reference cell for resizing object
● Bottom, right cell at [7,7]
● Drag the object by the bottom-right cell

36. Interacting with an Object on a Canvas
Describing the interaction
● Hidden, ARIA Live Region
Keyboard Interaction Model
● Separate triggers for move & resize
● Spacebar to grab
● Arrows to move from reference cell
● Spacebar to drop
● Escape to cancel

37. Interacting with an Object on a Canvas
Step 1: Tab to Move “handle"

38. Interacting with an Object on a Canvas
Step 2: Spacebar to grab Object A

39. Interacting with an Object on a Canvas
Step 3: Press right arrow key

40. Interacting with an Object on a Canvas
Step 4: Press spacebar

41. Interacting with an Object on a Canvas

42. Interacting with Objects on a Canvas
What if...
● The canvas or objects aren’t rectangular?
● Objects can’t overlap?
● Objects can only partially overlap?

43. Interacting with Objects on a Canvas
What if...
● The canvas or objects aren’t rectangular?
● Objects can’t overlap?
● Objects can only partially overlap?
How do you describe...
● Rules?
● Collisions?
● When multiple objects are changed?

44. How would you
model and describe
interactions?

45. Move “Mean Mr. Mustard” from
position 15 to position 11
vs.
Move “Mean Mr. Mustard” directly
before “Polythene Pam”
Playlist Curation
Spotify Playlist

46. Different drag-and-drop
models apply depending on
how rigid the templates are...
● Canvas
● Series of reorderable lists
WYSIWYG Page Editors
Lightning App Builder

47. ● Positioning outfielders for a
left-handed batter
● Place players relative to...
○ traditional positions
○ bases
○ other field players
Baseball Field Management
Out of the Park Baseball 16

48. Relative positioning
● Place the couch below the window
● Center the bed on the back wall
● Move the lamp closer to the ottoman
● Rotate the chair away from the kitchen
3D Home Modelling
The Sims 4

49. Relative positioning
● Place the couch below the window
● Center the bed on the back wall
● Move the lamp closer to the ottoman
● Rotate the chair away from the kitchen
Exact dimensions
● Can this shelf fit by the door?
● This picture frame isn’t straight
● Model different granularities of movement
3D Home Modelling
Room Sketcher

50. How do you work within three
dimensions?
A room is just a series of canvases:
● Walls
● Floor
● Ceiling
Elements snap to one of these surfaces.
3D Home Modelling

51. 3D Modelling
What patterns would you
use to describe states and
interactions in even more
dynamic 3D contexts?
Autodesk Maya

52. 3D Modelling
What patterns would you
use to describe states and
interactions in even more
dynamic 3D contexts?
Consider reference points
and reference objects
Autodesk Maya

53. More Resources
bit.ly/a11ydnd
bit.ly/a11ydnd-code