Accessible Animation Redux Presented By Nat Tarnoff CSUN
Accessible Animation: Redux Presented By: Nat Tarnoff CSUN 2019 Assistive Technology Conference March 14, 2019
Happy Pi Day! 2 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
ANIMATION IS GOOD
Animation is Preferred
BUT ALL ANIMATION IS NOT EQUAL
We’re Wired for Motion 6 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
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. 7 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
Processing Vision is Resource Heavy 8 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
Sensory Gating 9 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
Primary Stimuli vs Secondary 10 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
Sensory Overload 11 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
Accessible Animation Checklist q. Default to the “read” or “final” state on page load q. Limit motion to one element at a time q. Make the moving element the primary action or information or a guide to this content q. Do not present content in parallel with animation, it will be lost q. Limit animation size, anything over ¼ of the viewport is likely to trigger issues q. Keep animation as short as possible q. Provide a method to shut off animation q. Pause animation after one play through, allow the user to replay if needed q. Offer a text alternative immediately adjacent to the animation q. Use the prefers-reduce-motion media query q. Add switch if windows. matchmedia() is false 12 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
WCAG 2. 1 13 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
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 14 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
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. 15 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
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. 16 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
CSS & JS TOOLS 17
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; } 18 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
Support 19 Mac OS X i. OS Windows Android levelaccess. com | (800) 899 -9659 | info@levelaccess. com
IOS Reduce Animation Settings> General> Accessibility> Reduce Motion 20 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
Windows Reduce Animation 21 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
SUMMARY 22
Animation Checklist (2) q. Default to the “read” or “final” state on page load q. Limit motion to one element at a time q. Make the moving element the primary action or information or a guide to this content q. Do not present content in parallel with animation, it will be lost q. Limit animation size, anything over ¼ of the viewport is likely to trigger issues q. Keep animation as short as possible q. Provide a method to shut off animation q. Pause animation after one play through, allow the user to replay if needed q. Offer a text alternative immediately adjacent to the animation q. Use the prefers-reduce-motion media query q. Add switch if windows. matchmedia() is false 23 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
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 24 levelaccess. com | (800) 899 -9659 | info@levelaccess. com
THANK YOU! Speaker Contact Information: Nat Tarnoff nat. tarnoff@levelaccess. com Follow Us @Level. Access. A 11 y linkedin. com/company/level-access Level Access Contact Information: info. levelaccess. com (800) 889 -9659 facebook. com/Level. Access. A 11 y/ levelaccess. com/blog/ Slides available for download March 15 th at: www. levelaccess. com/CSUN 2019
- Slides: 25