I used to paste “make this component accessible” into ChatGPT and hope for the best. Sometimes I got a role="button" on a real <button> . Sometimes the contrast “fix” was #666 on #fff with no math behind it. The model wasn’t dumb — my prompt was.

Once I stopped asking for vibes and started asking for a checklist the model had to fill, the diffs got usable. Here’s the prompt shape I use for React UI, and why each bucket matters.

Soft prompts produce soft a11y

Vague asks produce vague markup:

“Make it accessible” → random aria-label s, duplicate roles, no keyboard path

“Add ARIA” → decorative icons announced twice, interactive divs with no Enter/Space

“Fix contrast” → a hex that looks darker, not one that passes 4.5:1

You’re outsourcing judgment without giving constraints. Models are great at filling a schema. They’re mediocre at inventing your team’s a11y bar from a one-liner.

The three buckets I always force

I put every generation (or agent edit) through the same three headings.…