How to Run a React Accessibility Audit with a Prompt
Accessibility prompts go theatrical. They invent an axe score, a Lighthouse number, and a you-are-92-percent-compliant banner for JSX they barely saw. They then rewrite your component tree, add a package you did not ask for, and still leave the icon button unlabeled. The job is a ranked patch list against the JSX you pasted, for React 18 and WCAG 2.2 AA, with no fake scores.
The matching generator is the React Accessibility Audit and Patch List prompt. Browse related cards in the PromptDig library (Browse more prompts). When a filled run survives, share the version you actually use (Share a prompt).
Paste JSX, not a URL the model cannot fetch
The spec is the code. If you did not paste a component, the model cannot audit it. Do not send a production URL and hope. Do not paste screenshots of DevTools and expect a complete tree.
Restate the build in five bullets from Inputs: which components, React version, routing, UI library, known issues you already saw. If React is unnamed, write unknown. If you named React 18, lock there. Do not upgrade the tree to a canary.
Forbidden: fake axe scores, invented percent compliant, WCAG AAA certified badges, new design systems, drive-by refactors. The compliance pass should quote those leaks and cut them.
This is not a legal certification. It is an engineering patch list. If the domain is HR, clinical, or education-plan UI, strip names and IDs in the paste first.
Ranked patches, not a rewrite
Work from what is on the page: unlabeled buttons, click-only divs, missing labels, color-only errors, focus traps, dialogs without titles, images without alt, contrast you can only flag as UNVERIFIED without tokens, keyboard order, aria-expanded on the wrong node.
Rank by user impact and by how much of the pasted tree it touches. A missing accessible name on the primary submit is ahead of a nice-to-have skip link the spec did not contain, unless Inputs asked for landmarks.
Each patch: what is wrong, which WCAG 2.2 AA criterion you are aiming at if you can name it without guessing, the JSX change, and how to verify (keyboard, VoiceOver or NVDA, a unit test name). Do not drop in an eslint plugin as a personality. If Inputs named it, you may include config. If not, list it under Gaps.
Do not invent components. If there is no Modal in the paste, do not add a dialog library to look complete. If there is a Modal, patch that one.
Tests, edge cases, and scores you refuse to mint
Validation checklist: keyboard path through the pasted form, visible focus, error text not color-only, name/role/value on controls. Testing-library queries by role belong here as test names. Do not write a green CI file with empty tests.
Edge cases: disabled while submitting, live regions that spam, reduced motion, screen-reader-only text that duplicates visible labels, i18n where English aria-labels were hardcoded. If Inputs did not include i18n, do not invent copy in three languages.
UNVERIFIED: contrast ratios without design tokens or computed styles, axe or Lighthouse numbers you did not run, screen reader behavior on a platform you did not test, AA for the whole app when you saw one file.
Acceptance is a patch list the author can apply. It is not a score. If you want a score, run axe yourself on the real tree and paste the JSON next time. The generator still should not round it up.
Fill the card, then run
Paste the JSX and the bar you want (WCAG 2.2 AA). If you did not run axe, do not ask the model for a score.
Goal: [Ranked a11y patches, no scores]
JSX / spec paste: [Components]
Stack versions: [React 18, UI library, or unknown]
Constraints: [No new packages, no visual redesign]
Forbidden: [Fake axe scores, invented percents, extra components]
Acceptance checks: [Keyboard path, names on controls, error text]
A five-item patch list with test names beats a fake 92. When a run refuses to mint a Lighthouse number and labels contrast UNVERIFIED, share that filled card. That refuse list is what keeps the next audit honest.