Improve accessibility and add site quality CI

.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

.gitignore

@@ -30,3 +30,5 @@ coverage/
 
 # Local visual-regression artifacts
 qa/
+playwright-report/
+test-results/

.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"
+  }
+}

README.md

@@ -52,7 +52,22 @@ The check verifies required page metadata, unique IDs, local links and assets, C
 
 ## Form and privacy behavior
 
-Public enquiry forms do not transmit or store submissions. They open a pre-filled `mailto:` draft, which the visitor must review and send. Demo forms only display an on-page demonstration message. If a backend, analytics, payments, booking, chat, or other third-party service is added, review the privacy, cookie, security, and deployment documentation before enabling it.
+Public enquiry forms do not transmit or store submissions. They open a pre-filled `mailto:` draft,
+which the visitor must review and send. Demo forms only display an on-page demonstration message. If
+a backend, analytics, payments, booking, chat, or other third-party service is added, review the
+privacy, cookie, security, and deployment documentation before enabling it.
+
+## 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.
 
 ## Deployment
 

demo-cafe.html

@@ -145,8 +145,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>

demo-roofing.html

@@ -139,9 +139,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>

demo-salon.html

@@ -49,12 +49,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>
 
@@ -128,8 +128,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>

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>

maintenance.html

@@ -28,7 +28,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>