Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible UI Animation

108 views

Published on

The Web has learned a lot about motion design, vestibular disorders, seizure risks, and other interplays of UI and the human visual system.

Published in: Design
  • Be the first to comment

Accessible UI Animation

  1. 1. Accessible Animation Lessons from the Web with @RachelNabors
  2. 2. WebAnimationWeekly.com slack.AnimationAtWork.com
  3. 3. accessible animation = no motion
  4. 4. accessible animation > no motion
  5. 5. Au#sm & Dyslexia Looping Animation
  6. 6. A lot of au)s)c children are riveted by the mo)on of (fan) blades… Dyslexics who can see the blade flicker say it's horribly fa)guing and distrac)ng. The mo)on is part of the aCrac)on, too. 
 …I do get stuck on those geometric screen savers a lot of computers have. Temple Grandin Animals in Translation “
  7. 7. Seizures Flashing Animation
  8. 8. devToolsChallenger.com
  9. 9. Guidelines for Avoiding Seizures • No more than 3 flashes per second. • The combined area of flashes occurring concurrently occupies no more than a total of one quarter of any 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 by 768 pixels. —The Trace Research & Development Center, a part of the College of Informa)on Studies at the University of Maryland trace.umd.edu/peat
  10. 10. Ves#bular Disorders Motion
  11. 11. Let’s talk about that.
  12. 12. What’s a vestibular disorder?
  13. 13. Vestibular System The sensory system that gives us our sense of balance and spa8al orienta8on via ears, eyes, and other inputs.
  14. 14. Triggers
  15. 15. goo.gl/oicPfZ Scaling/Zooming
  16. 16. goo.gl/oicPfZ
  17. 17. goo.gl/oicPfZ Spinning/Spiraling
  18. 18. goo.gl/oicPfZ
  19. 19. goo.gl/oicPfZ Differing Speeds/Directions
  20. 20. goo.gl/oicPfZ
  21. 21. goo.gl/oicPfZ 3D motion in 2D
  22. 22. goo.gl/oicPfZ
  23. 23. goo.gl/oicPfZ Peripheral Animation
  24. 24. goo.gl/oicPfZ
  25. 25. More on the WebKit blog goo.gl/oicPfZ
  26. 26. Triggers != Gestures
  27. 27. What the Web Is Doing
  28. 28. MediaQueriesLevel5Editor’sDra4 goo.gl/CcrVFs
  29. 29. EricBaileygoo.gl/W5mfYJ
  30. 30. SteveGardnergoo.gl/aMYk3H
  31. 31. goo.gl/oicPfZ
  32. 32. More about reduced mo)on media queries and how to use them… goo.gl/SdC4LJ Val Head
  33. 33. Giving Users a Choice
  34. 34. Op4on 1: Change Se:ngs Accessibility Settings Anima&on preferences: Full anima&on Reduce anima&on Disable anima&on
  35. 35. Op4on 2: Ask First This site uses anima&on. How would you like to experience it? Full anima&on Reduce anima&on Disable anima&on
  36. 36. devToolsChallenger.com
  37. 37. Op4on 3: Give No4ce This site uses anima&on and mo&on. Disable it?
  38. 38. devToolsChallenger.com
  39. 39. The WCAG
  40. 40. WCAG The W3C’s Web Content Accessibility Guidelines (WCAG) are the accessibility gold standard for the Web.
  41. 41. WCAG 1
  42. 42. 1999’s stringent standards re: anima4on • Provide alt text for animated GIFs. • Synchronize your cap)ons/audio descrip)ons. • “Ensure that moving, blinking, scrolling, or auto-upda)ng objects or pages may be paused or stopped.” • A note about flashes and epilepsy (plz keep flashes below 20 per second, thanks).
  43. 43. WCAG 2
  44. 44. www.microso4.com/en-us/design/ inclusive
  45. 45. (Lack of) Research Is a Real Problem
  46. 46. goo.gl/9FLM5m
  47. 47. goo.gl/9FLM5m
  48. 48. goo.gl/9FLM5m
  49. 49. Broad generaliza4ons/good guesses • Anima)on should serve a purpose. • Be consistent • Downgrade to fades • Use mo)on blur on fast, large moving elements • An)cipate and signal oncoming anima)ons • Reduce autoplay • No one likes parallax anymore
  50. 50. Issues facing standardizing accessibility • Extrapola)ng from unrelated research. • Research from homogenous sources. • Humans are inherently different.
  51. 51. It appears every user with Ves)bular disabili)es is unique and its hard to nail down a group of provoca)ve ac)ons that would significantly address a lot of the issues without significant impact on design. “ David MacDonald Invited Expert at the WCAG
  52. 52. You Can Help
  53. 53. Be a part of the solu4on! • Share • Report • Research Reach out to me!
  54. 54. Animation belongs to all of us now. Let us set the web in motion together. WebAnimationWeekly.com slack.AnimationAtWork.com @RachelNabors .com 20% off with 
 AAW -ADAS courses.rachelnabors.com

×