From 0ca2cb6fca53aaa5180393ad5c91c97067cb09d1 Mon Sep 17 00:00:00 2001
From: daniel-techAI <290375699+daniel-techAI@users.noreply.github.com>
Date: Sun, 2 Aug 2026 13:23:41 +0200
Subject: [PATCH] Add accessibility safeguards and site quality CI

---
 .github/workflows/site-quality.yml |  51 +++++
 .gitignore                         |   2 +
 .htmlvalidate.json                 |  13 ++
 README.md                          |  12 ++
 demo-cafe.html                     |   4 +-
 demo-roofing.html                  |   6 +-
 demo-salon.html                    |  16 +-
 index.html                         |  34 ++--
 maintenance.html                   |   2 +-
 package-lock.json                  | 289 +++++++++++++++++++++++++++++
 package.json                       |  17 ++
 playwright.config.mjs              |  32 ++++
 preview.html                       |  14 +-
 script.js                          |  21 ++-
 scripts/serve-static.mjs           |  52 ++++++
 share.html                         |   2 +-
 start-project.html                 |   4 +-
 styles.css                         |  31 +++-
 tests/site-quality.spec.mjs        |  97 ++++++++++
 19 files changed, 653 insertions(+), 46 deletions(-)
 create mode 100644 .github/workflows/site-quality.yml
 create mode 100644 .htmlvalidate.json
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 playwright.config.mjs
 create mode 100644 scripts/serve-static.mjs
 create mode 100644 tests/site-quality.spec.mjs

diff --git a/.github/workflows/site-quality.yml b/.github/workflows/site-quality.yml
new file mode 100644
index 0000000..ab095a3
--- /dev/null
+++ b/.github/workflows/site-quality.yml
@@ -0,0 +1,51 @@
+name: Site quality
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: site-quality-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  validate:
+    name: HTML, links and accessibility
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v7.0.1
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v7.0.0
+        with:
+          node-version: 24
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Validate HTML
+        run: npm run check:html
+
+      - name: Install Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Test links and accessibility
+        run: npm run test:a11y
+
+      - name: Upload failure report
+        if: failure()
+        uses: actions/upload-artifact@v7.0.1
+        with:
+          name: playwright-report
+          path: playwright-report/
+          if-no-files-found: ignore
+          retention-days: 7
diff --git a/.gitignore b/.gitignore
index ee1d6d6..dc54067 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ build/
 .netlify/
 .wrangler/
 qa/
+playwright-report/
+test-results/
diff --git a/.htmlvalidate.json b/.htmlvalidate.json
new file mode 100644
index 0000000..860acf1
--- /dev/null
+++ b/.htmlvalidate.json
@@ -0,0 +1,13 @@
+{
+  "extends": ["html-validate:recommended"],
+  "rules": {
+    "attribute-boolean-style": "off",
+    "doctype-style": "off",
+    "element-required-attributes": "error",
+    "no-inline-style": "off",
+    "prefer-native-element": "off",
+    "svg-focusable": "off",
+    "void-style": "off",
+    "wcag/h63": "error"
+  }
+}
diff --git a/README.md b/README.md
index 1e0c67d..2a45c57 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,18 @@ The local preview opens the site directly from this folder. It does not need Nod
 - The site does not intentionally load third-party fonts, analytics, advertisements, maps, chat, or non-essential cookies.
 - The Legal Notice deliberately contains unresolved identity fields. Complete them before accepting paid work.
 
+## Quality Checks
+
+Pull requests and changes to `main` run automated HTML, local-link, desktop, mobile, and WCAG A/AA checks.
+
+```bash
+npm install
+npx playwright install chromium
+npm run check
+```
+
+The browser checks cover every public HTML page, confirm local assets remain reachable, verify the skip link and mobile menu keyboard behaviour, and use axe-core to catch automated accessibility regressions. Manual keyboard and screen-reader testing is still required before major releases.
+
 ## Deploy
 
 This can be hosted as a static site on GitHub Pages, Cloudflare Pages, or another static host. GitHub Pages is already the active public host.
diff --git a/demo-cafe.html b/demo-cafe.html
index a6406d4..522e397 100644
--- a/demo-cafe.html
+++ b/demo-cafe.html
@@ -144,8 +144,8 @@ <h2>Everything you need before you arrive.</h2>
           <p class="demo-label">Reservations and orders</p>
           <h2>Save a table or plan the office breakfast.</h2>
           <form class="reservation-form" data-demo-form>
