Fix: Wrap progress and clock elements in landmark regions for accessibility

Copilot · mgifford · Copilot · commit e5690be117c4 · 2026-02-13T13:21:37.000Z
- Changed div elements to aside elements with semantic meaning
- Added aria-label attributes for unique accessible names
- Created test-landmarks.sh to prevent regression
- Added test:landmarks to npm test suite
- Updated AGENTS.md documentation

Fixes the axe/region accessibility violation where page content
was not contained by landmarks.

Co-authored-by: mgifford &lt;116832+mgifford@users.noreply.github.com&gt;
diff --git a/AGENTS.md b/AGENTS.md
@@ -108,8 +108,8 @@ Only one notes block per slide:
 ### Required Elements
 Keep these in the `<body>` for proper presentation functionality:
 ```html
-<div class="progress"></div>
-<div class="clock"></div>
+<aside class="progress" aria-label="Presentation progress"></aside>
+<aside class="clock" aria-label="Presentation timer"></aside>
 <section aria-live="assertive" aria-label="Slide mode status">Leaving slide mode.</section>
 ```
 
diff --git a/index.html b/index.html
@@ -24,8 +24,8 @@
 </head>
 
 <body class="shower fade-in duration=30 warn=5 hidemouse">
-  <div class="progress"></div>
-  <div class="clock"></div>
+  <aside class="progress" aria-label="Presentation progress"></aside>
+  <aside class="clock" aria-label="Presentation timer"></aside>
   <section aria-live="assertive" aria-label="Slide mode status">Leaving slide mode.</section>
 
   <!-- Slide 1: Cover -->
diff --git a/package.json b/package.json
@@ -8,10 +8,11 @@
     "dev:transcript": "node scripts/whisper-transcript-watch.js",
     "test:html": "html-validate -c .htmlvalidate.json '*.html'",
     "test:a11y": "pa11y-ci --config .pa11yci.json || true",
+    "test:landmarks": "bash scripts/test-landmarks.sh",
     "test:links": "bash scripts/check-links.sh",
     "test:spell": "cspell '**/*.{md,html,js,css}' || true",
     "test:css": "bash scripts/validate-css.sh",
-    "test:all": "npm run test:html && npm run test:css && npm run test:links && npm run test:spell",
+    "test:all": "npm run test:html && npm run test:landmarks && npm run test:css && npm run test:links && npm run test:spell",
     "test": "npm run test:all"
   },
   "repository": {
diff --git a/scripts/test-landmarks.sh b/scripts/test-landmarks.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+# Test that progress and clock elements are contained in landmark regions
+# This prevents regression of the accessibility issue where these elements
+# were not contained by landmarks.
+
+set -e
+
+echo "🔍 Testing landmark accessibility..."
+
+# Check if progress and clock elements use <aside> tag or have role="complementary"
+if ! grep -q '<aside class="progress"' index.html; then
+  echo "❌ FAIL: .progress element is not using <aside> tag"
+  exit 1
+fi
+
+if ! grep -q '<aside class="clock"' index.html; then
+  echo "❌ FAIL: .clock element is not using <aside> tag"
+  exit 1
+fi
+
+# Check if progress has aria-label
+if ! grep -q 'class="progress".*aria-label' index.html; then
+  echo "❌ FAIL: .progress element is missing aria-label attribute"
+  exit 1
+fi
+
+# Check if clock has aria-label
+if ! grep -q 'class="clock".*aria-label' index.html; then
+  echo "❌ FAIL: .clock element is missing aria-label attribute"
+  exit 1
+fi
+
+echo "✓ All landmark tests passed"
+echo "  - .progress is an <aside> element with aria-label"
+echo "  - .clock is an <aside> element with aria-label"
