Check as complete
Using motion behind static text creates a depth mismatch that can be triggering. Even subtle animations can be harmful when placed directly behind the text. What constitutes excessive motion can be subjective, but a good rule is to avoid motion that takes up more than 10% of the central visual field.
Best practices for designing with motion
Always prioritize minimizing harm when designing with motion.
Make sure animations don’t:
- Prevent users from accessing page content
- Take up more than 10% of the visual field
If you’re not sure if an animation is too much, here’s a helpful tip:
"For each animation or interaction you’re planning, ask yourself, “If this effect was stronger (much faster, or bouncier, or swoopier), would it be disorienting, or make me feel motion-sick?” If the answer is yes, then you can rest assured there are plenty of people in the world whose threshold is already low enough to be bothered."
Useful resources:
- Your Interactive Makes Me Sick: Why your coolest scrolly features can cause problems, and what to do about it
- Vestibular Issues in Parallax Design
WCAG reference:
Back to checklist
Total progress
Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
0 / 0
Hide progress