Docs

Appearance

Reduced Motion Tool ​

Overview ​

The Reduced Motion tool minimizes or eliminates animations, transitions, and motion effects that can cause discomfort, nausea, or seizures. This tool is crucial for users with vestibular disorders, motion sensitivity, or those who find animations distracting.

Features ​

  • System Preference Detection: Automatically respects prefers-reduced-motion media query
  • Universal Animation Control: Affects CSS animations, transitions, and JavaScript-based motion
  • Video Autoplay Control: Prevents videos from autoplaying and requires user interaction
  • Dynamic Content Monitoring: Handles videos added to the page after initial load
  • Override Capability: Allows users to override system settings if needed
  • Visual Feedback: Shows when system preferences are being overridden

Settings ​

StateDescription
DisabledNormal motion and animations are allowed
EnabledReduces or eliminates all animations and controls video autoplay

System Integration

The tool automatically enables when the system prefers-reduced-motion setting is detected. When this happens, the isSystemOverride indicator shows in the UI to inform users that system preferences are being respected.

Usage ​

  1. Click the Reduced Motion button in the accessibility toolbar
  2. The tool automatically detects your system's motion preferences
  3. Override system settings by toggling the tool manually
  4. An indicator shows when system preferences are being respected
  5. All animations, transitions, and video autoplay are controlled

Accessibility Benefits ​

  • Vestibular Disorder Support: Prevents motion-induced nausea and discomfort
  • Seizure Prevention: Reduces risk of motion-triggered seizures
  • ADHD Assistance: Eliminates distracting animations that break concentration
  • Anxiety Reduction: Removes overwhelming visual stimuli
  • Cognitive Support: Simplifies interface by reducing visual complexity
  • Battery Conservation: Reduces device power consumption

Motion Types Affected ​

CSS Animations and Transitions ​

  • Animation Duration: Set to 0 seconds (animation-duration: 0s !important)
  • Animation Delay: Removed (animation-delay: 0s !important)
  • Animation Iterations: Limited to 1 (animation-iteration-count: 1 !important)
  • Transition Duration: Set to 0 seconds (transition-duration: 0s !important)
  • Transition Delay: Removed (transition-delay: 0s !important)
  • Scroll Behavior: Changed to instant (scroll-behavior: auto !important)

Video Controls ​

  • Autoplay Prevention: Removes autoplay attribute from video elements
  • Playsinline Control: Removes playsinline attribute
  • User Interaction Tracking: Videos only play after explicit user interaction
  • Dynamic Video Monitoring: Handles videos added via JavaScript after page load
  • Interaction Window: 100ms grace period after user interaction for programmatic play

JavaScript Motion ​

All CSS-based animations and transitions are affected through the applied styles, which impacts:

  • Scroll Animations: Smooth scrolling effects
  • Hover Effects: Interactive motion on element interaction
  • Transform Animations: Rotation, scaling, and movement effects
  • Opacity Changes: Fade in/out effects

Technical Implementation ​

The tool uses:

  • CSS Class Toggle: Applies ada-reduce-motion class to <html> element
  • Universal CSS Selectors: Targets all elements with *, *::before, *::after
  • Important Declarations: Uses !important to override existing styles
  • MutationObserver: Monitors for dynamically added video elements
  • Event Listeners: Tracks user interactions to allow video playback

API Usage Example ​

The Reduced Motion tool can be programmatically controlled using the widget API:

javascript
// Basic activation
window.BrowseAidWidget.api.enableTool('reduced-motion');

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('reduced-motion');
console.log('Reduced Motion is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('reduced-motion');
console.log('Current settings:', settings);
console.log('System override active:', settings.isSystemOverride);

// Disable the tool
window.BrowseAidWidget.api.disableTool('reduced-motion');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'reduced-motion') {
    console.log('Reduced Motion settings changed:', settings);
    if (settings.isSystemOverride) {
      console.log('Note: System motion preferences are being respected');
    }
  }
});

Configuration Options ​

OptionTypeValuesDefaultDescription
enabledbooleantrue/falsefalseEnables or disables the tool
isSystemOverridebooleantrue/falsefalseRead-only: Indicates if system preference is active

Settings Object Structure ​

typescript
interface ReducedMotionToolSettings {
  enabled: boolean
  isSystemOverride?: boolean  // Read-only, set automatically
}

Usage Patterns ​

javascript
// Check if system prefers reduced motion
const systemPrefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (systemPrefersReduced) {
  // Tool will automatically enable and set isSystemOverride to true
  console.log('System preference detected - tool will auto-enable');
} else {
  // Manual control available
  window.BrowseAidWidget.api.enableTool('reduced-motion');
}

// Monitor system preference changes
window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', (e) => {
  if (e.matches) {
    console.log('System now prefers reduced motion');
    // Tool will automatically enable with isSystemOverride: true
  } else {
    console.log('System motion preference changed');
    // Tool will update isSystemOverride to false
  }
});

// Reset to default state
window.BrowseAidWidget.api.updateTool('reduced-motion', {
  enabled: false
});

// Check current state
const currentState = window.BrowseAidWidget.api.getToolState('reduced-motion');
if (currentState.isSystemOverride) {
  console.log('Tool is currently following system preferences');
}

Video Control Examples ​

javascript
// The tool automatically handles video controls, but you can check state:
window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'reduced-motion' && settings.enabled) {
    console.log('Videos will now require user interaction to play');

    // All videos on the page will:
    // - Have autoplay attribute removed
    // - Have playsinline attribute removed
    // - Be paused if currently playing
    // - Only play after user clicks/touches them
  }
});

// Note: Video behavior is handled automatically by the tool
// No manual video control through the API is needed

Best Practices ​

javascript
// Respect user preferences
function initializeMotionSettings() {
  // The tool handles system detection automatically
  // Just listen for changes if needed
  window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
    if (toolName === 'reduced-motion') {
      updateUIForMotionState(settings.enabled);
    }
  });
}

// Update your application based on motion state
function updateUIForMotionState(motionReduced) {
  if (motionReduced) {
    // Your app should also reduce motion
    document.body.classList.add('no-animations');
  } else {
    document.body.classList.remove('no-animations');
  }
}

// Clean up when done
function cleanup() {
  window.BrowseAidWidget.api.disableTool('reduced-motion');
}

Video Interaction Requirement

When Reduced Motion is enabled, all videos require explicit user interaction (click or touch) to play. This includes videos that had autoplay enabled before the tool was activated. The tool maintains a 100ms grace period after user interaction to allow related programmatic play actions.

Dynamic Content Support

The tool automatically monitors for new video elements added to the page via JavaScript and applies motion reduction settings to them. This ensures consistent behavior even with dynamically loaded content.

BrowseAid Documentation

Copyright © 2025 BrowseAid