-            <label><span>Name</span><input name="name" autocomplete="name" required /></label>
-            <label><span>Phone or email</span><input name="contact" autocomplete="email" required /></label>
+            <label><span>Name</span><input type="text" name="name" autocomplete="name" required /></label>
+            <label><span>Phone or email</span><input type="text" name="contact" autocomplete="email" required /></label>
             <label>
               <span>Request</span>
               <select name="request"><option>Reservation</option><option>Pickup order</option><option>Catering request</option></select>
diff --git a/demo-roofing.html b/demo-roofing.html
index f995670..36ced14 100644
--- a/demo-roofing.html
+++ b/demo-roofing.html
@@ -138,9 +138,9 @@ <h2>Start with the right information.</h2>
           </ul>
         </div>
         <form class="demo-form roof-form" data-demo-form>
-          <label><span>Name</span><input name="name" autocomplete="name" required /></label>
-          <label><span>Phone or email</span><input name="contact" autocomplete="email" required /></label>
-          <label><span>Property area</span><input name="area" placeholder="Approximate floor or roof area" required /></label>
+          <label><span>Name</span><input type="text" name="name" autocomplete="name" required /></label>
+          <label><span>Phone or email</span><input type="text" name="contact" autocomplete="email" required /></label>
+          <label><span>Property area</span><input type="text" name="area" placeholder="Approximate floor or roof area" required /></label>
           <label>
             <span>Roof type</span>
             <select name="roof-type" required><option value="">Choose roof type</option><option>Pitched shingle</option><option>Metal</option><option>Flat roof</option><option>Not sure</option></select>
diff --git a/demo-salon.html b/demo-salon.html
index f6718f8..da0d156 100644
--- a/demo-salon.html
+++ b/demo-salon.html
@@ -48,12 +48,12 @@ <h1>Hair work people can see before they book.</h1>
             <a class="demo-button secondary" href="#lookbook">View Lookbook</a>
           </div>
         </div>
-        <div class="salon-specialty-index" aria-label="Salon specialties">
-          <span><b>01</b> Balayage</span>
-          <span><b>02</b> Precision bobs</span>
-          <span><b>03</b> Blonding</span>
-          <span><b>04</b> Gloss and tone</span>
-          <span><b>05</b> Event styling</span>
+        <div class="salon-specialty-index" role="list" aria-label="Salon specialties">
+          <span role="listitem"><b>01</b> Balayage</span>
+          <span role="listitem"><b>02</b> Precision bobs</span>
+          <span role="listitem"><b>03</b> Blonding</span>
+          <span role="listitem"><b>04</b> Gloss and tone</span>
+          <span role="listitem"><b>05</b> Event styling</span>
         </div>
       </section>
 
@@ -127,8 +127,8 @@ <h2>Book your consultation.</h2>
           </ol>
         </div>
         <form class="demo-form" data-demo-form>
-          <label><span>Name</span><input name="name" autocomplete="name" required /></label>
-          <label><span>Phone or email</span><input name="contact" autocomplete="email" required /></label>
+          <label><span>Name</span><input type="text" name="name" autocomplete="name" required /></label>
+          <label><span>Phone or email</span><input type="text" name="contact" autocomplete="email" required /></label>
           <label>
             <span>Service</span>
             <select name="service"><option>Color consultation</option><option>Cut and finish</option><option>Gloss or tone</option><option>Bridal styling</option></select>
diff --git a/index.html b/index.html
index 6a28f99..9da68a5 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,9 @@
     <link rel="preload" as="image" href="assets/locriva-local-owner-hero.webp" type="image/webp" />
     <link rel="stylesheet" href="styles.css?v=20260724-2" />
   </head>
-  <body class="home-page">
+  <body class="home-page" id="top">
+    <a class="skip-link" href="#main-content">Skip to main content</a>
+
     <header class="site-header" data-header>
       <a class="brand" href="#top" aria-label="Locriva home">
         <span class="brand-mark" aria-hidden="true">
@@ -43,17 +45,17 @@
         </svg>
       </button>
 
