Successfully reported this slideshow.

Major Patterns for Accessible Drag and Drop

0

Share

Loading in …3
×
1 of 53
1 of 53

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Major Patterns for Accessible Drag and Drop

  1. 1. Jesse Hausler, Principal Accessibility Specialist Cordelia McGee-Tubb, Lead Accessibility Specialist Major Patterns for Accessible Drag and Drop
  2. 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.
  3. 3. Accessibility as Equality A Note on Workarounds
  4. 4. 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
  5. 5. 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
  6. 6. Know Your Users
  7. 7. Verbosity Interaction Details Language Granularity Methods for Describing Drag and Drop to Users
  8. 8. Native HTML ARIA Patterns Live Region Text Programatically Describing Interactions
  9. 9. 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
  10. 10. Resize an Object in 1-Dimension User’s interactions ● Increase ● Decrease Engineer’s tasks ● Set minimum ● Set maximum ● Set default ● Set step
  11. 11. Resize an Object in 1-Dimension
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Resize an Object in 1-Dimension
  16. 16. 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?
  17. 17. Move an object from one list to another Menu an existing ARIA design pattern
  18. 18. 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
  19. 19. 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
  20. 20. Move an object from one list to another
  21. 21. Sort a List Rank your favorite desserts! Unlike moving items between lists, order does matter.
  22. 22. Sort a List ARIA Listbox Describes the navigation model Hidden Live Region Provides status updates and in-context operation details
  23. 23. 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
  24. 24. 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>
  25. 25. 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>
  26. 26. Sort a List Step 1: Tab into the Listbox Keyboard Interaction Model
  27. 27. Sort a List Step 2: Down arrow to Cake Keyboard Interaction Model
  28. 28. Sort a List Step 3: Press spacebar to grab Cake Keyboard Interaction Model
  29. 29. Sort a List Step 4: Move Cake down one item in list Keyboard Interaction Model
  30. 30. Sort a List Step 5: Drop Cake in position 4 Keyboard Interaction Model
  31. 31. Sort a List Alternative Path: Press Esc, Cancel move Keyboard Interaction Model
  32. 32. Sort a List
  33. 33. 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]
  34. 34. 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
  35. 35. 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
  36. 36. Interacting with an Object on a Canvas Step 1: Tab to Move “handle"
  37. 37. Interacting with an Object on a Canvas Step 2: Spacebar to grab Object A
  38. 38. Interacting with an Object on a Canvas Step 3: Press right arrow key
  39. 39. Interacting with an Object on a Canvas Step 4: Press spacebar
  40. 40. Interacting with an Object on a Canvas
  41. 41. Interacting with Objects on a Canvas What if... ● The canvas or objects aren’t rectangular? ● Objects can’t overlap? ● Objects can only partially overlap?
  42. 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? How do you describe... ● Rules? ● Collisions? ● When multiple objects are changed?
  43. 43. How would you model and describe interactions?
  44. 44. Move “Mean Mr. Mustard” from position 15 to position 11 vs. Move “Mean Mr. Mustard” directly before “Polythene Pam” Playlist Curation Spotify Playlist
  45. 45. Different drag-and-drop models apply depending on how rigid the templates are... ● Canvas ● Series of reorderable lists WYSIWYG Page Editors Lightning App Builder
  46. 46. ● 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
  47. 47. 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
  48. 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 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
  49. 49. 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
  50. 50. 3D Modelling What patterns would you use to describe states and interactions in even more dynamic 3D contexts? Autodesk Maya
  51. 51. 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
  52. 52. More Resources bit.ly/a11ydnd bit.ly/a11ydnd-code

×