Fix PageSpeed Insights findings: accessibility and SEO

claude · claude · commit c5a1780e08d9 · 2026-05-18T10:35:29.000Z
Accessibility (76 → target higher): - Add aria-label to fpsNum and tolNum number inputs (unlabelled form controls) - Increase #placeholder-hint contrast from #666 to #777 on #0a0a0a background - Change #canvas-wrap div to <main> to provide a document landmark - Add visually-hidden skip navigation link for keyboard users SEO (83 → target higher): - Add <meta name="description"> tag - Add src/robots.txt and copy it to dist/ during build to fix 46 parse errors caused by the server returning HTML for the missing /robots.txt path https://claude.ai/code/session_01NfhDN9zVd9SyCD7SLiKoSD
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "forza-road-finder",
   "private": true,
   "scripts": {
-    "build": "parcel build src/index.html",
+    "build": "parcel build src/index.html && cp src/robots.txt dist/robots.txt",
     "dev": "parcel src/index.html"
   },
   "devDependencies": {
diff --git a/src/index.html b/src/index.html
@@ -9,6 +9,7 @@
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://roadfinder.went.tf/">
   <meta property="og:image" content="https://roadfinder.went.tf/preview.png">
+  <meta name="description" content="Browser tool that highlights undiscovered roads on the Forza Horizon map by replacing their grey colour with magenta in real time via screen capture.">
   <link rel="canonical" href="https://roadfinder.went.tf/">
   <link rel="icon" type="image/png" href="../favicon.png">
   <link rel="manifest" href="./manifest.json">
@@ -173,9 +174,29 @@
       color: #888;
       font-size: 15px;
     }
+
+    #placeholder-hint {
+      font-size: 12px;
+      color: #777;
+    }
+
+    .skip-link {
+      position: absolute;
+      top: -40px;
+      left: 0;
+      background: #333;
+      color: #eee;
+      padding: 4px 10px;
+      border-radius: 0 0 4px 0;
+      font-size: 13px;
+      z-index: 100;
+      text-decoration: none;
+    }
+    .skip-link:focus { top: 0; }
   </style>
 </head>
 <body>
+<a class="skip-link" href="#canvas-wrap">Skip to main content</a>
 
 <div id="controls">
   <button id="startBtn">Share Screen</button>
@@ -195,13 +216,13 @@
   <div class="ctrl-group">
     <label for="fps">FPS</label>
     <input type="range" id="fps" min="0.1" max="30" step="0.1" value="1">
-    <input type="number" id="fpsNum" min="0.1" max="30" step="0.1" value="1">
+    <input type="number" id="fpsNum" min="0.1" max="30" step="0.1" value="1" aria-label="FPS value">
   </div>
 
   <div class="ctrl-group">
     <label for="tolerance">Tolerance</label>
     <input type="range" id="tolerance" min="0" max="40" step="1" value="5">
-    <input type="number" id="tolNum" min="0" max="40" step="1" value="5">
+    <input type="number" id="tolNum" min="0" max="40" step="1" value="5" aria-label="Tolerance value">
   </div>
 
   <div class="ctrl-group">
@@ -221,13 +242,13 @@
   </div>
 </div>
 
-<div id="canvas-wrap">
+<main id="canvas-wrap">
   <div id="placeholder">
     <div>Click <strong>Share Screen</strong> and select your Forza window.</div>
-    <div id="placeholder-hint" style="font-size:12px;color:#666"></div>
+    <div id="placeholder-hint"></div>
   </div>
   <canvas id="canvas" style="display:none"></canvas>
-</div>
+</main>
 
 <script type="module" src="./main.js"></script>
 </body>
diff --git a/src/robots.txt b/src/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
