accessible ui animation
TRANSCRIPT
Accessible Animation Lessons from the Web with @RachelNabors
WebAnimationWeekly.com
slack.AnimationAtWork.com
accessible animation = no motion
accessible animation > no motion
Au#sm & Dyslexia
Looping Animation
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
“
Seizures
Flashing Animation
devToolsChallenger.com
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
Ves#bular Disorders
Motion
Let’s talk about that.
What’s a vestibular disorder?
Vestibular System
The sensory system that gives us our sense of balance and spa8al orienta8on via ears, eyes, and other inputs.
Triggers
goo.gl/oicPfZ
Scaling/Zooming
goo.gl/oicPfZ
goo.gl/oicPfZ
Spinning/Spiraling
goo.gl/oicPfZ
goo.gl/oicPfZ
Differing Speeds/Directions
goo.gl/oicPfZ
goo.gl/oicPfZ
3D motion in 2D
goo.gl/oicPfZ
goo.gl/oicPfZ
Peripheral Animation
goo.gl/oicPfZ
Triggers != Gestures
What the Web Is Doing
Eric
Bai
ley goo.gl/W5mfYJ
Stev
e Ga
rdne
r goo.gl/aM
Yk3H
goo.gl/oicPfZ
More about reduced mo)on media queries and how to use them… goo.gl/SdC4LJ
Val Head
Giving Users a Choice
Op4on 1: Change Se:ngs
Accessibility Settings
Anima&on preferences:Full anima&on Reduce anima&on Disable anima&on
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
devToolsChallenger.com
Op4on 3: Give No4ce
This site uses anima&on and mo&on. Disable it?
devToolsChallenger.com
The WCAG
WCAG
The W3C’s Web Content Accessibility Guidelines (WCAG) are the accessibility gold standard for the Web.
WCAG 1
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).
WCAG 2
ww
w.m
icro
so4.
com
/en-
us/d
esig
n/in
clus
ive
(Lack of) Research Is a Real Problem
goo.gl/9FLM5m
goo.gl/9FLM5m
goo.gl/9FLM5m
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
Issues facing standardizing accessibility
• Extrapola)ng from unrelated research.
• Research from homogenous sources.
• Humans are inherently different.
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
You Can Help
Be a part of the solu4on!
• Share
• Report
• Research
Reach out to m
e!
Animation belongs to all of us now.
Let us set the web in motion together.
WebAnimationWeekly.com
slack.AnimationAtWork.com
@RachelNabors .c
om
20% off with
AAW-ADAS
courses.rachelnabors.com