Accessible motion and media

Motion & Media Accessibility

Animations, auto-playing carousels, background videos, SVGs, Canvas charts and audio/video players can create severe barriers for people with vestibular disorders, photosensitivity, cognitive attention differences, blindness or hearing loss if built without accessible controls and alternatives (WCAG 1.1.1, 1.2.1–1.2.5, 2.2.2, 2.3.1, 2.3.3).

1. Vestibular Safety & prefers-reduced-motion (WCAG 2.3.3)

• Respect OS motion preferences: always support @media (prefers-reduced-motion: reduce) in CSS and window.matchMedia('(prefers-reduced-motion: reduce)') in JavaScript animation engines (Web Animations API, GSAP, Framer Motion, requestAnimationFrame loops, smooth scrolling).
• Reduce spatial movement, preserve state feedback:
  • Disable parallax scrolling, scroll-hijacking, camera zooming/panning, infinite background loops, spinning loaders and elastic bounce effects when reduced motion is active.
  • Replace spatial slide/scale transitions with instant state changes or subtle opacity cross-fades (120ms–180ms) so the user still perceives state changes without vestibular triggers.
• Never preserve essential information in motion alone: if an animation shows that an item moved to a folder or a validation failed, pair it with a clear visual state and assistive-technology status feedback.

2. Pause, Stop, Hide & Flashing Limits (WCAG 2.2.2 & 2.3.1)

• Auto-playing motion > 5 seconds (WCAG 2.2.2): any auto-advancing carousel, ticker, background video or animated product demo that starts automatically, lasts more than 5 seconds and is presented alongside other content must provide a keyboard-accessible Pause/Stop control.
• Auto-rotating carousels: pause rotation immediately on :hover and :focus-within, and never move keyboard focus automatically when a slide advances in the background.
• No flashing thresholds (WCAG 2.3.1): never flash content more than 3 times in any 1-second period.

3. Images, Icons, SVG & Canvas Alternatives (WCAG 1.1.1)

Classify every non-text visual asset by its communicative purpose:

• Decorative visuals (ambient backgrounds, decorative icons next to text that already states the label): hide from assistive technology (alt="" on <img>, aria-hidden="true" focusable="false" on <svg>).
• Informative & functional icons/images:
  • An <img> conveying information gets a concise alt describing the meaning in context.
  • An <svg> acting as the sole content of a button/link gets aria-hidden="true", while the parent <button> or <a> carries aria-label="..." (most consistent across browser/screen-reader pairs).
  • Standalone informative <svg> diagrams use role="img" and aria-labelledby="title-id desc-id" referencing <title> and <desc> elements.
• Complex charts & <canvas> elements:
  • A <canvas> is a flat bitmap to assistive technology unless structured fallback content is provided.
  • Provide a concise summary via aria-label/aria-describedby plus an accessible HTML <table> representation (visible or toggleable) or keyboard-focusable data points so screen reader and keyboard users can inspect the same data values as sighted users.

4. Audio & Video Accessibility (WCAG 1.2 & 1.4.2)

• Never autoplay audio without explicit user initiation, or provide an immediate, first-stop keyboard control to mute/stop it (WCAG 1.4.2).
• Ensure media player controls (Play/Pause, Seek, Volume/Mute, Captions, Fullscreen) are native or full keyboard-accessible buttons with clear accessible names and current states.
• Support <track kind="captions"> for video with audio and transcripts for audio-only content.