Accessible UI Animation
?
2 likes?446 views
The Web has learned a lot about motion design, vestibular disorders, seizure risks, and other interplays of UI and the human visual system.
Accessible UI Animation
- 1. Accessible Animation Lessons from the Web with @RachelNabors
- 4. accessible animation = no motion
- 5. accessible animation > no motion
- 6. Au#sm & Dyslexia Looping Animation
- 7. A lot of au)s)c children are riveted by the mo)on of (fan) blades… Dyslexics who can see the blade ?icker 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 “
- 11. Guidelines for Avoiding Seizures ? No more than 3 ?ashes per second. ? The combined area of ?ashes 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
- 13. Let’s talk about that.
- 14. What’s a vestibular disorder?
- 15. Vestibular System The sensory system that gives us our sense of balance and spa8al orienta8on via ears, eyes, and other inputs.
- 16. Triggers
- 18. goo.gl/oicPfZ
- 20. goo.gl/oicPfZ
- 22. goo.gl/oicPfZ
- 23. goo.gl/oicPfZ 3D motion in 2D
- 24. goo.gl/oicPfZ
- 26. goo.gl/oicPfZ
- 27. More on the WebKit blog goo.gl/oicPfZ
- 30. What the Web Is Doing
- 34. goo.gl/oicPfZ
- 35. More about reduced mo)on media queries and how to use them… goo.gl/SdC4LJ Val Head
- 36. Giving Users a Choice
- 37. Op4on 1: Change Se:ngs Accessibility Settings Anima&on preferences: Full anima&on Reduce anima&on Disable anima&on
- 38. 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
- 40. Op4on 3: Give No4ce This site uses anima&on and mo&on. Disable it?
- 42. The WCAG
- 43. WCAG The W3C’s Web Content Accessibility Guidelines (WCAG) are the accessibility gold standard for the Web.
- 44. WCAG 1
- 45. 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 ?ashes and epilepsy (plz keep ?ashes below 20 per second, thanks).
- 46. WCAG 2
- 48. (Lack of) Research Is a Real Problem
- 49. goo.gl/9FLM5m
- 50. goo.gl/9FLM5m
- 51. goo.gl/9FLM5m
- 52. 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
- 53. Issues facing standardizing accessibility ? Extrapola)ng from unrelated research. ? Research from homogenous sources. ? Humans are inherently di?erent.
- 54. 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 signi?cantly address a lot of the issues without signi?cant impact on design. “ David MacDonald Invited Expert at the WCAG
- 55. You Can Help
- 56. Be a part of the solu4on! ? Share ? Report ? Research Reach out to me!
- 57. 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