v0 prompt to improve accessibility (a11y)
This checklist prompt turns v0 loose on its own output: landmarks, labels, focus management, contrast at the token level, and reduced-motion support. Because generated UI leans on custom components, the keyboard items matter most; the result is a change list per file you can review before accepting the revision.
Last updated
Audit the current generation for accessibility and fix everything you find. Keep the visual design intact except where contrast forces a change; this pass is about semantics, keyboard behavior, and screen reader output. Work through this checklist: - Landmarks and structure: exactly one main per page, nav and header where they belong, heading levels descending without skips. - Forms: every input has a programmatically associated label, and error text is connected via aria-describedby, not just placed nearby in red. - Buttons and icons: icon-only buttons get aria-label; decorative icons get aria-hidden; anything clickable is a button or a link, not a div with onClick. - Keyboard: dialogs and drawers trap focus and return it to the trigger on close; menus support arrow keys; no positive tabindex anywhere; every focusable element shows a visible focus ring, and any outline: none is removed or replaced. - Contrast: body text meets 4.5:1 and large text 3:1 against its actual background. Check muted foreground text on card backgrounds specifically, since that pairing fails most often. Adjust design tokens, not individual components. - Media and charts: meaningful images get alt text; charts get a text summary or an accessible data table alternative. - Motion: entrance and hover animations respect prefers-reduced-motion. - Live updates: toasts and async result areas announce through an aria-live region. - Add a skip-to-content link as the first focusable element on the page. When done, list each file changed with the specific fixes in it, and flag anything you could not fix automatically, such as color decisions that need a brand call.
Same task in other tools
Questions about this prompt
Will the fixes change how the design looks?
Mostly no. Contrast is the exception, since muted text often needs to darken a step. The prompt tells v0 to adjust design tokens rather than individual components, so if certain colors are fixed brand values, say which ones and let it change the rest.
How do I verify the keyboard fixes in the preview?
Put the mouse down and tab through the page. Open each dialog, confirm focus lands inside, and check it returns to the trigger on Escape. If focus vanishes behind an overlay at any point, call out that dialog by name in a follow-up.
v0 added aria attributes everywhere. Is more aria better?
No. Redundant roles on native elements and stray aria-labels create noise for screen readers. Reply with "prefer native semantics; remove aria that duplicates what the element already exposes" and it will strip the excess while keeping the real fixes.