-      <nav class="site-nav" id="site-nav" data-nav>
+      <nav class="site-nav" id="site-nav" aria-label="Primary navigation" data-nav>
         <a href="#features">Services</a>
         <a href="#portfolio">Demo Work</a>
-        <a href="#care">Care & Analytics</a>
+        <a href="#care">Care &amp; Analytics</a>
         <a href="#process">Process</a>
         <a href="#pricing">Pricing</a>
         <a class="nav-cta" href="start-project.html">Start Project</a>
       </nav>
     </header>
 
-    <main id="top">
+    <main id="main-content" tabindex="-1">
       <section class="growth-hero section-shell">
         <div class="growth-hero-copy">
           <h1>Websites that bring in more local customers.</h1>
@@ -70,18 +72,18 @@ <h1>Websites that bring in more local customers.</h1>
             </a>
             <a class="button button-secondary" href="#portfolio">See Demo Work</a>
           </div>
-          <div class="proof-row" aria-label="Locriva service proof points">
-            <article>
+          <div class="proof-row" role="list" aria-label="Locriva service proof points">
+            <article role="listitem">
               <span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" /></svg></span>
               <h3>Built to feel real</h3>
               <p>Industry-specific pages, not one template copied three times.</p>
             </article>
-            <article>
+            <article role="listitem">
               <span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 13.7-5.7M20 12a8 8 0 0 1-13.7 5.7M17 3v4h-4M7 21v-4h4" /></svg></span>
               <h3>Monthly care</h3>
               <p>Checks, edits, reporting, and improvement ideas after launch.</p>
             </article>
-            <article>
+            <article role="listitem">
               <span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 19V5M5 19h14M9 16v-5M13 16V8M17 16v-8" /></svg></span>
               <h3>Clear insights</h3>
               <p>Know which pages get attention and which calls to action get used.</p>
@@ -98,7 +100,7 @@ <h3>Clear insights</h3>
             fetchpriority="high"
             decoding="async"
           />
-          <div class="hero-insight-card" aria-label="Locriva outcome example">
+          <div class="hero-insight-card" role="group" aria-label="Locriva outcome example">
             <strong>More enquiries. Better bookings.</strong>
             <span>Less guessing about what to improve next.</span>
             <svg viewBox="0 0 112 42" aria-hidden="true">
@@ -264,7 +266,7 @@ <h2>We keep the website healthy and make improvements less random.</h2>
           <a class="button button-secondary" href="maintenance.html">See Maintenance Plans</a>
         </div>
 
-        <div class="analytics-panel" aria-label="Example monthly website report">
+        <div class="analytics-panel" role="group" aria-label="Example monthly website report">
           <div class="analytics-header">
             <strong>Your site this month</strong>
             <span>Example report</span>
@@ -303,23 +305,23 @@ <h2>Clear expectations from proposal to handover.</h2>
           </p>
         </div>
 
-        <div class="trust-grid" aria-label="Locriva readiness checks">
-          <article data-reveal>
+        <div class="trust-grid" role="list" aria-label="Locriva readiness checks">
+          <article role="listitem" data-reveal>
             <span>01</span>
             <h3>Honest portfolio</h3>
             <p>Concept work is clearly labelled, with no invented testimonials or guaranteed results.</p>
           </article>
-          <article data-reveal>
+          <article role="listitem" data-reveal>
             <span>02</span>
             <h3>Privacy-first setup</h3>
             <p>No tracking cookies or external font calls are used on the current public site.</p>
           </article>
-          <article data-reveal>
+          <article role="listitem" data-reveal>
             <span>03</span>
             <h3>Clear paid scope</h3>
             <p>Projects and monthly care are separated so clients know what is included and what costs extra.</p>
           </article>
-          <article data-reveal>
+          <article role="listitem" data-reveal>
             <span>04</span>
             <h3>Clean handover</h3>
             <p>Clients receive launch checks, account access, agreed files, and clear notes for ongoing care.</p>
@@ -467,7 +469,7 @@ <h2>Ready for a website that earns its place?</h2>
         <form class="signup-form" name="locriva-leads" method="POST" data-signup-form>
           <input type="hidden" name="form-name" value="locriva-leads" />
           <p class="hidden-field">
