From 217dd88f2553fedc026a9934e5555201cee05fda Mon Sep 17 00:00:00 2001
From: Max Ghenis <mghenis@gmail.com>
Date: Sat, 9 May 2026 00:01:17 -0400
Subject: [PATCH] A11y pass: WCAG 2.2 AA across the dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tokens (single CSS edit clears most contrast failures)
- Remap --color-text-muted from text-tertiary (#9CA3AF, 2.54:1) to
  gray-600 (#4B5563, 8.59:1). Eyebrow, stat labels, column headers,
  intervals, pending notes, etc. now all clear 4.5:1 at the small sizes
  we render them.
- Introduce --color-warning-text (#d9480f), --color-danger-text
  (#b91c1c), --color-success-text (primary-700). Badge variants now use
  text-warning-text / text-danger-text / text-success-text /
  text-primary-strong on -soft fills, all >=4.5:1.
- Active country pill, sensitivity pill, and active nav switch from
  bg-primary text-void / text-primary (~3.3-3.5:1) to bg-primary-strong
  text-white / text-primary-strong (>=7:1).

Document landmarks
- Each page now has an <h1> (sr-only on / and /paper so the existing
  visual hierarchy survives).
- <main id="main"> on both pages plus a "Skip to main content" link in
  layout.tsx (visually hidden until focused).
- Per-route metadata so /paper has a distinct browser tab title.

Focus and keyboard
- Global :focus-visible ring on every interactive element via
  globals.css, scoped to focus-visible so mouse clicks don't show it.
- Compact ViewSelector pills bumped to 24x24+ (WCAG 2.2 SC 2.5.8).
- Disabled sensitivity buttons use aria-disabled + click guard instead
  of the HTML disabled attr, so screen readers can read the title /
  context explaining why ("no UK rows under this slice; ..."). Active
  state strips aria-pressed when disabled.
- Hidden header chrome stays out of tab order (already correct);
  re-enables once visible.

Live regions and table semantics
- Leaderboard wrapped in role="region" aria-live="polite" with a
  status label that announces model count and active view. The grid
  uses role="row" / role="columnheader" / row-level aria-label so SR
  users hear "Rank N, model name, score X%".
- Bootstrap interval text now carries aria-label
  ("Rank 1 across bootstrap draws; 95% score interval ...") so it
  reads as a sentence, not opaque numbers.
- Open-set caveat is an <aside aria-labelledby> rather than the
  non-standard role="note".

Tooltip
- ExplanationTooltip now Escape-dismisses (returns focus to the
  trigger), drops aria-label that was double-naming the button, and
  removes pointer-events-none so a mouse user can hover into the
  tooltip to read long explanations. Keeps aria-expanded on the
  trigger.

Iframe (/paper)
- sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  loading="lazy" referrerPolicy="same-origin"; "Back to top" anchor
  outside the iframe so keyboard users can escape.

Reduced motion
- @media (prefers-reduced-motion: reduce) snaps all transitions and
  animations to instant. SiteHeader's scroll-progress hook detects
  the same and snaps to either expanded or collapsed instead of
  running RAF lerping.

Smaller fixes
- ProviderMark: role="img" + single aria-label (no double-name);
  uses currentColor so it stays legible on any surface.
- "by PolicyEngine" pill: dropped redundant aria-label/title that
  caused name-in-label mismatch with visible "by PolicyEngine".
- ScenarioExplorer <select> now has htmlFor/id linking to its label.
- <details> summaries get a rotating chevron; without one, screen
  readers and users with limited contrast had no disclosure cue.
- Heatmap legend gets an sr-only caption explaining color is a
  redundant cue and the printed % is the source of truth.
- Shuffle button single-named (dropped redundant title + sr-only span).

Verification
- bun run lint clean.
- bun run build clean (still ○ static).
- SSR HTML / contains: <h1 class="sr-only">, skip-to-content link,
  role=region/row/columnheader, aria-pressed="true" on the active
  country and sensitivity pills, aria-disabled on Binary-on-Global,
  aria-current on the in-section nav link.
- SSR HTML /paper contains: <h1 class="sr-only">, skip link, iframe
  with sandbox + loading="lazy".
---
 app/src/App.tsx                           |  9 ++-
 app/src/app/globals.css                   | 68 ++++++++++++++++++
 app/src/app/layout.tsx                    | 12 +++-
 app/src/app/paper/page.tsx                | 42 +++++++++--
 app/src/app/theme.css                     | 12 +++-
 app/src/components/ExplanationTooltip.tsx | 23 +++++-
 app/src/components/ModelLeaderboard.tsx   | 88 +++++++++++++++--------
 app/src/components/ProgramHeatmap.tsx     | 46 ++++++++----
 app/src/components/ProviderMark.tsx       | 32 +++------
 app/src/components/ScenarioExplorer.tsx   | 34 +++++----
 app/src/components/SiteHeader.tsx         | 28 ++++++--
 11 files changed, 300 insertions(+), 94 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index ad5662c..0cede40 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -172,8 +172,13 @@ export default function App() {
         activeNav={activeNav}
       />
 
-      <main className="max-w-7xl mx-auto px-4 sm:px-6">
-        <section id="models" className="pt-12 pb-16 sm:pt-16 sm:pb-20">
+      <main id="main" className="max-w-7xl mx-auto px-4 sm:px-6">
+        <h1 className="sr-only">PolicyBench leaderboard</h1>
+        <section
+          id="models"
+          aria-labelledby="leaderboard-heading"
+          className="pt-12 pb-16 sm:pt-16 sm:pb-20"
+        >
           <ModelLeaderboard
             data={data}
             selectedView={selectedView}
diff --git a/app/src/app/globals.css b/app/src/app/globals.css
index de84e54..2c9eef3 100644
--- a/app/src/app/globals.css
+++ b/app/src/app/globals.css
@@ -43,6 +43,51 @@ a {
   color: inherit;
 }
 
+/* Visible focus ring for every interactive element that doesn't define its own.
+   Uses :focus-visible so mouse clicks don't show the ring; keyboard / screen
+   reader navigation does. */
+:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
+  outline: 2px solid var(--color-primary-strong);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Skip-to-content link (visually hidden until focused). */
+.skip-to-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.5rem 0.75rem;
+  background: var(--color-bg);
+  color: var(--color-primary-strong);
+  border-radius: 0 0 8px 0;
+  border: 2px solid var(--color-primary-strong);
+  font-weight: 600;
+  z-index: 100;
+  transform: translateY(-200%);
+  transition: transform 120ms var(--ease-out);
+}
+
+.skip-to-content:focus,
+.skip-to-content:focus-visible {
+  transform: translateY(0);
+  outline: none;
+}
+
+/* Tailwind already ships .sr-only, but redefine here for safety in case the
+   Tailwind generator skips it. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 ::-webkit-scrollbar {
   width: 5px;
 }
@@ -99,6 +144,29 @@ a {
   animation: glow-pulse 4s ease-in-out infinite;
 }
 
+/* Respect prefers-reduced-motion: reduce. Snap to end states, no scroll
+   smoothing, no decorative pulses. The Hero's scroll-driven progress is
+   gated separately in JS so the header skips RAF work. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  html {
+    scroll-behavior: auto;
+  }
+
+  .animate-fade-up,
+  .glow-primary {
+    animation: none !important;
+  }
+}
+
 .eyebrow {
   font-family: var(--f-mono);
   font-size: 11px;
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index a3c96e1..1788381 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -2,7 +2,10 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "PolicyBench, by PolicyEngine",
+  title: {
+    default: "PolicyBench, by PolicyEngine",
+    template: "%s — PolicyBench",
+  },
   description:
     "Benchmarking no-tools policy calculation across frontier models.",
 };
@@ -14,7 +17,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="antialiased">{children}</body>
+      <body className="antialiased">
+        <a href="#main" className="skip-to-content">
+          Skip to main content
+        </a>
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/app/src/app/paper/page.tsx b/app/src/app/paper/page.tsx
index 9f20a38..6da38c9 100644
--- a/app/src/app/paper/page.tsx
+++ b/app/src/app/paper/page.tsx
@@ -1,10 +1,17 @@
 /* eslint-disable @next/next/no-img-element */
+import type { Metadata } from "next";
 import Link from "next/link";
 
 import SiteHeader from "../../components/SiteHeader";
 
 const SNAPSHOT_DATE_LABEL = "Snapshot 2026-05-01";
 
+export const metadata: Metadata = {
+  title: "Paper",
+  description:
+    "PolicyBench paper — frozen 2026-05-01 manuscript snapshot scored against PolicyEngine reference outputs.",
+};
+
 const manuscriptPaths = {
   pdf: "/paper/policybench.pdf",
   web: "/paper/web/index.html?v=20260501",
@@ -30,7 +37,8 @@ export default function PaperPage() {
   );
 
   return (
-    <main className="min-h-screen bg-void">
+    <main id="main" className="min-h-screen bg-void">
+      <h1 className="sr-only">PolicyBench paper</h1>
       <SiteHeader
         actionLink={{
           label: "Benchmark",
@@ -83,15 +91,41 @@ export default function PaperPage() {
           </Link>
         </div>
 
-        <section className="mt-8 overflow-hidden rounded-3xl border border-border bg-card">
-          <div className="border-b border-border px-5 py-3 text-sm text-text-secondary">
+        <section
+          aria-labelledby="manuscript-section-heading"
+          className="mt-8 overflow-hidden rounded-3xl border border-border bg-card"
+        >
+          <div
+            id="manuscript-section-heading"
+            className="border-b border-border px-5 py-3 text-sm text-text-secondary"
+          >
             Frozen manuscript snapshot
           </div>
           <iframe
             src={manuscriptPaths.web}
-            title="PolicyBench paper"
+            title="PolicyBench manuscript (embedded)"
+            loading="lazy"
+            sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+            referrerPolicy="same-origin"
             className="block h-[calc(100vh-16rem)] min-h-[720px] w-full border-0 bg-white"
           />
+          <div className="border-t border-border px-5 py-3 text-sm">
+            <a
+              href="#paper-top"
+              className="text-text-secondary hover:text-primary-strong"
+            >
+              ↑ Back to top
+            </a>
+            <span className="mx-2 text-text-muted" aria-hidden>
+              ·
+            </span>
+            <a
+              href={manuscriptPaths.web}
+              className="text-text-secondary hover:text-primary-strong"
+            >
+              Open manuscript in a new page
+            </a>
+          </div>
         </section>
       </div>
     </main>
diff --git a/app/src/app/theme.css b/app/src/app/theme.css
index 370a5fc..81afd92 100644
--- a/app/src/app/theme.css
+++ b/app/src/app/theme.css
@@ -9,7 +9,11 @@
 
   --color-text: var(--pe-color-text-primary);
   --color-text-secondary: var(--pe-color-text-secondary);
-  --color-text-muted: var(--pe-color-text-tertiary);
+  /* Was --pe-color-text-tertiary (#9CA3AF) which fails 4.5:1 on white at small
+     sizes. Switch to gray-600 (#4B5563), which clears 4.5:1 (8.59:1 actual). */
+  --color-text-muted: var(--pe-color-gray-600);
+  /* Reserve --color-text-muted-light for ≥18px decorative use only. */
+  --color-text-muted-light: var(--pe-color-text-tertiary);
 
   --color-primary: var(--pe-color-primary-500);
   --color-primary-strong: var(--pe-color-primary-700);
@@ -18,10 +22,16 @@
   --color-info-soft: color-mix(in srgb, var(--pe-color-info) 12%, var(--pe-color-bg-primary));
   --color-warning: var(--pe-color-warning);
   --color-warning-soft: color-mix(in srgb, var(--pe-color-warning) 14%, var(--pe-color-bg-primary));
+  /* Accessible warning text for use on white or warning-soft. */
+  --color-warning-text: var(--pe-color-text-warning);
   --color-danger: var(--pe-color-error);
   --color-danger-soft: color-mix(in srgb, var(--pe-color-error) 12%, var(--pe-color-bg-primary));
+  /* Accessible danger text (gray-700-tinted red). */
+  --color-danger-text: #b91c1c;
   --color-success: var(--pe-color-primary-600);
   --color-success-soft: color-mix(in srgb, var(--pe-color-primary-200) 68%, var(--pe-color-bg-primary));
+  /* Accessible success text matching success-soft fill at AA. */
+  --color-success-text: var(--pe-color-primary-700);
   --color-neutral: var(--pe-color-gray-600);
   --color-neutral-soft: color-mix(in srgb, var(--pe-color-border-light) 72%, var(--pe-color-bg-primary));
 
diff --git a/app/src/components/ExplanationTooltip.tsx b/app/src/components/ExplanationTooltip.tsx
index a32f1ab..cecacd0 100644
--- a/app/src/components/ExplanationTooltip.tsx
+++ b/app/src/components/ExplanationTooltip.tsx
@@ -22,6 +22,7 @@ export default function ExplanationTooltip({
   children?: ReactNode;
 }) {
   const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
   const [position, setPosition] = useState<TooltipPosition | null>(null);
   const tooltipId = useId();
@@ -40,13 +41,22 @@ export default function ExplanationTooltip({
       });
     };
 
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+
     updatePosition();
     window.addEventListener("scroll", updatePosition, true);
     window.addEventListener("resize", updatePosition);
+    document.addEventListener("keydown", onKeyDown);
 
     return () => {
       window.removeEventListener("scroll", updatePosition, true);
       window.removeEventListener("resize", updatePosition);
+      document.removeEventListener("keydown", onKeyDown);
     };
   }, [open]);
 
@@ -56,14 +66,15 @@ export default function ExplanationTooltip({
         ref={triggerRef}
         type="button"
         aria-describedby={open ? tooltipId : undefined}
-        aria-label={explanation}
+        aria-expanded={open}
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
         onFocus={() => setOpen(true)}
         onBlur={() => setOpen(false)}
-        className="inline-flex rounded-full border border-border px-1.5 py-0.5 text-[10px] leading-none text-text-muted transition-colors hover:border-primary/40 hover:text-text focus:border-primary/50 focus:text-text focus:outline-none cursor-help"
+        className="inline-flex rounded-full border border-border px-1.5 py-0.5 text-[10px] leading-none text-text-muted transition-colors hover:border-primary-strong/40 hover:text-text focus:border-primary-strong/60 focus:text-text cursor-help"
       >
         {children}
+        <span className="sr-only">{`: ${explanation}`}</span>
       </button>
       {open &&
         position &&
@@ -71,8 +82,14 @@ export default function ExplanationTooltip({
         createPortal(
           <div
             id={tooltipId}
+            ref={tooltipRef}
             role="tooltip"
-            className="pointer-events-none fixed z-[100] max-w-xs -translate-x-1/2 rounded-xl border border-border bg-surface px-3 py-2 text-left text-xs leading-relaxed text-text shadow-[0_12px_48px_rgba(0,0,0,0.35)]"
+            // Dropping pointer-events-none lets a mouse user move into the
+            // tooltip to read long explanations without it dismissing.
+            // We also keep the tooltip open while the user hovers it.
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+            className="fixed z-[100] max-w-xs -translate-x-1/2 rounded-xl border border-border bg-surface px-3 py-2 text-left text-xs leading-relaxed text-text shadow-[0_12px_48px_rgba(0,0,0,0.35)]"
             style={{
               top: position.top,
               left: position.left,
diff --git a/app/src/components/ModelLeaderboard.tsx b/app/src/components/ModelLeaderboard.tsx
index 886052a..1b4cdeb 100644
--- a/app/src/components/ModelLeaderboard.tsx
+++ b/app/src/components/ModelLeaderboard.tsx
@@ -34,11 +34,14 @@ function Badge({
   children: React.ReactNode;
   variant: "primary" | "warning" | "danger" | "success";
 }) {
+  // Use accessible text tokens (text-warning-text / text-danger-text /
+  // text-success-text / text-primary-strong) on -soft fills so badges
+  // clear 4.5:1 contrast at the 10px size we render them at.
   const styles = {
-    primary: "text-primary bg-primary-soft border-primary/15",
-    warning: "text-warning bg-warning-soft border-warning/15",
-    danger: "text-danger bg-danger-soft border-danger/15",
-    success: "text-success bg-success-soft border-success/15",
+    primary: "text-primary-strong bg-primary-soft border-primary/30",
+    warning: "text-warning-text bg-warning-soft border-warning/40",
+    danger: "text-danger-text bg-danger-soft border-danger/40",
+    success: "text-success-text bg-success-soft border-success/30",
   };
   return (
     <span
@@ -198,6 +201,7 @@ export default function ModelLeaderboard({
     <div>
       <div className="eyebrow mb-3 animate-fade-up">Leaderboard</div>
       <h2
+        id="leaderboard-heading"
         className="font-[family-name:var(--font-display)] text-4xl md:text-5xl text-text tracking-tight animate-fade-up"
         style={{ animationDelay: "80ms" }}
       >
@@ -218,23 +222,26 @@ export default function ModelLeaderboard({
         )}
       </p>
 
-      <div
-        className="mt-5 flex items-start gap-3 rounded-xl border border-warning/15 bg-warning-soft px-4 py-3 text-xs text-text-secondary animate-fade-up"
+      <aside
+        aria-labelledby="open-set-heading"
+        className="mt-5 flex items-start gap-3 rounded-xl border border-warning/30 bg-warning-soft px-4 py-3 text-xs text-text-secondary animate-fade-up"
         style={{ animationDelay: "180ms" }}
-        role="note"
       >
         <span
           aria-hidden
           className="mt-0.5 inline-flex h-2 w-2 shrink-0 rounded-full bg-warning"
         />
         <p>
-          <strong className="text-text">Open-set leaderboard.</strong> The
-          public scenario explorer exposes prompts and PolicyEngine reference
-          outputs, so future model releases or fine-tunes could learn from the
-          released cases. Treat this as a public preview; protected
-          held-out claims would require a separate rotating evaluation set.
+          <strong id="open-set-heading" className="text-text">
+            Open-set leaderboard.
+          </strong>{" "}
+          The public scenario explorer exposes prompts and PolicyEngine
+          reference outputs, so future model releases or fine-tunes could
+          learn from the released cases. Treat this as a public preview;
+          protected held-out claims would require a separate rotating
+          evaluation set.
         </p>
-      </div>
+      </aside>
 
       <div
         className="mt-5 flex flex-wrap items-center gap-3 animate-fade-up"
@@ -268,14 +275,20 @@ export default function ModelLeaderboard({
               <button
                 key={view.id}
                 type="button"
-                disabled={disabled}
-                onClick={() => setSensitivityView(view.id)}
-                aria-pressed={isActive && !disabled}
-                className={`rounded-full px-3 py-1 text-[11px] font-medium transition-colors ${
+                aria-disabled={disabled || undefined}
+                onClick={(event) => {
+                  if (disabled) {
+                    event.preventDefault();
+                    return;
+                  }
+                  setSensitivityView(view.id);
+                }}
+                aria-pressed={disabled ? undefined : isActive}
+                className={`rounded-full px-3 py-1.5 text-[11px] font-medium transition-colors ${
                   isActive && !disabled
-                    ? "bg-primary text-void"
+                    ? "bg-primary-strong text-white"
                     : disabled
-                      ? "cursor-not-allowed text-text-muted opacity-60"
+                      ? "cursor-not-allowed text-text-muted line-through"
                       : "text-text-secondary hover:text-text"
                 }`}
                 title={
@@ -297,15 +310,13 @@ export default function ModelLeaderboard({
             type="checkbox"
             checked={showIntervals}
             onChange={(event) => setShowIntervals(event.target.checked)}
-            className="h-3 w-3 rounded border-border accent-primary"
-            aria-label="Show 95% bootstrap intervals"
+            className="h-3.5 w-3.5 rounded border-border accent-primary-strong"
           />
           <span>Show 95% intervals</span>
         </label>
       </div>
       {sensitivityUnsupportedForView && (
         <p
-          role="note"
           className="mt-3 text-[11px] text-text-muted animate-fade-up"
           style={{ animationDelay: "220ms" }}
         >
@@ -326,18 +337,30 @@ export default function ModelLeaderboard({
         </p>
       )}
 
-      <div className="mt-8 space-y-3">
+      <div
+        role="region"
+        aria-labelledby="leaderboard-heading"
+        aria-live="polite"
+        aria-atomic="false"
+        className="mt-8 space-y-3"
+      >
+        <p className="sr-only" role="status">
+          {`${noTools.length} models, ranked by ${activeView.label} score (${
+            isGlobal ? "global" : selectedView === "us" ? "United States" : "United Kingdom"
+          })`}
+        </p>
         <div
+          role="row"
           className={`hidden gap-3 px-4 text-[10px] uppercase tracking-[0.14em] text-text-muted font-medium md:grid ${
             isGlobal ? "md:grid-cols-12" : "md:grid-cols-12"
           }`}
         >
-          <div className="col-span-1">#</div>
-          <div className={isGlobal ? "col-span-5" : "col-span-5"}>Model</div>
-          <div className="col-span-3 text-right">
+          <div role="columnheader" className="col-span-1">#</div>
+          <div role="columnheader" className={isGlobal ? "col-span-5" : "col-span-5"}>Model</div>
+          <div role="columnheader" className="col-span-3 text-right">
             {isGlobal ? "Global score" : "Score"}
           </div>
-          <div className="col-span-3 text-right">
+          <div role="columnheader" className="col-span-3 text-right">
             {isGlobal ? "Country scores" : "MAE"}
           </div>
         </div>
@@ -358,9 +381,14 @@ export default function ModelLeaderboard({
           const scoreRange = interval
             ? `${interval.lower.toFixed(1)}-${interval.upper.toFixed(1)}`
             : null;
+          const intervalAriaLabel = interval
+            ? `${rankRange} across bootstrap draws; 95% score interval ${interval.lower.toFixed(1)}% to ${interval.upper.toFixed(1)}%`
+            : undefined;
           return (
             <div
               key={m.model}
+              role="row"
+              aria-label={`Rank ${i + 1}, ${MODEL_LABELS[m.model] || m.model}, score ${m.score.toFixed(1)}%`}
               className="card card-hover px-4 py-4 animate-fade-up"
               style={{ animationDelay: `${240 + i * 80}ms` }}
             >
@@ -386,7 +414,10 @@ export default function ModelLeaderboard({
                       </div>
                     )}
                     {rankRange && (
-                      <div className="mt-1 pl-6 text-[10px] font-[family-name:var(--font-mono)] text-text-muted">
+                      <div
+                        className="mt-1 pl-6 text-[10px] font-[family-name:var(--font-mono)] text-text-muted"
+                        aria-label={intervalAriaLabel}
+                      >
                         {rankRange} · 95% {scoreRange}
                       </div>
                     )}
@@ -435,6 +466,7 @@ export default function ModelLeaderboard({
                     <div
                       className="text-[10px] text-text-muted font-[family-name:var(--font-mono)] mt-1"
                       title="Household-resampling 95% interval (400 draws, seed 42)"
+                      aria-label={intervalAriaLabel}
                     >
                       {rankRange} · 95% {scoreRange}
                     </div>
diff --git a/app/src/components/ProgramHeatmap.tsx b/app/src/components/ProgramHeatmap.tsx
index 65d57a7..dd5fe37 100644
--- a/app/src/components/ProgramHeatmap.tsx
+++ b/app/src/components/ProgramHeatmap.tsx
@@ -142,30 +142,42 @@ export default function ProgramHeatmap({ data }: { data: BenchData }) {
       </div>
 
       {/* Legend */}
-      <div className="flex items-center gap-6 mt-6 text-[10px] uppercase tracking-[0.14em] text-text-muted">
-        <div className="flex items-center gap-1.5">
+      <div
+        role="list"
+        aria-label="Score color scale: cells color-code each row's percent score; the printed percentage in the cell is the source of truth"
+        className="flex items-center gap-6 mt-6 text-[10px] uppercase tracking-[0.14em] text-text-muted"
+      >
+        <span className="sr-only">
+          Cells use color as a redundant cue; the percentage shown in each
+          cell is the actual benchmark score.
+        </span>
+        <div role="listitem" className="flex items-center gap-1.5">
           <span
+            aria-hidden
             className="w-3 h-3 rounded"
             style={{ backgroundColor: cellColor(40) }}
           />
           &lt;50%
         </div>
-        <div className="flex items-center gap-1.5">
+        <div role="listitem" className="flex items-center gap-1.5">
           <span
+            aria-hidden
             className="w-3 h-3 rounded"
             style={{ backgroundColor: cellColor(60) }}
           />
           50–70%
         </div>
-        <div className="flex items-center gap-1.5">
+        <div role="listitem" className="flex items-center gap-1.5">
           <span
+            aria-hidden
             className="w-3 h-3 rounded"
             style={{ backgroundColor: cellColor(75) }}
           />
           70–80%
         </div>
-        <div className="flex items-center gap-1.5">
+        <div role="listitem" className="flex items-center gap-1.5">
           <span
+            aria-hidden
             className="w-3 h-3 rounded"
             style={{ backgroundColor: cellColor(92) }}
           />
@@ -191,17 +203,25 @@ export default function ProgramHeatmap({ data }: { data: BenchData }) {
             return (
               <details
                 key={variable}
-                className="card px-5 py-4 open:border-primary/30"
+                className="card px-5 py-4 open:border-primary/30 group"
               >
                 <summary className="flex cursor-pointer list-none items-start justify-between gap-4">
-                  <div className="min-w-0">
-                    <div className="text-text text-sm font-medium">
-                      {getVariableLabel(variable, country)}
+                  <div className="min-w-0 flex items-start gap-2">
+                    <span
+                      aria-hidden
+                      className="mt-0.5 inline-block text-text-muted transition-transform group-open:rotate-90"
+                    >
+                      ▸
+                    </span>
+                    <div className="min-w-0">
+                      <div className="text-text text-sm font-medium">
+                        {getVariableLabel(variable, country)}
+                      </div>
+                      <p className="mt-1 text-sm leading-relaxed text-text-secondary">
+                        {explainer?.summary ??
+                          "This target combines multiple policy rules, and errors usually come from positive cases rather than zero cases."}
+                      </p>
                     </div>
-                    <p className="mt-1 text-sm leading-relaxed text-text-secondary">
-                      {explainer?.summary ??
-                        "This target combines multiple policy rules, and errors usually come from positive cases rather than zero cases."}
-                    </p>
                   </div>
                   <div className="shrink-0 rounded-full border border-border bg-surface px-3 py-1 text-[10px] uppercase tracking-[0.14em] text-text-muted font-medium">
                     Avg {avg.toFixed(0)}%
diff --git a/app/src/components/ProviderMark.tsx b/app/src/components/ProviderMark.tsx
index 101dc7c..3d19562 100644
--- a/app/src/components/ProviderMark.tsx
+++ b/app/src/components/ProviderMark.tsx
@@ -22,34 +22,20 @@ export default function ProviderMark({
 
   const label = PROVIDER_LABELS[provider];
 
+  // role="img" + aria-label gives screen readers the provider name once.
+  // Inner SVGs stay aria-hidden so they don't double-announce. Inheriting
+  // currentColor keeps the icon legible if it's ever rendered on a dark
+  // surface (e.g. an active pill).
   return (
     <span
-      className={`inline-flex items-center justify-center ${className}`}
+      role="img"
       aria-label={label}
-      title={label}
+      className={`inline-flex items-center justify-center text-text ${className}`}
     >
-      {provider === "anthropic" && (
-        <Anthropic
-          size={size}
-          style={{ color: "#191919" }}
-          aria-hidden="true"
-        />
-      )}
+      {provider === "anthropic" && <Anthropic size={size} color="currentColor" aria-hidden="true" />}
       {provider === "google" && <Google.Color size={size} aria-hidden="true" />}
-      {provider === "openai" && (
-        <OpenAI
-          size={size}
-          style={{ color: "#000000" }}
-          aria-hidden="true"
-        />
-      )}
-      {provider === "xai" && (
-        <XAI
-          size={size}
-          style={{ color: "#000000" }}
-          aria-hidden="true"
-        />
-      )}
+      {provider === "openai" && <OpenAI size={size} color="currentColor" aria-hidden="true" />}
+      {provider === "xai" && <XAI size={size} color="currentColor" aria-hidden="true" />}
     </span>
   );
 }
diff --git a/app/src/components/ScenarioExplorer.tsx b/app/src/components/ScenarioExplorer.tsx
index 636bf5c..0bb6384 100644
--- a/app/src/components/ScenarioExplorer.tsx
+++ b/app/src/components/ScenarioExplorer.tsx
@@ -110,14 +110,18 @@ export default function ScenarioExplorer({
 
       <div className="mt-8 flex flex-wrap items-end gap-4">
         <div className="min-w-0 flex-1">
-          <label className="block text-[10px] uppercase tracking-[0.14em] text-text-muted font-medium mb-1.5">
+          <label
+            htmlFor="scenario-select"
+            className="block text-[10px] uppercase tracking-[0.14em] text-text-muted font-medium mb-1.5"
+          >
             Household
           </label>
           <div className="flex items-center gap-2">
             <select
+              id="scenario-select"
               value={resolvedScenarioId}
               onChange={(e) => setSelectedScenario(e.target.value)}
-              className="min-w-0 flex-1 bg-surface border border-border text-text text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-primary/50 font-[family-name:var(--font-mono)]"
+              className="min-w-0 flex-1 bg-surface border border-border text-text text-sm rounded-lg px-3 py-2 focus:border-primary-strong/60 font-[family-name:var(--font-mono)]"
             >
               {scenarioIds.map((id) => {
                 const s = data.scenarios[id];
@@ -135,8 +139,7 @@ export default function ScenarioExplorer({
               onClick={handleShuffle}
               disabled={scenarioIds.length < 2}
               aria-label="Shuffle household"
-              title="Shuffle household"
-              className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-border bg-surface text-text-secondary transition-colors hover:border-primary/50 hover:text-text disabled:cursor-not-allowed disabled:opacity-50"
+              className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-border bg-surface text-text-secondary transition-colors hover:border-primary-strong/50 hover:text-text disabled:cursor-not-allowed disabled:opacity-50"
             >
               <svg
                 aria-hidden="true"
@@ -154,7 +157,6 @@ export default function ScenarioExplorer({
                 <path d="M15 15 21 21" />
                 <path d="M4 4 9 9" />
               </svg>
-              <span className="sr-only">Shuffle household</span>
             </button>
           </div>
         </div>
@@ -208,16 +210,24 @@ export default function ScenarioExplorer({
 
       {activePrompt && (
         <details
-          className="card px-5 py-4 mt-6 animate-fade-up"
+          className="card px-5 py-4 mt-6 animate-fade-up group"
           style={{ animationDelay: "280ms" }}
         >
           <summary className="cursor-pointer list-none flex flex-wrap items-center justify-between gap-3">
-            <div>
-              <div className="text-[10px] uppercase tracking-[0.14em] text-text-muted font-medium">
-                Exact prompt
-              </div>
-              <div className="text-text text-sm mt-1">
-                Full household batch contract for all benchmark outputs
+            <div className="flex items-start gap-2">
+              <span
+                aria-hidden
+                className="mt-0.5 inline-block text-text-muted transition-transform group-open:rotate-90"
+              >
+                ▸
+              </span>
+              <div>
+                <div className="text-[10px] uppercase tracking-[0.14em] text-text-muted font-medium">
+                  Exact prompt
+                </div>
+                <div className="text-text text-sm mt-1">
+                  Full household batch contract for all benchmark outputs
+                </div>
               </div>
             </div>
             <div className="text-text-muted text-xs">
diff --git a/app/src/components/SiteHeader.tsx b/app/src/components/SiteHeader.tsx
index 3cfda42..92dc480 100644
--- a/app/src/components/SiteHeader.tsx
+++ b/app/src/components/SiteHeader.tsx
@@ -26,8 +26,11 @@ function ViewSelector({
   views: ViewKey[];
   compact?: boolean;
 }) {
+  // Compact mode is used in the scrolled state. We keep the same vertical
+  // touch target as the expanded mode (~28px including padding+border) so
+  // pills clear WCAG 2.2 SC 2.5.8 (24×24 minimum).
   const pill = compact
-    ? "rounded-full text-[10px] px-2.5 py-1 font-medium transition-colors"
+    ? "rounded-full text-[11px] px-3 py-1.5 font-medium transition-colors"
     : "rounded-full px-3 py-1.5 text-xs font-medium transition-colors sm:px-4";
   return (
     <div
@@ -43,7 +46,7 @@ function ViewSelector({
           aria-pressed={selectedView === view}
           className={`${pill} ${
             selectedView === view
-              ? "bg-primary text-void"
+              ? "bg-primary-strong text-white"
               : "text-text-secondary hover:text-text"
           }`}
         >
@@ -59,6 +62,13 @@ function getScrollProgress(threshold: number) {
   return Math.min(1, Math.max(0, window.scrollY / threshold));
 }
 
+function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 function useScrollProgress(threshold = 80, enabled = true) {
   const [progress, setProgress] = useState(() =>
     enabled ? getScrollProgress(threshold) : 0,
@@ -67,6 +77,13 @@ function useScrollProgress(threshold = 80, enabled = true) {
 
   useEffect(() => {
     if (!enabled) return;
+    if (prefersReducedMotion()) {
+      // Skip scroll-driven animation entirely; snap to either state.
+      const snap = () => setProgress(getScrollProgress(threshold) > 0.5 ? 1 : 0);
+      snap();
+      window.addEventListener("scroll", snap, { passive: true });
+      return () => window.removeEventListener("scroll", snap);
+    }
     const onScroll = () => {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = requestAnimationFrame(() => {
@@ -183,9 +200,10 @@ export default function SiteHeader({
                     key={item.id}
                     href={`#${item.id}`}
                     tabIndex={navVisible ? 0 : -1}
+                    aria-current={activeNav === item.id ? "true" : undefined}
                     className={`px-2.5 py-2 text-[11px] font-medium tracking-wider uppercase border-b-2 sm:px-3 ${
                       activeNav === item.id
-                        ? "border-primary text-primary"
+                        ? "border-primary-strong text-primary-strong"
                         : "border-transparent text-text-secondary hover:text-text"
                     }`}
                   >
@@ -239,9 +257,7 @@ export default function SiteHeader({
 
           <a
             href="https://policyengine.org"
-            className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-card px-2.5 py-1 text-[11px] font-medium uppercase tracking-wider text-text-secondary transition-colors hover:border-primary/40 hover:text-primary"
-            aria-label="By PolicyEngine"
-            title="By PolicyEngine"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-text-secondary transition-colors hover:border-primary-strong/40 hover:text-primary-strong"
           >
             <span>by</span>
             <img