1 / 25

Accessible Animation: Redux

Learn about the importance of accessible animation and how to create animations that are inclusive for all users. Presented by Nat Tarnoff at CSUN 2019 Assistive Technology Conference.

mmorabito
Download Presentation

Accessible Animation: Redux

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Accessible Animation: Redux Presented By: Nat Tarnoff CSUN 2019 Assistive Technology Conference March 14, 2019

  2. Happy Pi Day! levelaccess.com |(800) 899-9659 | info@levelaccess.com

  3. Animation Is Good

  4. Animation is Preferred 85%

  5. But all animation is not equal

  6. We’re Wired for Motion levelaccess.com |(800) 899-9659 | info@levelaccess.com

  7. Motion “... motion itself attracts attention, so less important but more active aspects of animations may override the voluntary control of attention to the important aspects"  Yantis S. & Jonides J. (1990) Abrupt visual onsets and selective attention: voluntary versus automatic allocation. Journal of Experimental Psychology: Human Perception and Performance 16, 121–134. levelaccess.com |(800) 899-9659 | info@levelaccess.com

  8. Processing Vision is Resource Heavy levelaccess.com |(800) 899-9659 | info@levelaccess.com

  9. Sensory Gating levelaccess.com |(800) 899-9659 | info@levelaccess.com

  10. Primary Stimuli vs Secondary levelaccess.com |(800) 899-9659 | info@levelaccess.com

  11. Sensory Overload levelaccess.com |(800) 899-9659 | info@levelaccess.com

  12. Accessible Animation Checklist • Default to the “read” or “final” state on page load • Limit motion to one element at a time • Make the moving element the primary action or information or a guide to this content • Do not present content in parallel with animation, it will be lost • Limit animation size, anything over ¼ of the viewport is likely to trigger issues • Keep animation as short as possible • Provide a method to shut off animation • Pause animation after one play through, allow the user to replay if needed • Offer a text alternative immediately adjacent to the animation • Use the prefers-reduce-motion media query • Add switch if windows.matchmedia() is false levelaccess.com |(800) 899-9659 | info@levelaccess.com

  13. WCAG 2.1 levelaccess.com |(800) 899-9659 | info@levelaccess.com

  14. 2.2.2 Pause, stop, hide For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential levelaccess.com |(800) 899-9659 | info@levelaccess.com

  15. 2.3.1 Three flashes or below Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.  levelaccess.com |(800) 899-9659 | info@levelaccess.com

  16. 2.3.3 Animation from interactions  Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.  levelaccess.com |(800) 899-9659 | info@levelaccess.com

  17. CSS & JS Tools

  18. CSS Prefers-reduce-motion media query • Default or reduce returns True  • No-preference returns False  • Example: @media screen and (prefers-reduced-motion: no-preference) {    /* CSS for Animation goes here */  } @media screen and (prefers-reduced-motion: reduce) {    animation: unset !important;    transition: none !important;  } levelaccess.com |(800) 899-9659 | info@levelaccess.com

  19. Support Mac OS X  iOS Windows Android  levelaccess.com |(800) 899-9659 | info@levelaccess.com

  20. IOS Reduce Animation Settings> General> Accessibility> Reduce Motion levelaccess.com |(800) 899-9659 | info@levelaccess.com

  21. Windows Reduce Animation levelaccess.com |(800) 899-9659 | info@levelaccess.com

  22. Summary

  23. Animation Checklist (2) • Default to the “read” or “final” state on page load • Limit motion to one element at a time • Make the moving element the primary action or information or a guide to this content • Do not present content in parallel with animation, it will be lost • Limit animation size, anything over ¼ of the viewport is likely to trigger issues • Keep animation as short as possible • Provide a method to shut off animation • Pause animation after one play through, allow the user to replay if needed • Offer a text alternative immediately adjacent to the animation • Use the prefers-reduce-motion media query • Add switch if windows.matchmedia() is false levelaccess.com |(800) 899-9659 | info@levelaccess.com

  24. Resources • [1] https://news.mit.edu/1996/visualprocessing  • [2] https://www.stalp.sandler.com/downloadc/71061  • [3] http://eprints.rclis.org/8424/1/Human_Computer_Interaction.pdf • [4] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion  levelaccess.com |(800) 899-9659 | info@levelaccess.com

  25. Thank You! Speaker Contact Information: Nat Tarnoff nat.tarnoff@levelaccess.com Level Access Contact Information:​ info.levelaccess.com (800) 889-9659 ​ ​ Follow Us @LevelAccessA11y linkedin.com/company/level-access​ facebook.com/LevelAccessA11y/ levelaccess.com/blog/ Slides available for download March 15th at: www.levelaccess.com/CSUN2019

More Related