Skip to content

Concept render — composed live from this prompt's palette & layout. Reproducible with the library, not a stock screenshot.

Concept scene: Grid Drift — open in library →
A11yStrictFeaturedby Motif Studiopublished 2026-09-10

A11y-strict page — WCAG AA as a hard requirement

vibe: spec-exact, keyboard-clean, audit-visible

starter4 blocks, 2 stacks700 tokens to run (estimate)
prompt.txt — copy-paste ready
A prompt-form experiment where WCAG AA is a hard requirement list in the brief, and the page proves it on itself.
• AA requirements: the requirement list written into the page — contrast 4.5:1, focus visible, headings in order, no info by colour alone — as a checklist the viewer can audit the page against.
• Contrast audit: a live audit strip showing each palette pair with its measured ratio and its AA pass/fail; if a pair fails, the page shows the replacement pair it should have used.
• Keyboard map: a small 'try it' panel listing the full keyboard journey — Tab order, skip link, focus rings, the Escape paths — because keyboard access is a feature you can demo.
• Screen-reader pass: the page's own landmarks, heading order, and alt-text policy shown in a notes column ('every image has alt; decorative images are aria-hidden, and here is why').
• Palette: chosen to pass AA first and look good second — the constraint is the design.
Stacks shipped:HTMLReactBlocks:AA requirementsContrast auditKeyboard mapScreen-reader pass
Community:▶ Re-run this prompt⤴ Submit a remix of it★ Your saved listRe-runs are a labelled simulation; the run log on this page is the real record.
Before you run it, know this
  • Lowest score was Codex at 91/100 — AA list enforced to the letter; headings hierarchy clean.
  • All models built cleanly on the first pass.