Making Accessible Web Animations
New animation tools
Inaccessible Animations
Attention deficits
Vestibular disorders
Seizures and migraines
Everyone
Why animate?
Accessibility is beautiful
Animation has brain benefits!
Visual processing
Two systems
What System
Intuitive websites
Where system
My example of the two systems
What is animation?
Using the two systems
Differences
Feedback
Orientation
The best of both worlds
Give your users control over animation with a toggle or setting
Toggle example
Respect your user's OS or browser settings for reduced motion
Operating systems
Media queries in CSS
Demonstration of a zooming modal (video)
Prefers reduced motion (code)
Adapted demonstration (video)
Support
Don't flash too quickly
How quickly?
How quickly? Too quickly.
Flash speed
Ignore the loophole
Hide things for everyone, not just mouse users
Focus path for keyboards
Ideal focus path
Actual focus path
Manage tabindexes (explanation)
Manage tabindexes (code part 1)
Managing tabindexes (code part 2)
Or you could use the display: none property
Adding display: none (code part 1)
But this doesn't work as expected
Use a function to hide your hiding
Removing display: none
Summary of what to do for accessible animations
Let’s chat