216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention


Phase 2
Real-World Accessibility


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

Is Your Website Vulnerable to Frivolous Lawsuits?
Get a Free Web Accessibility Audit to Learn Where You Stand
Find Out Today!

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

Interested in Marketing?
Speak to an Expert about marketing opportunities for your brand to cultivate support and growth online.
Contact Us

About

Blog

Contact Us
  • Ease Into Motion: Smarter Animation Accessibility

    Imagine clicking into a website and being hit with swirling graphics, sliding panels, or a bouncing button that just won’t stop. For many people, that kind of animation isn’t just annoying—it’s physically harmful. Dizziness. Nausea. Migraines. Disorientation. For users with motion sensitivity, these effects are all too common.

    As developers, we love using motion to make our interfaces feel alive. But when it comes to animation accessibility, we need to be just as thoughtful about who we’re designing for. Great UI isn’t just beautiful—it’s inclusive. And making motion safer doesn’t mean removing it altogether. It just means giving people control.

    This guide breaks down what you need to know about motion sensitivity, how to comply with the Web Content Accessibility Guidelines (WCAG), and how to build user-friendly animation for your projects using CSS, JavaScript, and real-world techniques.

    Who’s Affected by Motion—and Why It Matters

    Motion sensitivity happens when animations or transitions trigger unpleasant physical reactions. This might include nausea, vertigo, blurry vision, headaches, or even migraines. It’s especially common for people with:

    • Vestibular disorders
    • Autism spectrum disorder
    • ADHD
    • Epilepsy

    In fact, over 35% of adults experience some kind of vestibular dysfunction by age 40. That’s not a small edge case—it’s a significant part of your user base.

    The Trouble With Flashing and Distractions

    Animations can also cause cognitive overload. Users with ADHD or processing differences may find it hard to stay focused when elements are constantly moving. Looping carousels or animated background transitions can pull attention away from the main content or calls to action.

    And then there’s photosensitive epilepsy. About 3% of people with epilepsy can have seizures triggered by flashing lights—especially red-on-black or high-contrast flickers. That’s why WCAG has strict guidelines around flash frequency.

    WCAG and Animation Accessibility: What to Follow

    Before diving into the specifics, it’s important to understand that these aren’t arbitrary rules—they exist to protect people. Animation accessibility is a fundamental part of inclusive design, and these guidelines offer a framework that helps you avoid unintentional harm.

    Key Guidelines

    • 2.2.2 – Pause, Stop, Hide: Any moving content that starts automatically must have a clear way to pause or hide it, unless the motion is essential.
    • 2.3.1 – Three Flashes or Below Threshold: Avoid flashing more than 3 times per second.
    • 2.3.3 – Animation from Interactions: If your animation happens because someone clicked, scrolled, or hovered—it still needs to be safe and optional.

    How to Apply These Guidelines

    • Don’t loop animations forever.
    • Offer controls to pause or stop motion.
    • Never rely on animation alone to convey important info—back it up with text or icons.

    Animation accessibility is about making sure motion adds value without harm.

    Using CSS to Respect Motion Preferences

    What Is @prefers-reduced-motion?

    This media query checks whether a user has asked for less motion in their operating system:

    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
      }
    }

    If users toggle Reduce motion in macOS, iOS, Windows, Android, or Linux, they’ll instantly get a calmer experience.

    Design Strategies

    • Remove parallax scroll and large translations.
    • Swap animated GIFs with a static frame or CSS background-image.
    • Tone down fades and slides—transitions shorter than 250 ms are usually fine.
    • Provide fallbacks that still communicate state changes (e.g., use color or underline instead of a shake animation to signal “invalid input”).

    Giving Users Control With JavaScript

    Even if someone’s system doesn’t request reduced motion, they should still have a choice. Here’s a simple example:

    <button id="toggle-motion">Toggle motion</button>
    <script>
      document.getElementById('toggle-motion').addEventListener('click', () => {
        document.body.classList.toggle('reduce-motion');
        localStorage.setItem('reduceMotion', document.body.classList.contains('reduce-motion'));
      });
      // Persist preference between visits
      if (localStorage.getItem('reduceMotion') === 'true') {
        document.body.classList.add('reduce-motion');
      }
    </script>

    Then, in your CSS:

    .reduce-motion * {
      animation: none !important;
      transition: none !important;
    }

    Let users decide what works for them. Animation accessibility is about empowerment.

    Pause on Hover or Interaction

    You can also pause motion when someone hovers or focuses:

    @keyframes spin { to { transform: rotate(360deg); } }
    .loader {
      animation: spin 1.5s linear infinite;
    }
    .loader:hover,
    .loader:focus-visible {
      animation-play-state: paused;
    }

    This small touch gives users breathing room without turning off design completely.

    Progressive Enhancement: Accessibility First

    Start safe, layer on flair. Treat the reduced‑motion version as the baseline and add richer animation only if the user hasn’t opted out. This progressive‑enhancement approach prevents regressions—future devs won’t accidentally forget animation accessibility because the “accessible” state is the default.

    /* Base styles: minimal motion */
    .button {
      transition: background-color 150ms ease-in;
    }
    /* Only animate if motion is OK */
    @media (prefers-reduced-motion: no-preference) {
      .button:hover {
        transform: translateY(-2px);
      }
    }

    You can combine media features to catch multiple needs:

    @media (prefers-reduced-motion: reduce) and (prefers-contrast: high) {
      /* Ultra-accessible styles */
    }

    Performance & UX Benefits of Reducing Motion

    • Battery & CPU savings on low‑power devices (less layout thrashing, fewer GPU layers).
    • A cleaner interface helps all users focus on content and calls to action.
    • Lower cognitive load means faster task success—key in e‑commerce checkouts or complex forms.

    When stakeholders balk at “turning off the fun stuff,” show how reduced motion often speeds up perceived performance and increases conversions.

    Testing for Motion Accessibility

    You don’t need to eliminate all animation—you just need to know when and where it matters.

    Use Tools Like:

    • PEAT (Photosensitive Epilepsy Analysis Tool): Checks flash frequency and contrast against seizure‑safe limits.
    • WAVE: Flags continuous animations and missing pause controls.
    • Google Lighthouse: Includes audits for @prefers-reduced-motion.
    • Manual Device Testing: Turn on Reduce motion in the OS and navigate your site—does anything still move?

    Combine automated scans with human walkthroughs—especially for pages heavy on micro‑interactions. Ask testers with vestibular or cognitive disabilities for feedback if possible.

    Responsible Animation Is Good UX

    Animation accessibility isn’t about banning creativity. It’s about respecting user choice, following WCAG, and providing explicit opt‑ins or opt‑outs. When you honor @prefers-reduced-motion, add site‑level toggles, and keep flashes below seizure thresholds, you deliver the best of both worlds: engaging motion for those who love it and a calm, usable experience for those who don’t.

    Need a quick check on your motion strategy—or a deep dive into ADA compliance across your entire front end? Schedule a personalized accessibility briefing with the team at 216digital. We’ll help you uncover hidden risks, refine your animation patterns, and build inclusive experiences that look amazing and feel great for everyone.

    Let’s create motion that moves people—in the right way.

    Greg McNeil

    May 21, 2025
    How-to Guides, WCAG Compliance
    Accessibility, animation, How-to, motion, WCAG, Web Accessibility
  • Should Designers Hit Pause on Animation?

    Animation can bring a website to life, but have you ever considered how it impacts all users? While animations and gifs can make a site feel more dynamic, they can also cause some visitors discomfort—or worse—. Let’s explore why animations can be tricky from an accessibility standpoint and how you can design them to be both engaging and inclusive.

    Why Animation Can Be Problematic

    Animations aren’t just flashy extras—they can deeply affect how users experience your website, and not always in a good way.

    • Motion Sensitivity: Some people have vestibular disorders that make them sensitive to movement on screens. Animations like parallax scrolling or sliding elements can trigger dizziness, vertigo, or nausea.
    • Seizures: Flashing lights or strobing effects can be dangerous for users with photosensitive epilepsy. Even subtle flickers can cause issues.
    • Cognitive Overload: Busy or overly complex animations can overwhelm users with cognitive impairments, making it hard for them to focus or understand the content.
    • Assistive Technology Interference: Screen readers and other tools can struggle with animations that change content dynamically, leading to confusion.

    These challenges highlight why designers need to think critically about when and how they use animations.

    Does Your Design Really Need Animation?

    Not every project calls for animation. Before you add that fancy effect, ask yourself:

    • Does it serve a purpose?
    • Will it help users navigate or understand the site?
    • Could it distract or overwhelm someone?

    Animations should always have a clear function, like drawing attention to a call-to-action or giving feedback on an interaction. If the animation doesn’t improve usability, it might be best to skip it.

    Making Animations Accessible

    If you must use an animation, here are some tips to ensure it doesn’t cause issues for people with cognitive or visual impairments:

    1. Keep It Simple: Avoid overly elaborate or decorative effects. Subtle transitions or fades can be just as effective without being overwhelming.
    2. Mind the Timing: Speed matters. Too fast, and users might get lost; too slow, and they could grow impatient. Aim for a balance that feels natural.
    3. Give Users Control: All animations should have visual and accessible controls to pause and play the animation. Always respect the prefers-reduced-motion media query.
    4. Focus on Purpose: Every animation should add value. Whether it’s guiding users or making content clearer, make sure it serves a meaningful purpose.

    A Quick Fix with prefers-reduced-motion

    One of the easiest ways to address motion sensitivity is by using the prefers-reduced-motion media query. This CSS feature checks if a user has reduced motion enabled on their device and adjusts animations accordingly.

    Here’s how you can tone down animations for users who prefer less motion:

    @media (prefers-reduced-motion: reduce) {  
      .animated-element {  
        animation: none;  
        transition: none;  
      }  
    }  

    Want to simplify rather than completely disable? Try this:

    @media (prefers-reduced-motion: reduce) {  
      .fade-in {  
        animation: fade-in 0.5s linear;  
      }  
    }  
    @keyframes fade-in {  
      from { opacity: 0; }  
      to { opacity: 1; }  
    }  
    

    This approach keeps your design functional while reducing the risk of discomfort for sensitive users.

    What Does WCAG Say About Animation?

    The Web Content Accessibility Guidelines (WCAG) offer clear rules about animations. Two of the most relevant criteria are:

    • 2.3.1: Three Flashes or Below Threshold
    • Avoid animations that flash more than three times per second. It’s a crucial step in reducing the risk of seizures.
    • 2.3.3: Animation from Interactions
    • If animations are triggered by user actions, make sure they can be disabled without affecting functionality.

    Following these guidelines helps ensure your site is usable for everyone.

    Testing Your Animations

    Testing is an essential part of designing accessible animations. Here’s how to do it effectively:

    • Check Motion Settings: Turn on the “reduce motion” setting on your device (available on macOS, Windows, iOS, and Android) and see how your site responds.
    • Try Keyboard Navigation: Ensure animations don’t interfere with keyboard functionality. Can users still tab through links and buttons smoothly?
    • Use Automated Tools: Tools like Lighthouse can catch accessibility issues related to animations.
    • Gather Feedback: Get input from real users, especially those with disabilities. They’ll provide insights you might not have considered.

    Accessible Animation with JavaScript

    Sometimes, you’ll need JavaScript to handle animations. You can still make them accessible by pairing JavaScript with prefers-reduced-motion.

    Here’s a quick example:

    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');  
    if (reduceMotion.matches) {  
      // Turn off animations for users who prefer reduced motion  
      document.querySelector('.animated-element').style.animation = 'none';  
    } else {  
      // Keep animations for everyone else  
      document.querySelector('.animated-element').classList.add('run-animation');  
    }   

    This snippet ensures your animations adapt to user preferences without requiring manual toggles.

    Wrapping It Up

    Animations can be a powerful tool for creating engaging, interactive websites—but they should never come at the expense of accessibility. By keeping animations simple, purposeful, and user-controlled, you can deliver a better experience for all your visitors.

    Don’t forget to test your designs with real users and tools, and make use of features like prefers-reduced-motion to accommodate different needs. Thoughtful design is inclusive design, and accessible animations are a small change that can make a big difference. If you’re unsure if the animations on your website are accessible or would like an expert partner to help you get started, reach out to 216digital using the contact form below.

    Bobby

    November 14, 2024
    How-to Guides
    Accessibility, animation, How-to, web developers, web development, Website Accessibility
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

    Our team is full of expert professionals in Web Accessibility Remediation, eCommerce Design & Development, and Marketing – ready to help you reach your goals and thrive in a competitive marketplace. 

    216 Digital, Inc. BBB Business Review

    Get in Touch

    2208 E Enterprise Pkwy
    Twinsburg, OH 44087
    216.505.4400
    info@216digital.com

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

    Settlement & Risk Mitigation
    WCAG 2.1/2.2 AA Compliance
    Monitoring Service by a11y.Radar

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.