From df9deb37f7945f416669e0a24f378f3251cccfba Mon Sep 17 00:00:00 2001
From: Stanislav Zhuk <stasadev@gmail.com>
Date: Fri, 23 Oct 2026 19:17:38 +0300
Subject: [PATCH 1/3] fix: improve accessibility, hash logo URLs, refresh
 terminal animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Short Summary (TL;DR)

Fixes the accessibility problems axe-core found across the site, links logos through hashed URLs so a replaced logo shows without a hard refresh, and updates the home page terminal to current `ddev start` output.

## How This PR Solves The Issue

- Accessibility: [axe-core](https://github.com/dequelabs/axe-core), an open-source engine that checks a rendered page against WCAG rules such as contrast, names for controls, landmarks, and heading order, reported 204 violations on 12 page types in both themes, and now reports none. The fixes add a skip link, a landmark for the sponsor banner, a correct heading order, names for the copy buttons, keyboard-scrollable code blocks, and darker or underlined links where the contrast was too low.
- Menu: closes on Escape or a click elsewhere, and opens below its button so the button stays visible.
- Terminal: a pause button, as WCAG 2.2.2 (Pause, Stop, Hide) asks of a looping animation, and with reduced motion it starts paused on the `ddev describe` screen. Screen readers get one sentence instead of the box drawing. The output was recorded from the upcoming v1.25.5 with [VHS](https://github.com/charmbracelet/vhs), which records a terminal session from a script, and the `ready in` waits play in real time.
- Logos: Cloudflare tells browsers to keep `/logos/` for 4 hours, so after #763 people saw the old logos until a hard refresh. Pages now link the hashed `/_astro/` copies, and `public/logos` stays for the README badges.
- Agent guidance: a new `a11y-check` skill tells Claude how to run axe-core and Lighthouse on the host from `~/tmp`, so neither becomes a dependency of the site.

## Manual Testing Instructions

Compare https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev/ with https://ddev.com/:

- Home page: the first Tab shows "Skip to content". The terminal pauses and resumes from the button beside the dots, and with reduced motion turned on in the OS it starts paused.
- Home page at phone width: the menu opens below its button and closes on Escape or a click outside.
- A blog post with a code block: Tab reaches the code block, and arrow keys scroll a long line.
- `/download`, `/sponsor`, `/usage-stats` and `/get-started`: links, tabs and buttons are readable in both themes.
- Logo image URLs on the home page start with `/_astro/`.

## Automated Testing Overview

Run locally, not in CI: axe-core 4.14 on 12 page types in light and dark themes at 1400 and 390 px wide, with no violations, and Lighthouse 12 with accessibility at 100 on the home page. [Lighthouse](https://developer.chrome.com/docs/lighthouse) is Google's page audit, the engine behind PageSpeed Insights, which scores performance, accessibility, best practices, and SEO; its API quota was used up, so it ran locally.

🤖 Developed with assistance from [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .claude/skills/a11y-check/SKILL.md       |  75 ++++++++
 .claude/skills/a11y-check/axe.mjs        |  76 +++++++++
 AGENTS.md                                |   1 +
 astro.config.mjs                         |   4 +-
 src/components/AnimatedTerminal.astro    | 209 ++++++++++++++++-------
 src/components/AppLogos.astro            |   4 +-
 src/components/BlogFeatures.astro        |   2 +-
 src/components/BlogPostCard.astro        |  13 +-
 src/components/CtaButton.astro           |   3 +-
 src/components/FeaturedSponsors.astro    |   9 +-
 src/components/Footer.astro              |   5 +-
 src/components/Header.astro              |  24 ++-
 src/components/Hero.astro                |   4 +-
 src/components/PostUpdate.astro          |   6 +-
 src/components/SoftwareLogos.astro       |   4 +-
 src/components/SponsorsBanner.astro      |   4 +-
 src/components/Terminal.astro            |   9 +-
 src/components/UsageStatChart.astro      |   4 +-
 src/components/quickstart/Cloud.astro    |   2 +-
 src/components/quickstart/Examples.astro |   2 +-
 src/components/quickstart/Linux.astro    |   6 +-
 src/components/quickstart/Mac.astro      |   6 +-
 src/components/quickstart/Windows.astro  |   6 +-
 src/layouts/Layout.astro                 |   7 +-
 src/lib/images.ts                        |  14 ++
 src/lib/shiki-focusable-code.mjs         |  16 ++
 src/pages/download.astro                 |  18 +-
 src/pages/sponsor.astro                  |   2 +-
 src/styles/global.css                    |  16 +-
 29 files changed, 426 insertions(+), 125 deletions(-)
 create mode 100644 .claude/skills/a11y-check/SKILL.md
 create mode 100644 .claude/skills/a11y-check/axe.mjs
 create mode 100644 src/lib/shiki-focusable-code.mjs

diff --git a/.claude/skills/a11y-check/SKILL.md b/.claude/skills/a11y-check/SKILL.md
new file mode 100644
index 000000000..d9ef1c771
--- /dev/null
+++ b/.claude/skills/a11y-check/SKILL.md
@@ -0,0 +1,75 @@
+---
+name: a11y-check
+description: Check ddev.com pages for accessibility problems with axe-core and Lighthouse, in both themes and at desktop and phone width, before a change that touches markup, colors, or layout is committed. Use when asked to check accessibility, contrast, or PageSpeed scores, or after changing a layout, component, or global.css.
+when_to_use: >
+  Triggered by "check accessibility", "run axe", "a11y", "contrast", "WCAG",
+  "PageSpeed", "Lighthouse score", or a change to src/layouts/,
+  src/components/, or src/styles/.
+---
+
+# Checking accessibility
+
+Run the tools on the host, not in the DDEV web container, which has no
+browser. Both need Chrome or Chromium; set `CHROME_PATH` to it when it is not
+`/usr/bin/chromium`, as on macOS:
+
+```bash
+export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+```
+
+## 1. Build
+
+Check the production build, not the dev server, whose toolbar adds markup of
+its own:
+
+```bash
+ddev npm run build
+base=$(ddev describe -j | jq -r .raw.primary_url)
+```
+
+## 2. axe-core
+
+Install the packages in `~/tmp`, never in the repository's `package.json`,
+and run [`axe.mjs`](axe.mjs) from there:
+
+```bash
+mkdir -p ~/tmp/a11y-tools && cd ~/tmp/a11y-tools
+[ -d node_modules ] || { npm init -y >/dev/null && npm install puppeteer-core@24 axe-core@4; }
+node <skill dir>/axe.mjs "$base" / /blog/ /download/ > axe.json
+jq 'group_by(.id) | map({id: .[0].id, count: length, example: .[0]})' axe.json
+```
+
+Pass every page type the change can reach. For a change to the layout,
+header, footer, or `global.css`, that is all of them:
+
+```text
+/ /about/ /blog/ /blog/<a recent post>/ /blog/author/ /blog/author/<id>/
+/blog/category/ /blog/category/<slug>/ /download/ /get-started/ /sponsor/
+/usage-stats/
+```
+
+The script checks each path in light and dark at 1400 and 390 px wide, since
+some problems show in only one theme or at one width. It emulates reduced
+motion, which stops the home page terminal on its `ddev describe` screen.
+
+Fix every violation the change introduced. To tell which were there before,
+run the same paths with `https://ddev.com` as the base; report those, and
+leave them for a separate PR unless asked.
+
+## 3. Lighthouse
+
+The PageSpeed Insights API shares its quota across everyone who calls it
+without a key, so it usually fails. Run Lighthouse locally instead:
+
+```bash
+npx -y lighthouse@12 "$base/" --quiet --output=json --output-path=lh.json \
+  --chrome-flags="--headless=new --ignore-certificate-errors"
+jq '.categories | map_values(.score * 100)' lh.json
+```
+
+Add `--preset=desktop` for the desktop scores. Locally, best practices loses
+points to a 404 for `/s/sponsorship-data.json`, which `public/_redirects`
+answers on Cloudflare; ignore that one.
+
+For the live site, run the same command against `https://ddev.com/`, or a
+PR's Cloudflare preview.
diff --git a/.claude/skills/a11y-check/axe.mjs b/.claude/skills/a11y-check/axe.mjs
new file mode 100644
index 000000000..aa1948616
--- /dev/null
+++ b/.claude/skills/a11y-check/axe.mjs
@@ -0,0 +1,76 @@
+/**
+ * Runs axe-core on each path, in both themes, at desktop and phone width, and
+ * prints the violations as JSON. Modules resolve from the working directory,
+ * so the repository's package.json doesn't need them.
+ *
+ * Usage: node axe.mjs <base-url> <path>...
+ */
+import { createRequire } from "module"
+import { readFileSync } from "fs"
+
+const require = createRequire(`${process.cwd()}/`)
+const puppeteer = require("puppeteer-core")
+const axeSource = readFileSync(require.resolve("axe-core/axe.min.js"), "utf8")
+
+const [base, ...paths] = process.argv.slice(2)
+const viewports = [
+  { width: 1400, height: 900 },
+  { width: 390, height: 844, isMobile: true, hasTouch: true },
+]
+
+const browser = await puppeteer.launch({
+  executablePath: process.env.CHROME_PATH ?? "/usr/bin/chromium",
+  args: ["--no-sandbox", "--ignore-certificate-errors"],
+})
+const violations = []
+for (const path of paths) {
+  for (const scheme of ["light", "dark"]) {
+    for (const viewport of viewports) {
+      const page = await browser.newPage()
+      await page.setViewport(viewport)
+      // Reduced motion stops the home page terminal on one screen, so every
+      // run checks the same markup.
+      await page.emulateMediaFeatures([
+        { name: "prefers-color-scheme", value: scheme },
+        { name: "prefers-reduced-motion", value: "reduce" },
+      ])
+      await page.goto(base + path, {
+        waitUntil: "networkidle2",
+        timeout: 60000,
+      })
+      await page.evaluate(axeSource)
+      const result = await page.evaluate(() =>
+        axe.run(document, {
+          runOnly: {
+            type: "tag",
+            values: [
+              "wcag2a",
+              "wcag2aa",
+              "wcag21a",
+              "wcag21aa",
+              "wcag22aa",
+              "best-practice",
+            ],
+          },
+        })
+      )
+      for (const violation of result.violations) {
+        for (const node of violation.nodes) {
+          violations.push({
+            path,
+            scheme,
+            width: viewport.width,
+            id: violation.id,
+            impact: violation.impact,
+            target: node.target.join(" "),
+            html: node.html.slice(0, 160),
+            summary: node.failureSummary?.split("\n")[1]?.trim(),
+          })
+        }
+      }
+      await page.close()
+    }
+  }
+}
+await browser.close()
+console.log(JSON.stringify(violations, null, 1))
diff --git a/AGENTS.md b/AGENTS.md
index d5bc03e1e..00785cc65 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -16,6 +16,7 @@ its own.
 | Screenshots or feature images for a post          | `.claude/skills/blog-images/SKILL.md` |
 | Adding or updating a featured sponsor             | `.claude/skills/add-sponsor/SKILL.md` |
 | Bumping npm dependencies                          | `.claude/skills/bump-deps/SKILL.md`   |
+| Accessibility checks with axe-core and Lighthouse | `.claude/skills/a11y-check/SKILL.md`  |
 | A commit or PR                                    | `.claude/skills/ddev-commit/SKILL.md` |
 | A comment, in any code file                       | `.claude/rules/comments.md`           |
 
diff --git a/astro.config.mjs b/astro.config.mjs
index 27bb94b8d..c3d229666 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -25,6 +25,7 @@ import searchIndex from "./src/lib/search-index.js"
 import sitemap from "@astrojs/sitemap"
 import tailwindcss from "@tailwindcss/vite"
 import { addCopyButton } from "shiki-transformer-copy-button"
+import { focusableCode } from "./src/lib/shiki-focusable-code.mjs"
 import { SHIKI_THEMES } from "./src/const.ts"
 import { unified } from "@astrojs/markdown-remark"
 
@@ -134,8 +135,9 @@ export default defineConfig({
       // toggle: 3000, // 3 seconds
       transformers: [
         addCopyButton({
-          // visibility: 'hover', // if you want it to only show on hover
+          button: { "aria-label": "Copy code" },
         }),
+        focusableCode(),
       ],
     },
   },
diff --git a/src/components/AnimatedTerminal.astro b/src/components/AnimatedTerminal.astro
index c5a7d8ed5..dbb5cfc41 100644
--- a/src/components/AnimatedTerminal.astro
+++ b/src/components/AnimatedTerminal.astro
@@ -6,43 +6,44 @@
  * things drift out of sync!)
  */
 import { getLatestReleaseVersion } from "../lib/api"
+import { PauseIcon, PlayIcon } from "@heroicons/react/20/solid/index.js"
 const latestRelease = await getLatestReleaseVersion()
 
 // Pre-rendered ddev describe output — used for both the animation and noscript fallback
 const versionText = `DDEV version: ${latestRelease}`
-const versionLine = `│ ${versionText}${" ".repeat(83 - versionText.length)} │`
+const versionLine = `│ ${versionText}${" ".repeat(85 - versionText.length)} │`
 const describeOutput = `ddev describe
-┌─────────────────────────────────────────────────────────────────────────────────────┐
-│ Project: my-project ~/dev/my-project https://my-project.ddev.site                   │
-│ Docker platform: docker-desktop                                                     │
-│ Router: traefik                                                                     │
+┌───────────────────────────────────────────────────────────────────────────────────────┐
+│ Project: my-project ~/dev/my-project https://my-project.ddev.site                     │
+│ Docker platform: linux-docker                                                         │
+│ Router: traefik                                                                       │
 ${versionLine}
-├────────────┬──────┬────────────────────────────────────────────┬────────────────────┤
-│ SERVICE    │ STAT │ URL/PORT                                   │ INFO               │
-├────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
-│ web        │ <span class="text-green-500">OK</span>   │ https://my-project.ddev.site               │ php PHP 8.4        │
-│            │      │ InDocker -> Host:                          │ Server: nginx-fpm  │
-│            │      │  - web:80 -> 127.0.0.1:51046               │ Docroot: ''        │
-│            │      │  - web:443 -> 127.0.0.1:51047              │ Perf mode: none    │
-│            │      │  - web:8025 -> 127.0.0.1:51048             │ NodeJS: 24         │
-├────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
-│ db         │ <span class="text-green-500">OK</span>   │ InDocker -> Host:                          │ mysql:8.0          │
-│            │      │  - db:3306 -> 127.0.0.1:51045              │ User/Pass: 'db/db' │
-│            │      │                                            │ or 'root/root'     │
-├────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
-│ xhgui      │ <span class="text-green-500">OK</span>   │ https://my-project.ddev.site:8142          │                    │
-│            │      │ InDocker:                                  │                    │
-│            │      │  - xhgui:80                                │                    │
-│            │      │ Launch: ddev xhgui                         │                    │
-├────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
-│ Mailpit    │      │ Mailpit: https://my-project.ddev.site:8026 │                    │
-│            │      │ Launch: ddev mailpit                       │                    │
-├────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
-│ All URLs   │      │ https://my-project.ddev.site,              │                    │
-│            │      │ https://127.0.0.1:51047,                   │                    │
-│            │      │ http://my-project.ddev.site,               │                    │
-│            │      │ http://127.0.0.1:51046                     │                    │
-└────────────┴──────┴────────────────────────────────────────────┴────────────────────┘`
+├──────────────┬──────┬────────────────────────────────────────────┬────────────────────┤
+│ SERVICE      │ STAT │ URL/PORT                                   │ INFO               │
+├──────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
+│ web          │ <span class="text-green-400">OK</span>   │ https://my-project.ddev.site               │ php PHP 8.4        │
+│              │      │ InDocker -> Host:                          │ Server: nginx-fpm  │
+│              │      │  - web:80 -> 127.0.0.1:32865               │ Docroot: 'public'  │
+│              │      │  - web:443 -> 127.0.0.1:32866              │ Perf mode: none    │
+│              │      │  - web:8025 -> 127.0.0.1:32867             │ Node.js: 24        │
+├──────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
+│ db           │ <span class="text-green-400">OK</span>   │ InDocker -> Host:                          │ mariadb:11.8       │
+│              │      │  - db:3306 -> 127.0.0.1:32868              │ User/Pass: 'db/db' │
+│              │      │                                            │ or 'root/root'     │
+├──────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
+│ xhgui        │ <span class="text-green-400">OK</span>   │ https://my-project.ddev.site:8142          │                    │
+│              │      │ InDocker:                                  │                    │
+│              │      │  - xhgui:80                                │                    │
+│              │      │ Launch: ddev xhgui                         │                    │
+├──────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
+│ Mailpit      │      │ Mailpit: https://my-project.ddev.site:8026 │                    │
+│              │      │ Launch: ddev mailpit                       │                    │
+├──────────────┼──────┼────────────────────────────────────────────┼────────────────────┤
+│ Project URLs │      │ https://my-project.ddev.site               │                    │
+│              │      │ https://127.0.0.1:32866                    │                    │
+│              │      │ http://my-project.ddev.site                │                    │
+│              │      │ http://127.0.0.1:32865                     │                    │
+└──────────────┴──────┴────────────────────────────────────────────┴────────────────────┘`
 ---
 
 <script>
@@ -52,6 +53,8 @@ ${versionLine}
   interface Screen {
     clumps: Clump[]
     output: string
+    // Seconds it stays up once finished, before the next screen
+    hold: number
   }
 
   /**
@@ -66,6 +69,9 @@ ${versionLine}
   const terminalWrapper = document.querySelector('.terminal-wrapper') as HTMLElement
   const describeOutput = terminalWrapper?.dataset.describeOutput ?? ''
 
+  // Where a line holds until DDEV finishes its work, as in "... ready in 2.0s"
+  const WORK = "\v"
+
   /**
    * Output and animation settings for the things we want to show in the terminal.
    */
@@ -73,45 +79,82 @@ ${versionLine}
     {
       clumps: [
         { transition: "type", lines: 1, wait: 1000 },
-        { transition: "roll", lines: 4, wait: 1000 },
-        { transition: "roll", lines: 4, wait: 1000 },
-        { transition: "roll", lines: 3, wait: 1000 },
+        { transition: "roll", lines: 2, wait: 500 },
+        { transition: "roll", lines: 1, wait: 500 },
+        { transition: "roll", lines: 5, wait: 500 },
+        { transition: "roll", lines: 4, wait: 500 },
         { transition: "show", lines: 3 },
       ],
       output: `ddev start
 
 Starting my-project...
-Building project images...
-<span class="text-green-500">Project images built in 1s.</span>
- Network ddev-my-project_default  Created
- Container ddev-my-project-web  Started
- Container ddev-my-project-db  Started
-Waiting for containers to become ready: [web db]... ready in 1.0s
+Building project images....${WORK} built in 1.0s
+[+] up 3/3
+ <span class="text-green-400">✓</span> Network ddev-my-project_default <span class="text-green-400">Created</span>                                           <span class="text-violet-400">0.1s</span>
+ <span class="text-green-400">✓</span> Container ddev-my-project-web   <span class="text-green-400">Created</span>                                           <span class="text-violet-400">0.5s</span>
+ <span class="text-green-400">✓</span> Container ddev-my-project-db    <span class="text-green-400">Created</span>                                           <span class="text-violet-400">0.5s</span>
+Waiting for containers to become ready: [web db]...${WORK} ready in 2.0s
 Starting ddev-router, pushing config...
- Container ddev-router  Started
-Waiting for ddev-router to become ready... ready in 1.0s
-<span class="text-green-500">Successfully started my-project</span>
-<span class="text-green-500">Your project can be reached at https://my-project.ddev.site</span>
-<span class="text-green-500">See 'ddev describe' for alternate URLs.</span>`,
+[+] up 1/1
+ <span class="text-green-400">✓</span> Container ddev-router <span class="text-green-400">Created</span>                                                     <span class="text-violet-400">0.5s</span>
+Waiting for ddev-router to become ready...${WORK} ready in 1.0s
+<span class="text-green-400">Successfully started my-project</span>
+<span class="text-green-400">Your project can be reached at https://my-project.ddev.site</span>
+<span class="text-green-400">See 'ddev describe' for alternate URLs.</span>`,
+      hold: 4,
     },
     {
       clumps: [
-        { transition: "type", lines: 1, wait: 250 },
+        { transition: "type", lines: 1, wait: 1000 },
         { transition: "show", lines: 31 },
       ],
       output: describeOutput,
+      hold: 6,
     },
   ]
 
   // Element whose inner HTML will be our terminal output
   const stage = document.getElementById("animation-stage")
 
-  // Seconds to wait after animation’s finished, before moving on to the next screen
-  const secondsBetweenScreens = 5
-
   // Milliseconds between characters when “typing” in a line
   const typeCharacterDelay = 35
 
+  // The animation loops, so WCAG 2.2.2 asks for a way to pause it. With reduced
+  // motion it starts paused, on the last screen.
+  const toggle = document.getElementById("animation-toggle") as HTMLButtonElement
+  let paused = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let pending: (() => void) | undefined
+
+  // The animation's only `setTimeout()`, so pausing can hold the next step
+  const schedule = (callback: () => void, delay: number) => {
+    pending = callback
+    if (!paused) {
+      timer = setTimeout(() => {
+        pending = undefined
+        callback()
+      }, delay)
+    }
+  }
+
+  const setPaused = (value: boolean) => {
+    paused = value
+    toggle.setAttribute("aria-label", paused ? "Play animation" : "Pause animation")
+    toggle.querySelector("[data-icon='pause']")?.toggleAttribute("hidden", paused)
+    toggle.querySelector("[data-icon='play']")?.toggleAttribute("hidden", !paused)
+  }
+
+  toggle.addEventListener("click", () => {
+    setPaused(!paused)
+    if (paused) {
+      clearTimeout(timer)
+    } else if (pending) {
+      const callback = pending
+      pending = undefined
+      callback()
+    }
+  })
+
   // Initialize state variables
   let currentScreenIndex: number,
     currentClumpIndex: number,
@@ -159,7 +202,7 @@ Waiting for ddev-router to become ready... ready in 1.0s
     const chars = outputLines[currentLine].split("")
 
     if (currentChar < chars.length) {
-      setTimeout(() => {
+      schedule(() => {
         appendOutput(chars[currentChar])
         currentChar += 1
         typeInText(callback)
@@ -170,6 +213,22 @@ Waiting for ddev-router to become ready... ready in 1.0s
     }
   }
 
+  // Holds at `WORK` for as long as the rest of the line reports
+  const appendLine = (line: string, then: () => void) => {
+    const [before, after] = line.split(WORK)
+    if (after === undefined) {
+      appendOutput(line + "\n")
+      then()
+      return
+    }
+    appendOutput(before)
+    const seconds = parseFloat(after.match(/in ([\d.]+)s/)?.[1] ?? "1")
+    schedule(() => {
+      appendOutput(after + "\n")
+      then()
+    }, seconds * 1000)
+  }
+
   /**
    * Transition the next line to the displayed output.
    */
@@ -183,16 +242,16 @@ Waiting for ddev-router to become ready... ready in 1.0s
       })
     } else if (currentClump.transition === "roll") {
       // show + delay
-      appendOutput(outputLines[currentLine] + "\n")
+      const line = outputLines[currentLine]
       currentClumpLine += 1
       currentLine += 1
-      setTimeout(next, 100)
+      appendLine(line, () => schedule(next, 100))
     } else if (currentClump.transition === "show") {
       // show + no delay
-      appendOutput(outputLines[currentLine] + "\n")
+      const line = outputLines[currentLine]
       currentClumpLine += 1
       currentLine += 1
-      next()
+      appendLine(line, next)
     }
   }
 
