Follow-up to #1196 (which proposed an explicit on-site motion toggle). We decided not to build a toggle — the best practice is to honor the OS-level prefers-reduced-motion rather than ship a redundant in-page control (see the closing discussion on #1196). This issue captures the two genuine gaps that surfaced.
Background — what already honors prefers-reduced-motion
Gap 1 — two motion sources still ignore the preference
Suggested approach: a tiny shared helper prefersReducedMotion() that both consult (and that carousel.js / project-listing-filter.js can reuse), so the logic lives in one place.
Gap 2 — WCAG 2.2.2 (Pause, Stop, Hide), Level A
2.2.2 requires a mechanism to pause/stop auto-moving content that runs > 5s, for all users — not only those who set prefers-reduced-motion. This is in scope for the site's WCAG 2.0 AA target (AA includes A). Two pieces of content qualify:
Note: this is a pause control, distinct from the rejected motion toggle.
Sequencing
Best done after Track A (#1288) wraps, since that consolidates motion into our own vanilla JS (which can consult the shared helper) rather than Bootstrap. Gap 1 is small and high-value; Gap 2's carousel piece is mostly done, the video piece is the real remaining work.
Refs #1196, #1288.
Follow-up to #1196 (which proposed an explicit on-site motion toggle). We decided not to build a toggle — the best practice is to honor the OS-level
prefers-reduced-motionrather than ship a redundant in-page control (see the closing discussion on #1196). This issue captures the two genuine gaps that surfaced.Background — what already honors
prefers-reduced-motiondesign-tokens.csszeroes out CSS animations/transitions.project-listing-filter.js.carousel.js(no autoplay / no crossfade under reduced motion) — added in Replace Bootstrap carousel JS with a vanilla crossfade carousel (#1288) #1293.Gap 1 — two motion sources still ignore the preference
website/templates/website/base.html,<video … autoplay muted loop>): underprefers-reduced-motion: reduce, don't autoplay — show the poster frame and.pause(). (CSS can't stop video playback, so this needs JS + aposter.)website/static/website/js/makelab-logo.js): render a static frame / skip the animation loop under reduced motion.Suggested approach: a tiny shared helper
prefersReducedMotion()that both consult (and thatcarousel.js/project-listing-filter.jscan reuse), so the logic lives in one place.Gap 2 — WCAG 2.2.2 (Pause, Stop, Hide), Level A
2.2.2 requires a mechanism to pause/stop auto-moving content that runs > 5s, for all users — not only those who set
prefers-reduced-motion. This is in scope for the site's WCAG 2.0 AA target (AA includes A). Two pieces of content qualify:Note: this is a pause control, distinct from the rejected motion toggle.
Sequencing
Best done after Track A (#1288) wraps, since that consolidates motion into our own vanilla JS (which can consult the shared helper) rather than Bootstrap. Gap 1 is small and high-value; Gap 2's carousel piece is mostly done, the video piece is the real remaining work.
Refs #1196, #1288.