wallco.ai · WCAG 2.3.3 prefers-reduced-motion shotgun — neutralizes all transitions + keyframe animations site-wide for OS-level reduce-motion users; hero crossfade (1.2s) / card-room overlay (360ms) / chat thinking-dot bounce / skip-link slide all collapse to 1ms; verified via playwright reducedMotion:reduce vs no-preference — design-card 0.18s→1e-05s, card-room 0.36s→1e-05s, skip-link 0.16s→0s

450155ec68a45a1ff829f9e157c71bcbf8a94b15 · 2026-05-12 07:19:54 -0700 · SteveStudio2

Files touched

M public/css/site.css

Diff

commit 450155ec68a45a1ff829f9e157c71bcbf8a94b15
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue May 12 07:19:54 2026 -0700

    wallco.ai · WCAG 2.3.3 prefers-reduced-motion shotgun — neutralizes all transitions + keyframe animations site-wide for OS-level reduce-motion users; hero crossfade (1.2s) / card-room overlay (360ms) / chat thinking-dot bounce / skip-link slide all collapse to 1ms; verified via playwright reducedMotion:reduce vs no-preference — design-card 0.18s→1e-05s, card-room 0.36s→1e-05s, skip-link 0.16s→0s
---
 public/css/site.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/public/css/site.css b/public/css/site.css
index c0d53e9..c22c02d 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -321,8 +321,25 @@ main { padding-top: 73px; }
 }
 .design-card.has-room:hover .card-room-badge,
 .design-card.has-room:focus-visible .card-room-badge { opacity: 0; }
+/* ── A11Y: prefers-reduced-motion sweep (WCAG 2.3.3, vestibular)
+   Shotgun-neutralizes every transition + keyframe animation across the site
+   for users who've set their OS to reduce motion (iOS Settings → Accessibility
+   → Motion, macOS System Settings → Accessibility → Display → Reduce Motion,
+   GNOME, etc.). Long crossfades (hero rotation 1.2s, room overlay 360ms,
+   chat thinking-dot bounce) are the highest-impact triggers — this collapses
+   them to 1ms instantly. Per-component opt-OUT via `transition-duration:
+   inherit; @media (prefers-reduced-motion: no-preference) { ... }` if any
+   future motion is genuinely essential. */
 @media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
   .card-room { transition: none; }
+  /* Skip-link slide-in too — it should pop into view, not glide. */
+  .skip-link { transition: none !important; }
 }
 
 .card-meta {

← 2acf00a wallco.ai · WCAG 2.4.1 skip-to-main link in htmlHeader() — f · back to Wallco Ai · security — prompt-injection hardening on Ollama chat path. A 324afdd →