Nadia Zubko's blog
Ensuring Accessible Animations on Websites

Photo by Aashish Chandra on Unsplash

Ensuring Accessible Animations on Websites

Nadia Zubko's photo
Nadia Zubko
·

4 min read

Website animations add visual appeal and engagement, but for some users, they can hinder accessibility and create barriers. In particular, animations can be disruptive for users with vestibular disorders (myself included ✋, when sites use the parallax effect it makes me dizzy on some days), or those who prefer a simplified browsing experience. In this article we'll explore the challenge of making scroll-reveal animations accessible, why accessibility matters, how reduced motion settings work, and how to test and adapt animations to respect user preferences.

Why Website Accessibility is Important. A Quick Recap:

  • Inclusivity and Equal Access

Web accessibility ensures that people with a wide range of abilities can use and interact with your website. When animations are not accessible, users who experience motion sensitivity may suffer from dizziness, nausea, or discomfort. By respecting user preferences, you ensure that everyone can navigate your website comfortably and safely.

Many regions have legal requirements for digital accessibility, such as the Web Content Accessibility Guidelines (WCAG) globally. Failure to comply can result in legal consequences, e.g. in the US, and alienate potential users.

  • Improved User Experience

Accessibility improvements often enhance the overall user experience for everyone. Simplifying animations or making them optional creates a smoother, more predictable browsing experience, benefiting users with slow internet connection or older devices.

Accessibility Assessment: Scroll-Reveal Animations

While scroll-reveal animations can be visually appealing, they may present challenges for accessibility. Here's how to make such animations accessible and respect user preferences for reduced motion:

Original Challenge

In the original JavaScript animation script used at my website www.nadia-zubko.click, elements were animated into view with properties like delay, distance, and easing:

export const defaultProps = {
  easing: "cubic-bezier(0.5, 0, 0, 1)",
  distance: "35px",
  duration: 1000,
  desktop: true,
  mobile: true,
};

The challenge was determining how to disable these animations for users who have "prefers-reduced-motion" set to true.

The Accessible Solution

I have updated the script to check if the user has reduced motion preferences and adjusted the animation accordingly:

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

export const defaultProps = {
  easing: "cubic-bezier(0.5, 0, 0, 1)",
  distance: prefersReducedMotion ? "0px" : "35px",
  duration: prefersReducedMotion ? 0 : 1000,
  desktop: true,
  mobile: true,
};

export const targetEls = [
  {
    element: ".section-title",
    animation: prefersReducedMotion ? {} : { delay: 300, distance: "0px", origin: "bottom" },
  },
   ....
   ...
];

Now, if "prefers-reduced-motion" is set to true, the animations are disabled, and elements are shown immediately.

Where to Set Reduced Motion Preferences and How to Test Them

Users can indicate their preference for reduced motion in their operating system or browser settings. Here are ways to enable reduced motion on different platforms:

Operating Systems

Windows 10 / 11

  1. Go to Settings > Accessibility > Visual Effects

  2. Toggle "Animation effects" to Off

macOS

  1. Open System Settings > Accessibility > Display

  2. Check "Reduce motion"

iOS

  1. Go to Settings > Accessibility > Motion

  2. Enable "Reduce Motion"

Android

  1. Open Settings > Accessibility > Text and display

  2. Turn on "Remove animations"

Browsers

Chrome and Edge

  1. Open DevTools (Ctrl + Shift + I / Cmd + Option + I)

  2. Go to Rendering > Emulate CSS media feature prefers-reduced-motion and select "Reduce"

Firefox

  1. Visit about:config in the address bar

  2. Set ui.prefersReducedMotion to 1

Safari

  1. Open Safari Preferences > Advanced

  2. Enable "Show Develop menu"

  3. In the Develop menu, select "Disable Motion"

How to Test Reduced Motion in Your Website

Verifying the Setting

You can use JavaScript to verify if reduced motion is enabled in the browser:

console.log(window.matchMedia("(prefers-reduced-motion: reduce)").matches);

  • true will indicate reduced motion is enabled

  • false will indicate that motion animations are allowed

Expected Behavior

When reduced motion is enabled, the website should:

  1. Disable Animations: Elements should appear immediately without delays or motion effects

  2. Gracefully Fall Back: Ensure that the content is still visually appealing and functional without animations

For example, if you have a scroll-reveal animation like the one I used in my site, the element should simply be visible without any transition effect.

Accessibility