-            <label>Do not fill this out <input name="bot-field" /></label>
+            <label>Do not fill this out <input type="text" name="bot-field" /></label>
           </p>
           <label>
             <span>Work email</span>
diff --git a/maintenance.html b/maintenance.html
index d673e5b..8fba227 100644
--- a/maintenance.html
+++ b/maintenance.html
@@ -27,7 +27,7 @@
         <span class="sr-only">Open navigation</span>
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
       </button>
-      <nav class="site-nav" id="site-nav" data-nav>
+      <nav class="site-nav" id="site-nav" aria-label="Primary navigation" data-nav>
         <a href="index.html#features">Services</a>
         <a href="index.html#portfolio">Demo Work</a>
         <a href="start-project.html">Start Project</a>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8dde2f3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,289 @@
+{
+  "name": "locriva-site",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "locriva-site",
+      "version": "1.0.0",
+      "devDependencies": {
+        "@axe-core/playwright": "4.12.1",
+        "@playwright/test": "1.62.1",
+        "html-validate": "11.6.1"
+      }
+    },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.12.1.tgz",
+      "integrity": "sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "axe-core": "~4.12.1"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
+    "node_modules/@html-validate/stylish": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@html-validate/stylish/-/stylish-6.0.0.tgz",
+      "integrity": "sha512-d1/lI3qIXhGVJF3+MmKEBn1dRX6U4Z+BDaOdDI3E6SXcO+OQ7hC/3mSo6BIjwQlcuV6NdDOKm6QCrzIQL1EezQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^22.16.0 || >= 24.0.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
+      "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@sidvind/better-ajv-errors": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@sidvind/better-ajv-errors/-/better-ajv-errors-7.0.0.tgz",
+      "integrity": "sha512-imVsp5D3KxJ8+uUmu2dsLKnFg3qdX952v/L1gZoCa0NO2ivhQWHMpYM2KmpFrRXHWFjlqkNZ/935nxiTqXEi1A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^22.12 || >= 24.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz",
+      "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/html-validate": {
+      "version": "11.6.1",
+      "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-11.6.1.tgz",
+      "integrity": "sha512-WKDTjw74Uo1eOLThlZUdov4VyobMNgEMuyhR76VyWk7jfmwxOXbid+vZqYuIFXwQXyXsXT50KfLBIPX5rGnxPQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/html-validate"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@html-validate/stylish": "^6.0.0",
+        "@sidvind/better-ajv-errors": "7.0.0",
+        "ajv": "^8.0.0",
+        "kleur": "^4.1.0",
+        "prompts": "^2.0.0",
+        "semver": "^7.0.0"
+      },
+      "bin": {
+        "html-validate": "bin/html-validate.mjs"
+      },
+      "engines": {
+        "node": "^22.22.0 || >= 24.8.0"
+      },
+      "peerDependencies": {
+        "@jest/globals": "^29.0.3 || ^30.0.0",
+        "@vitest/expect": "^3.0.0 || ^4.0.1",
+        "jest": "^29.0.3 || ^30.0.0",
+        "jest-snapshot": "^29.0.3 || ^30.0.0",
+        "vitest": "^3.0.0 || ^4.0.1"
+      },
+      "peerDependenciesMeta": {
+        "@jest/globals": {
+          "optional": true
+        },
+        "@vitest/expect": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        },
+        "jest-snapshot": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prompts/node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1068297
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "locriva-site",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Static Locriva website quality checks",
+  "scripts": {
+    "check": "npm run check:html && npm run test:a11y",
+    "check:html": "html-validate \"*.html\"",
+    "preview": "node scripts/serve-static.mjs",
+    "test:a11y": "playwright test"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "4.12.1",
+    "@playwright/test": "1.62.1",
+    "html-validate": "11.6.1"
+  }
+}
diff --git a/playwright.config.mjs b/playwright.config.mjs
new file mode 100644
index 0000000..2d4ffae
--- /dev/null
+++ b/playwright.config.mjs
@@ -0,0 +1,32 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: false,
+  workers: 1,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI
+    ? [["line"], ["html", { open: "never", outputFolder: "playwright-report" }]]
+    : "line",
+  use: {
+    baseURL: "http://127.0.0.1:4173",
+    trace: "retain-on-failure"
+  },
+  webServer: {
+    command: "npm run preview",
+    url: "http://127.0.0.1:4173/",
+    reuseExistingServer: !process.env.CI,
+    timeout: 30_000
+  },
+  projects: [
+    {
+      name: "desktop-chromium",
+      use: { ...devices["Desktop Chrome"] }
+    },
+    {
+      name: "mobile-chromium",
+      use: { ...devices["Pixel 7"] }
+    }
+  ]
+});
diff --git a/preview.html b/preview.html
index 8df4f0c..7d895ab 100644
--- a/preview.html
+++ b/preview.html
@@ -32,7 +32,7 @@
         </svg>
       </button>
 
-      <nav class="site-nav" id="site-nav" data-nav>
+      <nav class="site-nav" id="site-nav" aria-label="Primary navigation" data-nav>
         <a href="index.html">Home</a>
         <a href="#review-path">Review Path</a>
         <a href="#gallery">Gallery</a>
@@ -110,11 +110,11 @@ <h2>What each page is supposed to prove.</h2>
           </p>
         </div>
 
-        <div class="review-scoreboard" aria-label="Review score prompts">
-          <article><span>Trust</span><strong>Would you believe this business?</strong></article>
-          <article><span>Clarity</span><strong>Can you understand the offer fast?</strong></article>
-          <article><span>Difference</span><strong>Do the demos feel niche-specific?</strong></article>
-          <article><span>Action</span><strong>Is the next step obvious?</strong></article>
+        <div class="review-scoreboard" role="list" aria-label="Review score prompts">
+          <article role="listitem"><span>Trust</span><strong>Would you believe this business?</strong></article>
+          <article role="listitem"><span>Clarity</span><strong>Can you understand the offer fast?</strong></article>
+          <article role="listitem"><span>Difference</span><strong>Do the demos feel niche-specific?</strong></article>
+          <article role="listitem"><span>Action</span><strong>Is the next step obvious?</strong></article>
         </div>
 
         <div class="preview-grid">
@@ -239,7 +239,7 @@ <h3>Find the action</h3>
           <form class="signup-form" name="locriva-feedback" method="POST" data-signup-form>
             <input type="hidden" name="form-name" value="locriva-feedback" />
             <p class="hidden-field">
-              <label>Do not fill this out <input name="bot-field" /></label>
+              <label>Do not fill this out <input type="text" name="bot-field" /></label>
             </p>
             <label>
               <span>Your email</span>
diff --git a/script.js b/script.js
index 65b60b4..9f3ebaf 100644
--- a/script.js
+++ b/script.js
@@ -21,16 +21,29 @@ if (header) {
 }
 
 if (navToggle && nav) {
+  const navToggleLabel = navToggle.querySelector(".sr-only");
+
+  const setNavigationState = (isOpen, { returnFocus = false } = {}) => {
+    navToggle.setAttribute("aria-expanded", String(isOpen));
+    document.body.classList.toggle("nav-open", isOpen);
+    if (navToggleLabel) navToggleLabel.textContent = isOpen ? "Close navigation" : "Open navigation";
+    if (returnFocus) navToggle.focus();
+  };
+
   navToggle.addEventListener("click", () => {
     const nextState = navToggle.getAttribute("aria-expanded") !== "true";
-    navToggle.setAttribute("aria-expanded", String(nextState));
-    document.body.classList.toggle("nav-open", nextState);
+    setNavigationState(nextState);
   });
 
   nav.addEventListener("click", (event) => {
     if (event.target instanceof HTMLAnchorElement) {
-      navToggle.setAttribute("aria-expanded", "false");
-      document.body.classList.remove("nav-open");
+      setNavigationState(false);
+    }
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && navToggle.getAttribute("aria-expanded") === "true") {
+      setNavigationState(false, { returnFocus: true });
     }
   });
 }
diff --git a/scripts/serve-static.mjs b/scripts/serve-static.mjs
new file mode 100644
index 0000000..b44139d
--- /dev/null
+++ b/scripts/serve-static.mjs
@@ -0,0 +1,52 @@
+import { createServer } from "node:http";
+import { readFile, stat } from "node:fs/promises";
+import { extname, resolve, sep } from "node:path";
+
+const host = "127.0.0.1";
+const port = 4173;
+const root = resolve(process.cwd());
+const mimeTypes = new Map([
+  [".css", "text/css; charset=utf-8"],
+  [".html", "text/html; charset=utf-8"],
+  [".js", "text/javascript; charset=utf-8"],
+  [".json", "application/json; charset=utf-8"],
+  [".png", "image/png"],
+  [".svg", "image/svg+xml"],
+  [".webp", "image/webp"]
+]);
+
+const server = createServer(async (request, response) => {
+  try {
+    const pathname = decodeURIComponent(new URL(request.url ?? "/", `http://${host}`).pathname);
+    const relativePath = pathname === "/" ? "index.html" : pathname.replace(/^\/+/, "");
+    let filePath = resolve(root, relativePath);
+
+    if (filePath !== root && !filePath.startsWith(`${root}${sep}`)) {
+      response.writeHead(403).end("Forbidden");
+      return;
+    }
+
+    if ((await stat(filePath)).isDirectory()) filePath = resolve(filePath, "index.html");
+    const fileStats = await stat(filePath);
+    response.writeHead(200, {
+      "Cache-Control": "no-store",
+      "Content-Length": fileStats.size,
+      "Content-Type": mimeTypes.get(extname(filePath).toLowerCase()) ?? "application/octet-stream"
+    });
+    if (request.method === "HEAD") {
+      response.end();
+      return;
+    }
+    response.end(await readFile(filePath));
+  } catch {
+    response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" }).end("Not found");
+  }
+});
+
+server.listen(port, host, () => {
+  process.stdout.write(`Locriva preview: http://${host}:${port}\n`);
+});
+
+for (const signal of ["SIGINT", "SIGTERM"]) {
+  process.on(signal, () => server.close(() => process.exit(0)));
+}
diff --git a/share.html b/share.html
index 37b148b..410468a 100644
--- a/share.html
+++ b/share.html
@@ -30,7 +30,7 @@
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
       </button>
 
-      <nav class="site-nav" id="site-nav" data-nav>
+      <nav class="site-nav" id="site-nav" aria-label="Primary navigation" data-nav>
         <a href="index.html">Selling Site</a>
         <a href="preview.html">Tester Room</a>
         <a href="#demos">Demo Sites</a>
diff --git a/start-project.html b/start-project.html
index d6c872e..f72f6e9 100644
--- a/start-project.html
+++ b/start-project.html
@@ -26,7 +26,7 @@
         <span class="sr-only">Open navigation</span>
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
       </button>
-      <nav class="site-nav" id="site-nav" data-nav>
+      <nav class="site-nav" id="site-nav" aria-label="Primary navigation" data-nav>
         <a href="index.html#features">Services</a>
         <a href="index.html#portfolio">Portfolio</a>
         <a href="maintenance.html">Maintenance</a>
@@ -65,7 +65,7 @@ <h2>Best outcome</h2>
         <form class="intake-form" name="project-intake" method="POST" data-signup-form>
           <input type="hidden" name="form-name" value="project-intake" />
           <p class="hidden-field">
-            <label>Do not fill this out <input name="bot-field" /></label>
+            <label>Do not fill this out <input type="text" name="bot-field" /></label>
           </p>
           <label>
             <span>Your email</span>
