makeabilitylab · jonfroehlich · Jun 22, 2026 · Jun 22, 2026
diff --git a/src/apps/basic/Basic/index.html b/src/apps/basic/Basic/index.html
@@ -5,10 +5,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Drawing</title>
+  <style>
+    /* Visually hidden: removed from view but kept in the accessibility tree so
+       the <h1> page heading is available for screen-reader navigation. */
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  </style>
 </head>
 
 <body>
   <main>
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">My Drawing</h1>
     <canvas id="myCanvas" role="img"
       aria-label="A simple canvas sketch"></canvas>
   </main>

diff --git a/src/apps/basic/BouncyBall/bouncy_ball.js b/src/apps/basic/BouncyBall/bouncy_ball.js
@@ -1,6 +1,12 @@
 const canvas = document.getElementById('myCanvas');
 const ctx = canvas.getContext('2d');
 
+// Respect the user's "reduce motion" OS/browser setting (accessibility). When
+// it's on, we draw the ball once and don't start the bouncing loop.
+const reducedMotionQuery =
+  window.matchMedia?.('(prefers-reduced-motion: reduce)');
+let rafId = 0;
+
 // Ball properties
 const ballRadius = canvas.width * 0.1;
 const ballColor = 'red';
@@ -43,7 +49,25 @@ function animate() {
 
   drawBall();
   moveBall();
-  requestAnimationFrame(animate);
+  rafId = requestAnimationFrame(animate);
+}
+
+// Draw the ball once, without moving it (used when motion is reduced).
+function drawStaticFrame() {
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  drawBall();
+}
+
+// Start bouncing — or, if the user prefers reduced motion, just draw the ball
+// as a single static frame instead of animating.
+function start() {
+  cancelAnimationFrame(rafId);
+  if (reducedMotionQuery?.matches) {
+    drawStaticFrame();
+  } else {
+    rafId = requestAnimationFrame(animate);
+  }
 }
 
 function resizeCanvas() {
@@ -61,8 +85,15 @@ function resizeCanvas() {
   maxSpeed = Math.max(3, canvas.height * 0.01);
   xSpeed = Math.random() * maxSpeed * initialDir; // Random x velocity
   ySpeed = Math.random() * maxSpeed * initialDir; // Random y velocity
+
+  // No loop runs under reduced motion, so repaint the static frame ourselves.
+  if (reducedMotionQuery?.matches) drawStaticFrame();
 }
 
 window.addEventListener('resize', resizeCanvas);
 resizeCanvas();
-animate();
+start();
+
+// If the user toggles "reduce motion" while the page is open, react live
+// (start bouncing, or freeze to the static frame) without a reload.
+reducedMotionQuery?.addEventListener?.('change', start);
diff --git a/src/apps/basic/BouncyBall/index.html b/src/apps/basic/BouncyBall/index.html
@@ -11,6 +11,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Bouncy Ball</h1>
     <canvas id="myCanvas" role="img"
       aria-label="Animation: a ball bouncing around inside the canvas"></canvas>
   </main>

diff --git a/src/apps/basic/BouncyBall/style.css b/src/apps/basic/BouncyBall/style.css
@@ -15,3 +15,18 @@ canvas {
   margin: 20px;
   height: calc(100vh - 40px); /* Subtract 20px from top and 20px from bottom */
 }
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/apps/graphics/LineSegment1-Basic/index.html b/src/apps/graphics/LineSegment1-Basic/index.html
@@ -18,6 +18,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Line Segment 1: Basic</h1>
     <canvas id="myCanvas" role="img"
       aria-label="A line segment drawn on a canvas, labeled with its angle and magnitude"></canvas>
   </main>

diff --git a/src/apps/graphics/LineSegment1-Basic/style.css b/src/apps/graphics/LineSegment1-Basic/style.css
@@ -9,3 +9,18 @@ canvas {
   width: 400px;
   height: 400px;
 }
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/apps/graphics/LineSegment2-Interactive/index.html b/src/apps/graphics/LineSegment2-Interactive/index.html
@@ -18,6 +18,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Line Segment 2: Interactive</h1>
     <canvas id="myCanvas" role="img"
       aria-label="Two line segments on a canvas; drag an endpoint to change the angle between them, shown with labeled arcs"></canvas>
   </main>

diff --git a/src/apps/graphics/LineSegment2-Interactive/style.css b/src/apps/graphics/LineSegment2-Interactive/style.css
@@ -9,3 +9,18 @@ canvas {
   width: 400px;
   height: 400px;
 }
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/apps/makelogo/MakeabilityLabLogo-AutoResize/index.html b/src/apps/makelogo/MakeabilityLabLogo-AutoResize/index.html
@@ -18,6 +18,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Makeability Lab Logo: Autoresize</h1>
     <canvas id="myCanvas" role="img"
       aria-label="The Makeability Lab logo, automatically resized to fill the window"></canvas>
   </main>

diff --git a/src/apps/makelogo/MakeabilityLabLogo-AutoResize/style.css b/src/apps/makelogo/MakeabilityLabLogo-AutoResize/style.css
@@ -16,3 +16,18 @@ canvas {
   width: 100%;
   height: 100%;
 }
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion/index.html b/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion/index.html
@@ -19,6 +19,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Makeability Lab Logo: Reverse Explosion</h1>
     <canvas id="myCanvas" role="img"
       aria-label="Animation: the scattered triangles of the Makeability Lab logo fly back together to form the logo"></canvas>
   </main>

diff --git a/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion/style.css b/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion/style.css
@@ -9,3 +9,18 @@ canvas {
   width: 1000px;
   height: 1000px;
 }
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion2/index.html b/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion2/index.html
@@ -19,6 +19,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Makeability Lab Logo: Reverse Explosion 2</h1>
     <canvas id="myCanvas" role="img"
       aria-label="Animation: the scattered triangles of the Makeability Lab logo fly back together to form the logo"></canvas>
   </main>

diff --git a/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion2/style.css b/src/apps/makelogo/MakeabilityLabLogo-ReverseExplosion2/style.css
@@ -9,3 +9,18 @@ canvas {
   width: 1000px;
   height: 1000px;
 }
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/apps/makelogo/MakeabilityLabLogo-SantaMorph/index.html b/src/apps/makelogo/MakeabilityLabLogo-SantaMorph/index.html
@@ -18,6 +18,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Makeability Lab Logo Santa Morph</h1>
     <canvas id="myCanvas" role="img"
       aria-label="Animation: the Makeability Lab logo morphs into a Santa Claus figure"></canvas>
   </main>

diff --git a/src/apps/makelogo/MakeabilityLabLogo-SantaMorph/sketch.js b/src/apps/makelogo/MakeabilityLabLogo-SantaMorph/sketch.js
@@ -90,6 +90,13 @@ let originalSantaTriangles = null;
 /** @type {number} Current mouse/touch x-coordinate relative to the canvas. */
 let mouseX = 0;
 
+// Respect the user's "reduce motion" OS/browser setting (accessibility). The
+// Santa→logo morph is mouse-driven, so it's only ever in motion while the user
+// moves the pointer; the one thing that animates on its own is the holiday
+// text's pulsing glow, which we hold steady when reduced motion is requested.
+const reducedMotionQuery =
+  window.matchMedia?.('(prefers-reduced-motion: reduce)');
+
 // ---------------------------------------------------------------------------
 // Initialization & Layout
 // ---------------------------------------------------------------------------
@@ -317,8 +324,11 @@ function drawHolidayMessage() {
   const textColor = lerpColor(COLOR_SANTA_SUIT_RED, COLOR_SANTA_BELT, lerpAmt);
 
   // 4. Holiday Styling: Dynamic Sparkle/Glow
-  // We use a sine wave based on time to make the glow pulse
-  const sparkle = 5 + Math.sin(Date.now() / 300) * 5;
+  // We use a sine wave based on time to make the glow pulse — unless the user
+  // prefers reduced motion, in which case we hold the glow steady.
+  const sparkle = reducedMotionQuery?.matches
+    ? 5
+    : 5 + Math.sin(Date.now() / 300) * 5;
   ctx.shadowColor = 'rgba(255, 255, 255, 0.9)';
   ctx.shadowBlur = sparkle;
 

diff --git a/src/apps/makelogo/MakeabilityLabLogo-SantaMorph/style.css b/src/apps/makelogo/MakeabilityLabLogo-SantaMorph/style.css
@@ -23,4 +23,19 @@ canvas {
   max-height: 100%;
   width: 100%;
   height: 100%;
+}
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
 }
diff --git a/src/apps/makelogo/MakeabilityLabLogo/index.html b/src/apps/makelogo/MakeabilityLabLogo/index.html
@@ -18,6 +18,10 @@
 
 <body>
   <main class="container">
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Makeability Lab Logo</h1>
     <canvas id="myCanvas" role="img"
       aria-label="The animated Makeability Lab logo, drawn as a grid of colored triangles"></canvas>
   </main>

diff --git a/src/apps/makelogo/MakeabilityLabLogo/style.css b/src/apps/makelogo/MakeabilityLabLogo/style.css
@@ -9,3 +9,18 @@ canvas {
   width: 400px;
   height: 400px;
 }
+
+/* Visually hidden: removed from view but kept in the accessibility tree so the
+   <h1> page heading is available for screen-reader navigation. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/apps/makelogo/MakeabilityLabLogoGridFade/index.html b/src/apps/makelogo/MakeabilityLabLogoGridFade/index.html
@@ -17,6 +17,10 @@
 
 <body>
   <main>
+    <!-- Visually hidden heading: gives screen-reader users a proper page title
+         to navigate by. The canvas is just an image, so without this the page
+         would have no heading. Hidden from sighted users via .visually-hidden. -->
+    <h1 class="visually-hidden">Makeability Lab Logo — Grid Fade</h1>
     <canvas id="myCanvas" role="img"
       aria-label="Animation: a grid of triangles fades in, then the Makeability Lab logo appears"></canvas>
     <p class="hint hint-desktop">Press <kbd>R</kbd> to replay · <kbd>G</kbd> toggle grid · <kbd>H</kbd> toggle logo</p>