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
  • 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.