ACCESSIBLE CSS: How to Detect User Preferences for Minimal Animation Motion

Six motion icons

The vestibular system includes parts of the inner ear and brain, responsible for sensory information processing and spatial orientation.

According to the folks at, “as many as 35 percent of adults aged 40 years or older in the United States (approximately 69 million Americans) have experienced some form of vestibular dysfunction.”

People with vestibular disorders experience symptoms like motion sickness, balance problems, chronic dizziness, headaches, and nausea when looking at large-scale motion on the screen.

Best Practice

Don’t use animations or transitions in interactions without giving the user a way to turn them off.

Possible Fix

Use the @media (prefers-reduced-motion) media query to respect user preferences.

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.

Read Eric Bailey’s excellent article Revisiting prefers-reduced-motion, the reduced motion media query to find out more about browser compatibility and to see code examples.

Additional Resource: A Guide to Creating Accessible Animations by Anna Monus


WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos