Replit Agent prompt to improve accessibility (a11y)
Accessibility work on a generated app is mostly retrofitting: fake buttons, missing labels, focus that disappears into a CSS reset. This prompt runs Replit Agent as an auditor first and a fixer second, with a checkpoint taken before any edit. You finish with a keyboard-passable app and a file-by-file record of what changed.
Last updated
Run an accessibility pass on the app already in this workspace. Do not redesign anything, keep the visual language, fix the mechanics. Audit first: crawl every route, then give me a numbered list of concrete problems grouped by page before changing any code. Wait for my go-ahead. Then fix, in this order: keyboard access for every interactive element, including any div or span carrying an onClick, which should become a button or link. Visible focus rings that survive the existing CSS reset. A skip-to-content link as the first focusable element. Form inputs paired with real label elements, not placeholder text as the only hint. Images get alt text, decorative ones get empty alt. Color contrast on body text and button labels, adjusted by shade, not by replacing the palette. Heading levels made sequential per page. Any custom dropdown, modal, or tab widget gets matching keyboard behavior: Escape closes modals, focus is trapped while open and returns to the trigger on close. Announce dynamic changes: toasts and inline validation messages go into a polite live region so they are read aloud. Verify: tab through the main flow start to finish in the webview and list every focus stop in order so I can review the sequence. List each file you changed with a one-line reason. Create a checkpoint before the first edit so I can roll the whole pass back if anything regresses visually.
Same task in other tools
Questions about this prompt
Why make it audit before fixing anything?
The numbered list grouped by page lets you cut scope before code changes, and the checkpoint taken at approval time gives you a clean rollback point. Skipping straight to fixes tends to produce sweeping CSS edits you cannot easily review.
Can I target a specific conformance level?
Name the level you need in the prompt and add any items your compliance review calls out. The fix list here covers the mechanics that fail most often regardless of level: keyboard access, labels, contrast, focus management, and live regions.
Focus rings are still invisible after the pass, why?
A global outline removal in the CSS reset is winning the cascade. Ask the agent to add focus-visible styles that load after the reset, then tab through the webview again and confirm every stop shows a ring.