@@ -200,7 +259,7 @@ Waiting for ddev-router to become ready... ready in 1.0s
    * Advance to the next clump after the given duration.
    */
   const nextClump = (duration: number) => {
-    setTimeout(() => {
+    schedule(() => {
       currentClumpIndex += 1
       currentClump = currentScreen.clumps[currentClumpIndex]
       currentClumpLine = 0
@@ -212,7 +271,7 @@ Waiting for ddev-router to become ready... ready in 1.0s
    * Advance to the next screen after a predefined duration.
    */
   const nextScreen = () => {
-    setTimeout(() => {
+    schedule(() => {
       if (currentScreenIndex < screens.length - 1) {
         currentScreenIndex += 1
       } else {
@@ -221,7 +280,7 @@ Waiting for ddev-router to become ready... ready in 1.0s
 
       initScreen(currentScreenIndex)
       next()
-    }, secondsBetweenScreens * 1000)
+    }, currentScreen.hold * 1000)
   }
 
   /**
@@ -242,8 +301,17 @@ Waiting for ddev-router to become ready... ready in 1.0s
    * On load, initialize the first screen and start playing.
    */
   window.addEventListener("load", () => {
-    initScreen(0)
-    next()
+    setPaused(paused)
+    if (paused) {
+      stage.innerHTML = describeOutput
+      pending = () => {
+        initScreen(0)
+        next()
+      }
+    } else {
+      initScreen(0)
+      next()
+    }
   })
 </script>
 
@@ -251,9 +319,10 @@ Waiting for ddev-router to become ready... ready in 1.0s
   /* data-theme is set by the inline head script before body renders,
    * so these rules apply on the very first paint with no flash. */
   html[data-theme] #noscript-pre { display: none; }
-  html:not([data-theme]) #animated-pre { display: none; }
+  html:not([data-theme]) #animated-pre,
+  html:not([data-theme]) #animation-toggle { display: none; }
 
-  /* The output is a fixed 87x32 character grid: this font size fits 87 columns
+  /* The output is a fixed 89x32 character grid: this font size fits 89 columns
    * inside the 40rem the caller gives it, and the height is in `em` so the box
    * stays in step with the font. */
   .terminal-body {
@@ -264,12 +333,26 @@ Waiting for ddev-router to become ready... ready in 1.0s
 </style>
 
 <div class="terminal-wrapper rounded-lg shadow-lg" style="background: #2e3440;" data-describe-output={describeOutput}>
-  <div class="top-bar flex p-3 space-x-2 rounded-t-lg" style="background: #2e3440;">
+  <div class="top-bar flex items-center gap-2 p-3 rounded-t-lg" style="background: #2e3440;">
     <div class="block rounded-full bg-slate-500 w-3 h-3"></div>
     <div class="block rounded-full bg-slate-500 w-3 h-3"></div>
     <div class="block rounded-full bg-slate-500 w-3 h-3"></div>
+    <!-- Beside the dots, since narrower screens clip the terminal's right edge -->
+    <button
+      id="animation-toggle"
+      type="button"
+      class="ml-2 -my-1 rounded p-1 text-slate-400 hover:text-white"
+      aria-label="Pause animation"
+    >
+      <PauseIcon className="w-4 h-4" aria-hidden={true} data-icon="pause" />
+      <PlayIcon className="w-4 h-4" aria-hidden={true} data-icon="play" hidden />
+    </button>
   </div>
-  <div class="overflow-hidden my-0">
+  <p class="sr-only">
+    A terminal runs ddev start, which starts the project's containers, then ddev
+    describe, which lists the project's services and their URLs.
+  </p>
+  <div class="overflow-hidden my-0" aria-hidden="true">
     <div class="terminal-body p-4 text-slate-300">
       <pre id="animated-pre"><span class="select-none text-slate-400">→ </span><span id="animation-stage" /></pre>
       <pre id="noscript-pre"><span class="select-none text-slate-400">→ </span><span set:html={describeOutput} /></pre>
diff --git a/src/components/AppLogos.astro b/src/components/AppLogos.astro
index 35b74988c..a8bab7514 100644
--- a/src/components/AppLogos.astro
+++ b/src/components/AppLogos.astro
@@ -1,4 +1,6 @@
 ---
+import { logoUrl } from "../lib/images"
+
 /**
  * Quickstarts for popular CMSes and frameworks, as named logos, used on the
  * homepage: the six project types used most on /usage-stats/, in that order,
@@ -35,7 +37,7 @@ const logos = [
           >
             <img
               class={["h-12 opacity-75 group-hover:opacity-100 dark:invert", ...logo.extraClasses].join(" ")}
-              src={logo.src}
+              src={logoUrl(logo.src)}
               alt=""
             />
             {logo.name}
diff --git a/src/components/BlogFeatures.astro b/src/components/BlogFeatures.astro
index 834951da9..ded3bb870 100644
--- a/src/components/BlogFeatures.astro
+++ b/src/components/BlogFeatures.astro
@@ -23,7 +23,7 @@ const recentPosts = posts
       </p>
     </div>
     <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
-      {recentPosts.map((post) => <BlogPostCard post={post} />)}
+      {recentPosts.map((post) => <BlogPostCard post={post} level={3} />)}
     </div>
   </div>
 </div>
diff --git a/src/components/BlogPostCard.astro b/src/components/BlogPostCard.astro
index 4681c4d26..42ed2eb0a 100644
--- a/src/components/BlogPostCard.astro
+++ b/src/components/BlogPostCard.astro
@@ -8,13 +8,16 @@ import { Picture } from 'astro:assets'
 import { resolveImage } from "../lib/images"
 interface Props {
   post: CollectionEntry<"blog">
+  // The title's heading level: 3 under a section heading, 2 on a listing page
+  level?: 2 | 3
 }
 
 import CategoryPills from "./CategoryPills.astro"
 import { getEntry } from "astro:content"
 import { getSlug, formatDate } from "../lib/api"
 
-const { post } = Astro.props
+const { post, level = 2 } = Astro.props
+const Title = `h${level}`
 const { remarkPluginFrontmatter } = await render(post)
 
 const author = await getEntry("authors", getSlug(post.data.author))
@@ -75,11 +78,11 @@ const categories = post.data.categories.length ? post.data.categories : []
   <div class="flex-1 bg-gray-100 p-6 flex flex-col justify-between dark:bg-slate-600">
     <div class="flex-1">
       <CategoryPills categories={categories} />
-      <a href={`/blog/${post.id}`} class="block mt-2 after:absolute after:inset-0">
-        <p class="text-xl font-semibold text-gray-900 dark:text-white">
+      <Title class="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
+        <a href={`/blog/${post.id}`} class="after:absolute after:inset-0">
           {post.data.title}
-        </p>
-      </a>
+        </a>
+      </Title>
     </div>
     <div class="mt-6 flex items-center">
       {
diff --git a/src/components/CtaButton.astro b/src/components/CtaButton.astro
index ada45c8ac..c0b7c0cae 100644
--- a/src/components/CtaButton.astro
+++ b/src/components/CtaButton.astro
@@ -11,7 +11,7 @@ export interface Props {
 
 const typeClasses = {
   default: `border border-transparent text-white bg-blue-650 hover:bg-blue-800`,
-  hollow: `border border-blue-650 text-blue-650 hover:border-blue-800 hover:text-blue-800 dark:border-slate-400 dark:text-slate-300 dark:hover:border-white dark:hover:text-white`,
+  hollow: `border border-blue-700 text-blue-700 hover:border-blue-800 hover:text-blue-800 dark:border-slate-400 dark:text-slate-300 dark:hover:border-white dark:hover:text-white`,
 }
 
 const sizeClasses = {
@@ -31,7 +31,6 @@ const { text, href, type = "default", size = "default", target, title } =
     typeClasses[type]}
   target={target}
   title={title}
-  role="button"
 >
   {text}
 </a>
diff --git a/src/components/FeaturedSponsors.astro b/src/components/FeaturedSponsors.astro
index 7836d6797..d385dd526 100644
--- a/src/components/FeaturedSponsors.astro
+++ b/src/components/FeaturedSponsors.astro
@@ -1,5 +1,6 @@
 ---
 import featuredSponsors from "../featured-sponsors.json"
+import { logoUrl } from "../lib/images"
 
 /**
  * Heights for logos that must render larger than the rest, keyed by the name
@@ -36,12 +37,12 @@ regularSponsors.map((sponsor) => {
                 target="_blank"
             >
               <img
-                  src={sponsor.logo}
+                  src={logoUrl(sponsor.logo)}
                   class="block w-auto h-full dark:hidden"
                   alt={`${sponsor.name} logo`}
               />
               <img
-                  src={sponsor.darklogo}
+                  src={logoUrl(sponsor.darklogo)}
                   class="hidden dark:block w-auto h-full"
                   alt={`${sponsor.name} logo`}
               />
@@ -65,12 +66,12 @@ regularSponsors.map((sponsor) => {
             target="_blank"
         >
           <img
-              src={sponsor.logo}
+              src={logoUrl(sponsor.logo)}
               class="block w-auto h-full dark:hidden"
               alt={`${sponsor.name} logo`}
           />
           <img
-              src={sponsor.darklogo}
+              src={logoUrl(sponsor.darklogo)}
               class="hidden dark:block w-auto h-full"
               alt={`${sponsor.name} logo`}
           />
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 60763ce63..0bf080438 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -19,6 +19,7 @@ import {
 } from "../const"
 
 import Icon from "./Icon.astro"
+import { logoUrl } from "../lib/images"
 
 /* `me` marks a link that identifies the project itself, for rel="me". */
 interface FooterLink {
@@ -89,7 +90,7 @@ const feeds = [
         <span class="sr-only">DDEV home</span>
         <img
           class="h-8 w-auto dark:hidden"
-          src="/logos/ddev.svg"
+          src={logoUrl("/logos/ddev.svg")}
           alt="DDEV logo"
           aria-hidden="true"
           width="293"
@@ -97,7 +98,7 @@ const feeds = [
         />
         <img
           class="h-8 w-auto hidden dark:block"
-          src="/logos/dark-ddev.svg"
+          src={logoUrl("/logos/dark-ddev.svg")}
           alt="DDEV logo"
           aria-hidden="true"
           width="293"
diff --git a/src/components/Header.astro b/src/components/Header.astro
index a96778753..2e8847728 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -6,6 +6,7 @@ import { GITHUB_URL, DOCUMENTATION_URL } from "../const"
 import { MagnifyingGlassIcon, Bars2Icon } from "@heroicons/react/24/solid/index.js"
 import SponsorsBanner from "./SponsorsBanner.astro"
 import ThemeToggle from "./ThemeToggle.astro"
+import { logoUrl } from "../lib/images"
 
 // Links leave the bar from the end as it runs out of room, so this is also
 // least-important-last.
@@ -28,9 +29,22 @@ const navItems = [
 
   const HIDDEN = "data-nav-hidden"
 
+  // `details` opens and closes the menu on its own, but not on Escape or a
+  // click elsewhere, as a menu is expected to.
+  if (menu) {
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && menu.open) {
+        menu.open = false
+        menu.querySelector("summary")?.focus()
+      }
+    })
+    document.addEventListener("click", (event) => {
+      if (menu.open && !menu.contains(event.target as Node)) menu.open = false
+    })
+  }
+
   // Links leave the bar one at a time as it fills up, instead of all at once at
-  // a breakpoint that can only guess whether they fit. Opening and closing the
-  // menu is the browser's job, so there's none of it here.
+  // a breakpoint that can only guess whether they fit.
   if (nav && list && logo && icons && menu) {
     const items = Array.from(list.querySelectorAll<HTMLElement>("[data-nav-item]"))
     const menuItems = Array.from(menu.querySelectorAll<HTMLElement>("[data-nav-item]"))
@@ -111,10 +125,10 @@ const navItems = [
     aria-label="Main"
   >
     <a href="/" id="nav-logo" class="relative block shrink-0 cursor-pointer -ml-2">
-      <span class="sr-only">DDEV logo</span>
+      <span class="sr-only">DDEV home</span>
       <img
         class="h-8 w-auto sm:h-10 dark:hidden"
-        src="/logos/ddev.svg"
+        src={logoUrl("/logos/ddev.svg")}
         alt="DDEV logo"
         aria-hidden="true"
         width="293"
@@ -122,7 +136,7 @@ const navItems = [
       />
       <img
         class="h-8 w-auto sm:h-10 hidden dark:block"
-        src="/logos/dark-ddev.svg"
+        src={logoUrl("/logos/dark-ddev.svg")}
         alt="DDEV logo"
         aria-hidden="true"
         width="293"
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index bf3ca860d..6235d5cbb 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -16,10 +16,10 @@ import { CloudIcon } from "@heroicons/react/24/solid/index.js"
         <h1 class="text-4xl xl:text-5xl font-bold dark:text-white">
           Docker-based PHP and Node.js development environments.
         </h1>
-        <h2 class="text-xl sm:text-2xl my-6 dark:text-slate-400">
+        <p class="text-xl sm:text-2xl my-6 dark:text-slate-400">
           Ready in minutes, the same for everyone on your team, and as many
           projects at once as you need. No Docker skills required.
-        </h2>
+        </p>
 
         <div class="my-8 flex flex-col gap-4 sm:flex-row sm:flex-wrap">
           <CtaButton text="Get Started" href="/get-started" />
diff --git a/src/components/PostUpdate.astro b/src/components/PostUpdate.astro
index 18474a307..8783a2465 100644
--- a/src/components/PostUpdate.astro
+++ b/src/components/PostUpdate.astro
@@ -16,11 +16,11 @@ const { date, comment } = Astro.props
   }
 </style>
 
-<aside
+<div
   class="updated-comment w-full rounded-lg text-sm p-6 mb-12 shadow-xl dark:bg-slate-600"
 >
-  <p class="text-navy-500 font-mono uppercase text-xs tracking-wide dark:text-slate-400">
+  <p class="text-navy-500 font-mono uppercase text-xs tracking-wide dark:text-slate-300">
     <b>Updated {formatDate(date, { month: "long" })}</b>
   </p>
   {comment && <div class="mt-2 dark:text-white" set:html={marked.parse(comment)} />}
-</aside>
+</div>
diff --git a/src/components/SoftwareLogos.astro b/src/components/SoftwareLogos.astro
index 47da57968..c9603ea72 100644
--- a/src/components/SoftwareLogos.astro
+++ b/src/components/SoftwareLogos.astro
@@ -1,4 +1,6 @@
 ---
+import { logoUrl } from "../lib/images"
+
 /**
  * The stack DDEV runs for you: languages and databases, the databases in order
  * of use on /usage-stats/, then web servers and the two most used service
@@ -89,7 +91,7 @@ const rows = [
         <div class="contents sm:flex sm:flex-wrap sm:items-center sm:justify-center sm:gap-x-10 sm:gap-y-10 lg:gap-x-14">
           {row.map((logo) => (
             <a href={logo.href} target="_blank" rel="noopener noreferrer" class="opacity-75 hover:opacity-100">
-              <img class={`${logo.class} dark:invert`} src={logo.src} alt={logo.title} />
+              <img class={`${logo.class} dark:invert`} src={logoUrl(logo.src)} alt={logo.title} />
             </a>
           ))}
         </div>
diff --git a/src/components/SponsorsBanner.astro b/src/components/SponsorsBanner.astro
index 680e72d12..65db044b3 100644
--- a/src/components/SponsorsBanner.astro
+++ b/src/components/SponsorsBanner.astro
@@ -172,7 +172,7 @@ const isOnSustainabilityPage = currentPath === '/blog/sustainability-for-ddev/'
   }
 </style>
 
-<div class="ddev-sponsor-banner">
+<aside class="ddev-sponsor-banner" aria-label="Sponsorship goal">
   <div class="ddev-sponsor-banner__container site-container site-gutter">
     <div class="ddev-sponsor-banner__content">
       <!-- Desktop Layout -->
@@ -222,7 +222,7 @@ const isOnSustainabilityPage = currentPath === '/blog/sustainability-for-ddev/'
       Sponsor DDEV
     </a>
   </div>
-</div>
+</aside>
 
 <script is:inline>
   // This runs immediately during HTML parsing, before any CSS transitions
diff --git a/src/components/Terminal.astro b/src/components/Terminal.astro
index ac84ef603..347b571ed 100644
--- a/src/components/Terminal.astro
+++ b/src/components/Terminal.astro
@@ -14,8 +14,10 @@ import { Code } from "astro/components" // Keep this import
 
 // 1. Import the transformer here!
 import { addCopyButton } from 'shiki-transformer-copy-button';
+import { focusableCode } from '../lib/shiki-focusable-code.mjs';
 import type { ShikiTransformer } from 'shiki';
 import { SHIKI_THEMES } from '../const';
+import { logoUrl } from '../lib/images';
 
 export interface Props {
   code: string
@@ -117,7 +119,8 @@ const customizeCopyButton = (text: string): ShikiTransformer => {
 // 2. Define the transformers array for this component
 const componentTransformers = [
     addPromptSymbol(promptSymbol, promptLineIndices),
-    addCopyButton(),
+    addCopyButton({ button: { 'aria-label': 'Copy code' } }),
+    focusableCode(),
     customizeCopyButton(copyText)
 ];
 ---
@@ -130,7 +133,7 @@ const componentTransformers = [
       <div class="block rounded-full bg-slate-500 w-3 h-3"></div>
     )}
     {type == "powershell" && (
-      <img src="/logos/powershell.svg" alt="" class="block w-3 h-3 m-0 self-start" />
+      <img src={logoUrl("/logos/powershell.svg")} alt="" class="block w-3 h-3 m-0 self-start" />
       <div class="flex space-x-2">
         <div class="block w-3 h-3 items-end"><MinusIcon /></div>
         <div class="block w-3 h-3 items-end"><StopIcon /></div>
@@ -138,7 +141,7 @@ const componentTransformers = [
       </div>
     )}
     {type == "powershell-ubuntu" && (
-      <img src="/logos/tux.svg" alt="" class="block w-3 h-3 m-0 self-start" />
+      <img src={logoUrl("/logos/tux.svg")} alt="" class="block w-3 h-3 m-0 self-start" />
       <div class="flex space-x-2">
         <div class="block w-3 h-3 items-end"><MinusIcon /></div>
         <div class="block w-3 h-3 items-end"><StopIcon /></div>
diff --git a/src/components/UsageStatChart.astro b/src/components/UsageStatChart.astro
index f99e85970..d528cd99b 100644
--- a/src/components/UsageStatChart.astro
+++ b/src/components/UsageStatChart.astro
@@ -30,7 +30,7 @@ const {
         type="button"
         data-view-btn="bars"
         aria-pressed="true"
-        class="px-3 py-1 text-gray-600 transition-colors aria-pressed:bg-blue-600 aria-pressed:text-white dark:text-slate-300"
+        class="px-3 py-1 text-gray-600 transition-colors aria-pressed:bg-blue-700 aria-pressed:text-white dark:text-slate-300 dark:aria-pressed:text-white"
       >
         Bars
       </button>
@@ -38,7 +38,7 @@ const {
         type="button"
         data-view-btn="pie"
         aria-pressed="false"
-        class="border-l border-gray-200 px-3 py-1 text-gray-600 transition-colors aria-pressed:bg-blue-600 aria-pressed:text-white dark:border-slate-600 dark:text-slate-300"
+        class="border-l border-gray-200 px-3 py-1 text-gray-600 transition-colors aria-pressed:bg-blue-700 aria-pressed:text-white dark:border-slate-600 dark:text-slate-300 dark:aria-pressed:text-white"
       >
         Pie
       </button>
diff --git a/src/components/quickstart/Cloud.astro b/src/components/quickstart/Cloud.astro
index 5007807aa..215602fab 100644
--- a/src/components/quickstart/Cloud.astro
+++ b/src/components/quickstart/Cloud.astro
@@ -15,7 +15,7 @@ const { latestVersion } = Astro.props
 
 <div class="prose dark:prose-invert">
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">1/2</small>Launch a
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">1/2</small>Launch a
     Provider &amp; Install DDEV
   </h2>
 
diff --git a/src/components/quickstart/Examples.astro b/src/components/quickstart/Examples.astro
index 6734b2116..4d2e3a027 100644
--- a/src/components/quickstart/Examples.astro
+++ b/src/components/quickstart/Examples.astro
@@ -5,7 +5,7 @@ const { itemNumber, terminalType, terminalSymbol } = Astro.props;
 
 <div class="prose dark:prose-invert">
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">{itemNumber}</small>Create a
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">{itemNumber}</small>Create a
     Project
   </h2>
 
diff --git a/src/components/quickstart/Linux.astro b/src/components/quickstart/Linux.astro
index 2a4fe6059..444cd8765 100644
--- a/src/components/quickstart/Linux.astro
+++ b/src/components/quickstart/Linux.astro
@@ -21,7 +21,7 @@ const { latestVersion } = Astro.props
   </p>
 
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">1/4</small>Install
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">1/4</small>Install
     Docker
   </h2>
 
@@ -47,7 +47,7 @@ const { latestVersion } = Astro.props
 
 <div class="prose dark:prose-invert">
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">2/4</small>Install DDEV
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">2/4</small>Install DDEV
   </h2>
 
   <Tabs order={["Debian/Ubuntu","Fedora/CentOS","Arch","Install Script"]}>
@@ -104,7 +104,7 @@ $ sudo dnf install -y --refresh ddev
   <Terminal type="ubuntu" code={`$ ddev -v\nddev version ${latestVersion}`} />
 
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">3/4</small>Run <code>mkcert -install</code>
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">3/4</small>Run <code>mkcert -install</code>
   </h2>
 
   <p>Running <code>mkcert -install</code> is a one-time operation. It allows your browser to trust the HTTPS/TLS certificates served by DDEV.</p>
diff --git a/src/components/quickstart/Mac.astro b/src/components/quickstart/Mac.astro
index 747a19f7c..cd95f07fc 100644
--- a/src/components/quickstart/Mac.astro
+++ b/src/components/quickstart/Mac.astro
@@ -21,7 +21,7 @@ const { latestVersion } = Astro.props
   </p>
 
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">1/4</small>Install OrbStack Docker Provider
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">1/4</small>Install OrbStack Docker Provider
   </h2>
 </div>
 
@@ -56,7 +56,7 @@ const { latestVersion } = Astro.props
   <Terminal code={`→ docker version`} />
 
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">2/4</small>Install DDEV
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">2/4</small>Install DDEV
   </h2>
 </div>
 
@@ -81,7 +81,7 @@ const { latestVersion } = Astro.props
   <Terminal code={`→ ddev -v\nddev version ${latestVersion}`} />
 
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">3/4</small>Run <code>mkcert -install</code>
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">3/4</small>Run <code>mkcert -install</code>
   </h2>
 
   <p>Running <code>mkcert -install</code> is a one-time operation. It allows your browser to trust the HTTPS/TLS certificates served by DDEV.</p>
diff --git a/src/components/quickstart/Windows.astro b/src/components/quickstart/Windows.astro
index 0ea190f66..7833d70b0 100644
--- a/src/components/quickstart/Windows.astro
+++ b/src/components/quickstart/Windows.astro
@@ -26,7 +26,7 @@ const { latestVersion } = Astro.props
   </p>
 
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">1/3</small>Install WSL2
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">1/3</small>Install WSL2
     with Ubuntu
   </h2>
 
@@ -54,7 +54,7 @@ const { latestVersion } = Astro.props
 
 <div class="prose dark:prose-invert">
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">2/3</small>
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">2/3</small>
     Run the Installer
   </h2>
 
@@ -90,7 +90,7 @@ const { latestVersion } = Astro.props
 
 <div class="prose dark:prose-invert">
   <h2 class="text-3xl mt-24">
-    <small class="block font-mono text-xs text-gray-500">{itemNumber}</small>Create a
+    <small class="block font-mono text-xs text-gray-500 dark:text-gray-400">{itemNumber}</small>Create a
     Project
   </h2>
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1147f8e78..572b22f5a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -143,8 +143,13 @@ import "../styles/global.css"
     <StructuredData data={jsonLd} />
   </head>
   <body class="dark:bg-slate-800">
+    <a
+      href="#content"
+      class="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-50 focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:font-bold focus:text-navy-300 focus:shadow-lg dark:focus:bg-slate-700 dark:focus:text-white"
+      >Skip to content</a
+    >
     <Header />
-    <div class="mx-auto">
+    <div id="content" tabindex="-1" class="mx-auto outline-none">
       <slot />
     </div>
     <Footer />
diff --git a/src/lib/images.ts b/src/lib/images.ts
index 68536d426..fb1701641 100644
--- a/src/lib/images.ts
+++ b/src/lib/images.ts
@@ -13,3 +13,17 @@ export async function resolveImage(path: string) {
   const key = `/public${path}`
   return images[key] ? (await images[key]()).default : path
 }
+
+/**
+ * Files under `public/logos` as Astro assets, so a page links each through a
+ * URL with its content hash. Cloudflare tells browsers to keep `/logos/` for
+ * hours, so a logo replaced under the same name would show its old version
+ * until a hard refresh. The files stay in `public` for the README badges.
+ */
+const logos = import.meta.glob<{ default: ImageMetadata }>("/public/logos/*", {
+  eager: true,
+})
+
+export function logoUrl(path: string) {
+  return logos[`/public${path}`]?.default.src ?? path
+}
diff --git a/src/lib/shiki-focusable-code.mjs b/src/lib/shiki-focusable-code.mjs
new file mode 100644
index 000000000..7d66df426
--- /dev/null
+++ b/src/lib/shiki-focusable-code.mjs
@@ -0,0 +1,16 @@
+/**
+ * Moves Shiki's `tabindex` from `pre` to `code`, which is what scrolls once
+ * global.css lets the copy button overflow the `pre`, so a keyboard can scroll
+ * a long line into view.
+ */
+export function focusableCode() {
+  return {
+    name: "focusable-code",
+    pre(node) {
+      delete node.properties.tabindex
+    },
+    code(node) {
+      node.properties.tabindex = "0"
+    },
+  }
+}
diff --git a/src/pages/download.astro b/src/pages/download.astro
index b7090111d..0b19aab08 100644
--- a/src/pages/download.astro
+++ b/src/pages/download.astro
@@ -5,6 +5,7 @@ import HelpLinks from "../components/HelpLinks.astro"
 import ReleaseLinks from "../components/ReleaseLinks.astro"
 import { getLatestReleaseVersion } from "../lib/api"
 import { GITHUB_URL } from "../const"
+import { logoUrl } from "../lib/images"
 
 const title = "Download DDEV"
 
@@ -170,13 +171,13 @@ const downloads = {
       <p class="text-2xl text-gray-600 my-4 dark:text-slate-400">
         <a
         href={`${GITHUB_URL}/releases/tag/${rawVersion}`}
-        class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+        class="text-blue-700 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
         target="_blank"
         >
           {rawVersion} release notes
         </a> · <a
           href={`${GITHUB_URL}/releases`}
-          class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+          class="text-blue-700 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
           target="_blank"
         >
         View all releases
@@ -191,7 +192,7 @@ const downloads = {
             Most users (except on Windows) should use package managers like Homebrew (macOS) and apt (Ubuntu).
           </p>
           <p class="dark:text-slate-300">
-            See <a href="/get-started" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">quick instructions</a> or <a href={`https://docs.ddev.com/en/stable/users/install/ddev-installation/`} target="_blank" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">full installation docs</a>.
+            See <a href="/get-started" class="text-blue-700 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">quick instructions</a> or <a href={`https://docs.ddev.com/en/stable/users/install/ddev-installation/`} target="_blank" class="text-blue-700 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">full installation docs</a>.
           </p>
         </div>
 
@@ -230,7 +231,7 @@ const downloads = {
                     <span class="sr-only">Cloudsmith</span>
                     <img
                       class="h-6 w-auto dark:hidden"
-                      src="/logos/cloudsmith.svg"
+                      src={logoUrl("/logos/cloudsmith.svg")}
                       alt="Cloudsmith logo"
                       aria-hidden="true"
                       width="164"
@@ -238,7 +239,7 @@ const downloads = {
                     />
                     <img
                       class="h-6 w-auto hidden dark:block"
-                      src="/logos/cloudsmith-dark.svg"
+                      src={logoUrl("/logos/cloudsmith-dark.svg")}
                       alt="Cloudsmith logo"
                       aria-hidden="true"
                       width="164"
@@ -251,11 +252,10 @@ const downloads = {
                       href="https://cloudsmith.com"
                       target="_blank"
                       rel="noopener"
-                      class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                      class="text-blue-700 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                     >
-                      Cloudsmith
-                    </a>
-                    . Cloudsmith is the only fully hosted, cloud-native, universal package
+                      Cloudsmith</a
+                    >. Cloudsmith is the only fully hosted, cloud-native, universal package
                     management solution, that enables your organization to create, store and share
                     packages in any format, to any place, with total confidence.
                   </p>
diff --git a/src/pages/sponsor.astro b/src/pages/sponsor.astro
index dbf3c3c29..afe097413 100644
--- a/src/pages/sponsor.astro
+++ b/src/pages/sponsor.astro
@@ -150,7 +150,7 @@ const sponsorshipTiers = [
                 <article class="relative flex flex-col rounded-2xl border border-gray-200 bg-gray-100 p-6 shadow-sm transition hover:border-blue-300 hover:shadow-md dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-500">
                   <p class="text-4xl font-bold text-gray-950 dark:text-white">
                     ${tier.amount} / €{tier.amount}{" "}
-                    <span class="text-base font-medium text-gray-500 dark:text-gray-400">
+                    <span class="text-base font-medium text-gray-600 dark:text-gray-400">
                       per month
                     </span>
                   </p>
diff --git a/src/styles/global.css b/src/styles/global.css
index 32444e4b3..276b61722 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -181,10 +181,14 @@ mark {
   @apply dark:bg-[blue];
 }
 
-/* The panel `details` opens, positioned against the page rather than the
- * summary, so it hangs from the top right corner as it always has. */
+/* The panel `details` opens, hung below the summary so the button that
+ * closes it stays visible. */
+.nav-menu {
+  @apply relative;
+}
+
 .menu {
-  @apply absolute top-0 right-0 max-w-full bg-white px-8 py-4 z-30 text-center shadow-2xl rounded-lg m-3 dark:bg-slate-800 dark:text-white;
+  @apply absolute top-full right-0 mt-3 w-max max-w-[calc(100vw-2rem)] bg-white px-8 py-4 z-30 text-center shadow-2xl rounded-lg dark:bg-slate-800 dark:text-white;
 }
 
 /* The summary is the menu button, so it loses the disclosure triangle. */
@@ -279,7 +283,7 @@ html.dark .terminal-wrapper .top-bar {
 }
 
 .tab {
-  @apply px-3 py-1 leading-none font-mono font-bold text-sm text-gray-500 hover:text-black;
+  @apply px-3 py-1 leading-none font-mono font-bold text-sm text-gray-500 hover:text-black dark:text-gray-400;
 
   &:hover {
     @apply dark:text-white;
@@ -290,10 +294,10 @@ html.dark .terminal-wrapper .top-bar {
   }
 
   &.active {
-    @apply text-black dark:text-gray-300;
+    @apply text-black dark:text-white;
 
     span {
-      @apply border-solid border-black dark:border-gray-300;
+      @apply border-solid border-black dark:border-white;
     }
   }
 }

From 5703e8f36a090b477fc4550e2c07541b1bc1420f Mon Sep 17 00:00:00 2001
From: Stanislav Zhuk <stasadev@gmail.com>
Date: Fri, 23 Oct 2026 19:49:03 +0300
Subject: [PATCH 2/3] fix: raise contrast of code comments and brand page links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Short Summary (TL;DR)

Fixes the contrast problems axe-core still found on `/brand/` and in light-theme code comments, which the first round missed because it checked neither.

## How This PR Solves The Issue

- Code comments: the `github-light-high-contrast` comment color reads at 3.9:1 on the site's code background, so a CSS rule darkens it to 4.8:1. Dark mode keeps its own color. This affected 29 posts.
- `/brand/`: the "Download SVG" links use `text-blue-700`, as `/download` already does, and the logo previews link the hashed `/_astro/` copies. The download links keep `/logos/` so the file name and URL stay stable.
- The `a11y-check` skill now lists `/brand/` and asks for a post with comments in its code blocks.

## Manual Testing Instructions

Compare https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev/ with https://ddev.com/ in the light theme:

- `/blog/shopware-on-ddev/`: comments in the nginx code block are darker.
- `/brand/`: "Download SVG" is darker blue, image URLs start with `/_astro/`, and the downloaded file is still named `ddev.svg`.

## Automated Testing Overview

axe-core on 13 page types, including `/brand/` and `/blog/shopware-on-ddev/`, in both themes at 1400 and 390 px wide, reports no violations.

🤖 Developed with assistance from [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .claude/skills/a11y-check/SKILL.md |  9 ++++++---
 src/pages/brand.mdx                | 11 ++++++-----
 src/styles/global.css              |  6 ++++++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/.claude/skills/a11y-check/SKILL.md b/.claude/skills/a11y-check/SKILL.md
index d9ef1c771..71b5e0266 100644
--- a/.claude/skills/a11y-check/SKILL.md
+++ b/.claude/skills/a11y-check/SKILL.md
@@ -43,11 +43,14 @@ Pass every page type the change can reach. For a change to the layout,
 header, footer, or `global.css`, that is all of them:
 
 ```text
-/ /about/ /blog/ /blog/<a recent post>/ /blog/author/ /blog/author/<id>/
-/blog/category/ /blog/category/<slug>/ /download/ /get-started/ /sponsor/
-/usage-stats/
+/ /about/ /blog/ /blog/<a post>/ /blog/author/ /blog/author/<id>/
+/blog/category/ /blog/category/<slug>/ /brand/ /download/ /get-started/
+/sponsor/ /usage-stats/
 ```
 
+For the post, pick one whose code blocks have comments in them, such as
+`/blog/shopware-on-ddev/`, since comments are the lightest code color.
+
 The script checks each path in light and dark at 1400 and 390 px wide, since
 some problems show in only one theme or at one width. It emulates reduced
 motion, which stops the home page terminal on its `ddev describe` screen.
diff --git a/src/pages/brand.mdx b/src/pages/brand.mdx
index dfea3d5af..38fe4d074 100644
--- a/src/pages/brand.mdx
+++ b/src/pages/brand.mdx
@@ -6,12 +6,13 @@ index: true
 ---
 
 import { BRAND_GUIDE_URL, LOGOS_REPO_URL, ORG_NAME } from "../const"
+import { logoUrl } from "../lib/images"
 
 export const card =
   "group grid grid-rows-[4.5rem_auto_auto] justify-items-center gap-2 rounded-lg border-2 border-slate-300 p-4 no-underline transition-colors hover:border-blue-500 dark:border-slate-600 dark:hover:border-blue-400"
 export const logo = "max-h-full max-w-full self-center p-2"
 export const cta =
-  "text-sm font-bold text-blue-600 group-hover:text-blue-700 dark:text-blue-400 dark:group-hover:text-blue-300"
+  "text-sm font-bold text-blue-700 group-hover:text-blue-800 dark:text-blue-400 dark:group-hover:text-blue-300"
 
 Quick reference for using the DDEV name and logo. For the full brand guide, additional PNG resolutions, and the logo-generation script, see the <a href={BRAND_GUIDE_URL}>Brand Guide</a> in the DDEV documentation.
 
@@ -25,7 +26,7 @@ Quick reference for using the DDEV name and logo. For the full brand guide, addi
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 not-prose">
   <a href="/logos/ddev-mark.svg" download class={card}>
     <img
-      src="/logos/ddev-mark.svg"
+      src={logoUrl("/logos/ddev-mark.svg")}
       alt="DDEV figurative mark"
       class="h-full w-auto self-center"
       width="91"
@@ -36,7 +37,7 @@ Quick reference for using the DDEV name and logo. For the full brand guide, addi
   </a>
   <a href="/logos/ddev-auto.svg" download class={card}>
     <img
-      src="/logos/ddev-auto.svg"
+      src={logoUrl("/logos/ddev-auto.svg")}
       alt="DDEV word mark that follows the system color scheme"
       class={`${logo} scheme-light dark:scheme-dark`}
       width="293"
@@ -47,7 +48,7 @@ Quick reference for using the DDEV name and logo. For the full brand guide, addi
   </a>
   <a href="/logos/ddev.svg" download class={card}>
     <img
-      src="/logos/ddev.svg"
+      src={logoUrl("/logos/ddev.svg")}
       alt="DDEV word mark for light backgrounds"
       class={`${logo} rounded bg-white`}
       width="293"
@@ -58,7 +59,7 @@ Quick reference for using the DDEV name and logo. For the full brand guide, addi
   </a>
   <a href="/logos/dark-ddev.svg" download class={card}>
     <img
-      src="/logos/dark-ddev.svg"
+      src={logoUrl("/logos/dark-ddev.svg")}
       alt="DDEV word mark for dark backgrounds"
       class={`${logo} rounded bg-[#1e2127]`}
       width="293"
diff --git a/src/styles/global.css b/src/styles/global.css
index 276b61722..09f34358e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -341,6 +341,12 @@ pre.astro-code span {
   background-color: var(--code-bg-light) !important;
 }
 
+/* The light theme's comment color reads at 3.9:1 on --code-bg-light, below
+ * the 4.5:1 WCAG asks for. The dark rule below is more specific. */
+pre.astro-code span[style*="--shiki-light:#66707B"] {
+  color: #59626c !important;
+}
+
 html.dark pre.astro-code,
 html.dark pre.astro-code span {
   color: var(--shiki-dark) !important;

From 429a67cb32f449bb03a7f574f503079d963d95be Mon Sep 17 00:00:00 2001
From: Stanislav Zhuk <stasadev@gmail.com>
Date: Fri, 23 Oct 2026 20:02:40 +0300
Subject: [PATCH 3/3] fix(home): raise contrast of terminal timings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Short Summary (TL;DR)

The timings in the home page terminal's `ddev start` screen read at 4.38:1 on its background, which PageSpeed reported, so they now use `text-violet-300`.

## How This PR Solves The Issue

- The timings, such as `0.5s`, use `text-violet-300` instead of `text-violet-400`.
- The `a11y-check` script missed them because reduced motion keeps the terminal on `ddev describe`. It now plays the `ddev start` screen, pauses it at the end, and checks the terminal again when it is visible.

## Manual Testing Instructions

Compare https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev/ with https://ddev.com/ at desktop width: the timings at the end of the `✓` lines in the `ddev start` screen are lighter violet.

## Automated Testing Overview

The updated axe script reports the 8 timing nodes on the previous preview and none on a local build with the fix.

🤖 Developed with assistance from [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .claude/skills/a11y-check/SKILL.md    |  3 +-
 .claude/skills/a11y-check/axe.mjs     | 73 +++++++++++++++++----------
 src/components/AnimatedTerminal.astro |  8 +--
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/.claude/skills/a11y-check/SKILL.md b/.claude/skills/a11y-check/SKILL.md
index 71b5e0266..f3cf56df0 100644
--- a/.claude/skills/a11y-check/SKILL.md
+++ b/.claude/skills/a11y-check/SKILL.md
@@ -53,7 +53,8 @@ For the post, pick one whose code blocks have comments in them, such as
 
 The script checks each path in light and dark at 1400 and 390 px wide, since
 some problems show in only one theme or at one width. It emulates reduced
-motion, which stops the home page terminal on its `ddev describe` screen.
+motion, which stops the home page terminal on its `ddev describe` screen,
+then plays the `ddev start` screen and checks the terminal again.
 
 Fix every violation the change introduced. To tell which were there before,
 run the same paths with `https://ddev.com` as the base; report those, and
diff --git a/.claude/skills/a11y-check/axe.mjs b/.claude/skills/a11y-check/axe.mjs
index aa1948616..d279b7387 100644
--- a/.claude/skills/a11y-check/axe.mjs
+++ b/.claude/skills/a11y-check/axe.mjs
@@ -39,35 +39,54 @@ for (const path of paths) {
         timeout: 60000,
       })
       await page.evaluate(axeSource)
-      const result = await page.evaluate(() =>
-        axe.run(document, {
-          runOnly: {
-            type: "tag",
-            values: [
-              "wcag2a",
-              "wcag2aa",
-              "wcag21a",
-              "wcag21aa",
-              "wcag22aa",
-              "best-practice",
-            ],
-          },
-        })
-      )
-      for (const violation of result.violations) {
-        for (const node of violation.nodes) {
-          violations.push({
-            path,
-            scheme,
-            width: viewport.width,
-            id: violation.id,
-            impact: violation.impact,
-            target: node.target.join(" "),
-            html: node.html.slice(0, 160),
-            summary: node.failureSummary?.split("\n")[1]?.trim(),
-          })
+      const check = async (context) => {
+        const result = await page.evaluate(
+          (context) =>
+            axe.run(context, {
+              runOnly: {
+                type: "tag",
+                values: [
+                  "wcag2a",
+                  "wcag2aa",
+                  "wcag21a",
+                  "wcag21aa",
+                  "wcag22aa",
+                  "best-practice",
+                ],
+              },
+            }),
+          context
+        )
+        for (const violation of result.violations) {
+          for (const node of violation.nodes) {
+            violations.push({
+              path,
+              scheme,
+              width: viewport.width,
+              id: violation.id,
+              impact: violation.impact,
+              target: node.target.join(" "),
+              html: node.html.slice(0, 160),
+              summary: node.failureSummary?.split("\n")[1]?.trim(),
+            })
+          }
         }
       }
+      await check("html")
+      // The terminal's other screen, `ddev start`, plays once and is paused
+      // at its end, since reduced motion only ever shows `ddev describe`.
+      if (await page.$("#animation-toggle").then((e) => e?.isVisible())) {
+        await page.click("#animation-toggle")
+        await page.waitForFunction(
+          () =>
+            document
+              .getElementById("animation-stage")
+              .textContent.includes("alternate URLs"),
+          { timeout: 60000 }
+        )
+        await page.click("#animation-toggle")
+        await check(".terminal-wrapper")
+      }
       await page.close()
     }
   }
diff --git a/src/components/AnimatedTerminal.astro b/src/components/AnimatedTerminal.astro
index dbb5cfc41..022a47afc 100644
--- a/src/components/AnimatedTerminal.astro
+++ b/src/components/AnimatedTerminal.astro
@@ -90,13 +90,13 @@ ${versionLine}
 Starting my-project...
 Building project images....${WORK} built in 1.0s
 [+] up 3/3
- <span class="text-green-400">✓</span> Network ddev-my-project_default <span class="text-green-400">Created</span>                                           <span class="text-violet-400">0.1s</span>
- <span class="text-green-400">✓</span> Container ddev-my-project-web   <span class="text-green-400">Created</span>                                           <span class="text-violet-400">0.5s</span>
- <span class="text-green-400">✓</span> Container ddev-my-project-db    <span class="text-green-400">Created</span>                                           <span class="text-violet-400">0.5s</span>
+ <span class="text-green-400">✓</span> Network ddev-my-project_default <span class="text-green-400">Created</span>                                           <span class="text-violet-300">0.1s</span>
+ <span class="text-green-400">✓</span> Container ddev-my-project-web   <span class="text-green-400">Created</span>                                           <span class="text-violet-300">0.5s</span>
+ <span class="text-green-400">✓</span> Container ddev-my-project-db    <span class="text-green-400">Created</span>                                           <span class="text-violet-300">0.5s</span>
 Waiting for containers to become ready: [web db]...${WORK} ready in 2.0s
 Starting ddev-router, pushing config...
 [+] up 1/1
- <span class="text-green-400">✓</span> Container ddev-router <span class="text-green-400">Created</span>                                                     <span class="text-violet-400">0.5s</span>
+ <span class="text-green-400">✓</span> Container ddev-router <span class="text-green-400">Created</span>                                                     <span class="text-violet-300">0.5s</span>
 Waiting for ddev-router to become ready...${WORK} ready in 1.0s
 <span class="text-green-400">Successfully started my-project</span>
 <span class="text-green-400">Your project can be reached at https://my-project.ddev.site</span>