diff --git a/styles.css b/styles.css
index e2483c7..a609632 100644
--- a/styles.css
+++ b/styles.css
@@ -69,6 +69,33 @@ svg {
   border: 0;
 }
 
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 12px;
+  left: 12px;
+  padding: 12px 16px;
+  color: #ffffff;
+  background: var(--blue-dark);
+  border: 2px solid #ffffff;
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(9, 34, 21, 0.24);
+  font-weight: 700;
+  transform: translateY(calc(-100% - 24px));
+  transition: transform 160ms ease;
+}
+
+.skip-link:focus {
+  outline: 3px solid var(--brass);
+  outline-offset: 2px;
+  transform: translateY(0);
+}
+
+main:focus-visible {
+  outline: 3px solid var(--brass);
+  outline-offset: -3px;
+}
+
 .site-header {
   position: sticky;
   top: 0;
@@ -483,7 +510,7 @@ h1 {
   display: grid;
   min-height: 58px;
   place-items: center;
-  color: #748094;
+  color: var(--muted);
   background: var(--bg-soft);
   border: 1px solid var(--line);
   border-radius: var(--radius);
@@ -3483,7 +3510,7 @@ h2 {
 .logo-row {
   justify-content: space-between;
   gap: 18px;
-  color: #777f79;
+  color: var(--muted);
   font-size: 13px;
 }
 
diff --git a/tests/site-quality.spec.mjs b/tests/site-quality.spec.mjs
new file mode 100644
index 0000000..7756bcb
--- /dev/null
+++ b/tests/site-quality.spec.mjs
@@ -0,0 +1,97 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+const htmlRoutes = [
+  "/",
+  "/404.html",
+  "/cookies.html",
+  "/demo-cafe.html",
+  "/demo-roofing.html",
+  "/demo-salon.html",
+  "/legal.html",
+  "/maintenance.html",
+  "/preview.html",
+  "/privacy.html",
+  "/share.html",
+  "/start-project.html",
+  "/terms.html"
+];
+
+const axeTags = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
+
+function formatViolations(violations) {
+  return violations
+    .map(
+      (violation) =>
+        `${violation.id}: ${violation.help}\n${violation.nodes
+          .map((node) => `  ${node.target.join(" ")} - ${node.failureSummary}`)
+          .join("\n")}`
+    )
+    .join("\n\n");
+}
+
+async function expectNoAxeViolations(page) {
+  // Contrast is measured after the short entry animation reaches its final, fully opaque state.
+  await page.waitForTimeout(1_000);
+  const result = await new AxeBuilder({ page }).withTags(axeTags).analyze();
+  expect(result.violations, formatViolations(result.violations)).toEqual([]);
+}
+
+test("homepage has no automated WCAG A or AA violations", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("h1")).toBeVisible();
+  await expectNoAxeViolations(page);
+});
+
+test("skip link moves keyboard focus to the main content", async ({ page }) => {
+  await page.goto("/");
+  await page.keyboard.press("Tab");
+  const skipLink = page.getByRole("link", { name: "Skip to main content" });
+  await expect(skipLink).toBeFocused();
+  await page.keyboard.press("Enter");
+  await expect(page.locator("main")).toBeFocused();
+});
+
+test("mobile navigation communicates state and closes with Escape", async ({ page }, testInfo) => {
+  test.skip(testInfo.project.name !== "mobile-chromium", "Mobile navigation is only shown at narrow widths.");
+  await page.goto("/");
+  const toggle = page.locator("[data-nav-toggle]");
+  await expect(toggle).toHaveAccessibleName("Open navigation");
+  await toggle.click();
+  await expect(toggle).toHaveAttribute("aria-expanded", "true");
+  await expect(toggle).toHaveAccessibleName("Close navigation");
+  await page.keyboard.press("Escape");
+  await expect(toggle).toHaveAttribute("aria-expanded", "false");
+  await expect(toggle).toHaveAccessibleName("Open navigation");
+  await expect(toggle).toBeFocused();
+});
+
+test("supporting pages and local resources remain reachable", async ({ page, request }, testInfo) => {
+  test.setTimeout(120_000);
+  test.skip(testInfo.project.name !== "desktop-chromium", "One desktop crawl covers the shared files.");
+
+  const checkedResources = new Set();
+
+  for (const route of htmlRoutes) {
+    const response = await page.goto(route);
+    expect(response?.ok(), `${route} should load successfully`).toBeTruthy();
+    await expectNoAxeViolations(page);
+
+    const urls = await page.locator("a[href], img[src], script[src], link[href]").evaluateAll((elements) =>
+      elements
+        .map((element) => element.getAttribute("href") || element.getAttribute("src"))
+        .filter(Boolean)
+    );
+
+    for (const rawUrl of urls) {
+      if (/^(?:mailto:|tel:|data:|javascript:)/i.test(rawUrl) || rawUrl.startsWith("#")) continue;
+      const url = new URL(rawUrl, page.url());
+      if (url.origin !== new URL(page.url()).origin) continue;
+      url.hash = "";
+      if (checkedResources.has(url.href)) continue;
+      checkedResources.add(url.href);
+      const resourceResponse = await request.head(url.href);
+      expect(resourceResponse.ok(), `${url.pathname} should not be a broken local resource`).toBeTruthy();
+    }
+  }
+});