Accessible Animation

Lessons from the Web with @RachelNabors

WebAnimationWeekly.com
slack.AnimationAtWork.com
accessible animation = no motion
accessible animation > no motion
Looping Animation
Au#sm & Dyslexia
 “
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
Flashing Animation
Seizures
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
Motion
Ves#bular Disorders
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
More on the WebKit blog
goo.gl/oicPfZ
Triggers != Gestures
What the Web Is Doing
Media Queries Level 5 Editor’s Dra4
goo.gl/CcrVFs
Eric Bailey goo.gl/W5mfYJ
Steve Gardner goo.gl/aMYk3H
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
www.microso4.com/en-us/design/
inclusive
(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
e!
o m
Research
t
•

ut
h o
ac
Re
 WebAnimationWeekly.com
slack.AnimationAtWork.com 20%
AA off
courses.rachelnabors.com W w
-A ith
Animation belongs to all of us now. DA 

S
@RachelNabors

.com
Let us set the web in motion together.