Demo 08: Reduced Motion Support

CSS Media Query Approach

The prefers-reduced-motion media query allows you to disable or reduce animations and video autoplay for users who prefer less motion.

        /* Pause background video for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }

  .hero {
    background-image: url('hero-poster.jpg');
    background-size: cover;
    background-position: center;
  }
}
      

How to test: Enable "Reduce motion" in your operating system settings:

macOS: System Settings → Accessibility → Display → Reduce motion
Windows: Settings → Ease of Access → Display → Show animations
iOS: Settings → Accessibility → Motion → Reduce Motion

JavaScript Enhancement

You can also check the preference in JavaScript and provide manual controls.

Current preference: Checking...

        // Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const video = document.querySelector('.hero__video');

if (prefersReducedMotion) {
  video.pause();
  video.currentTime = 0; // Show first frame
} else {
  video.// Also provide a manual toggle
const toggleBtn = document.querySelector('.video-toggle');
toggleBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    toggleBtn.textContent = 'Pause Background';
    toggleBtn.setAttribute('aria-pressed', 'true');
  } else {
    video.pause();
    toggleBtn.textContent = 'Play Background';
    toggleBtn.setAttribute('aria-pressed', 'false');
  }
});
      

Why This Matters

Motion sensitivity: Some users experience vestibular disorders, motion sickness, or seizures triggered by moving content. Always provide:

A way to pause/stop video
Respect for prefers-reduced-motion
Static fallback images