a11y: skip-link + focus-visible + reduced-motion

AgentGUI · AgentGUI · commit af4c8a8a5a11 · 2026-04-17T07:00:49.000Z
- Add skip-to-conversation link as first body child — keyboard users can jump past sidebar - Add :focus-visible outline for keyboard nav — visible focus ring was missing - Add @media (prefers-reduced-motion: reduce) — honor OS motion-reduction setting - .skip-link CSS: off-screen until focused, jumps to top with visible styling WCAG 2.4.1 (bypass blocks), 2.4.7 (focus visible), 2.3.3 (animation from interactions)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [Unreleased] - GUI a11y pass
+
+- index.html: remove `maximum-scale=1.0` and `user-scalable=no` from viewport (WCAG 1.4.4 — low-vision users need pinch-zoom)
+- index.html: add `theme-color` meta with light/dark media queries (native tab/chrome tinting on mobile)
+- index.html: add skip-to-conversation link as first body child for keyboard users
+- main.css: add `:focus-visible` outline for keyboard nav (previously no default visible focus ring)
+- main.css: add `@media (prefers-reduced-motion: reduce)` to collapse animations/transitions for users with vestibular disorders or motion-sensitivity OS setting
+- main.css: `.skip-link` styles (off-screen until focused)
+
 ## [Unreleased] - GUI observability + workflow-plugin fix
 
 - Fix regression from prior commit: workflow-plugin.js declared `dependencies: ['git','database']` but git plugin was deleted; plugin init failed with "Plugin git not found in registry". Removed unused git dep and stale binding.
diff --git a/static/css/main.css b/static/css/main.css
@@ -3248,4 +3248,37 @@
       color: var(--color-text);
       max-width: 120px;
     }
-
+
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--color-primary, #3b82f6);
+  color: #fff;
+  padding: 8px 16px;
+  z-index: 10000;
+  text-decoration: none;
+  border-radius: 0 0 4px 0;
+  font-weight: 600;
+}
+.skip-link:focus {
+  top: 0;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+@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;
+  }
+}
diff --git a/static/index.html b/static/index.html
@@ -43,6 +43,8 @@
   <link rel="stylesheet" href="/gm/css/tools-popup.css" media="print" onload="this.media='all'">
 </head>
 <body>
+  <a href="#app" class="skip-link">Skip to conversation</a>
+
   <!-- Sidebar overlay (mobile) -->
   <div class="sidebar-overlay" data-sidebar-overlay></div>
 
