How to Animate Accessibility
summary
The talk examines how animations affect accessibility, noting that only 4 of the WCAG 2.2 criteria directly mention animations and that photosensitive epilepsy affects about 0.05% of people. It compares real-world animation technologies—CSS (including prefers-reduced-motion), JavaScript, the Web Animations API, WebGL/Three.js and libraries like Greensock—and presents three practical tactics named Terminator, Judgment Day and Skynet, with demos showing problematic parallax effects and solutions that can fail on outdated browsers and operating systems.
AI-written summary · about
chapters (10)
- 0:00Animating accessibility
- 2:27Web animation overview
- 9:28WCAG animation criteria
- 13:59Who animations bother
- 17:31Text alternatives for accessibility
- 21:23OS to disable animations
- 22:27Terminator tactic
- 24:55Judgment Day tactic
- 26:38Skynet accessible animations
- 27:20Creativity vs accessibility
related talks
18mSafer Web Animations
19mThe Shady Web: Using CSS for Good, not Evil
01h 00mAnimating Web Experiences
41mDizzy Users Close Browsers: Balancing Creativity & Accessibility
46mCSS animations are heating up!
37mAccessibility Matters: Creating a Better Web
38mReturn to Web Animation Wonderland
46mAnimations & Transitions