Allow Users to Disable Non-Essential Animation from Interactions

Disabilities Affected: Cognitive, Visual

Success Criterion: 2.2.6

Level: AAA

Motion animation triggered by user interaction must be disable-able, unless the animation is essential for the functionality or information being conveyed.

Why It Matters

Animations like parallax scrolling, zooming, or other effects triggered by scrolling or interaction can cause dizziness, nausea, or headaches for users with vestibular disorders. They can also be distracting for users with cognitive impairments. Providing a way to disable non-essential motion improves comfort and usability.

Fixing the Issue

Identify animations triggered by user actions (scrolling, clicking, hovering, etc.). Provide a user preference or control (e.g., in a settings panel or via a toggle button) to disable these non-essential animations. A common technique is to respect the operating system’s “reduce motion” setting via the prefers-reduced-motion CSS media query. Design animations to be disabled or replaced with static equivalents when reduced motion is preferred.

Good Code Example

Using prefers-reduced-motion CSS media query:

Markup

/* Default state with animation */
.animated-element {
  transition: transform 0.5s ease-in-out;
}

.animated-element:hover {
  transform: scale(1.1) rotate(5deg); /* Example animation */
}

/* Disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none; /* Remove transition */
  }
  .animated-element:hover {
    transform: none; /* Remove hover transform */
    /* Optionally apply a subtle non-motion effect like slight brightness change */
    /* filter: brightness(1.1); */
  }

  /* Disable other animations like parallax scrolling effects */
  .parallax-section {
    background-attachment: scroll !important; /* Override fixed attachment */
  }
}

Bad Code Example

Animation triggers on scroll with no way to disable it:

Markup

/* Example: Elements sliding in on scroll */
.slide-in {
   opacity: 0;
   transform: translateX(-100px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-in.visible { /* Class added by JavaScript on scroll */
   opacity: 1;
   transform: translateX(0);
}
/* If there's no mechanism (like prefers-reduced-motion) to disable */
/* this scroll-triggered animation, it fails WCAG 2.2.6 (AAA). */

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult