Lovable prompt to improve accessibility (a11y)
Generated UIs tend to accumulate clickable divs, unlabeled icon buttons, and silent spinners, and Lovable apps are no exception. This prompt runs a structured pass over keyboard access, semantics, announcements, contrast, and motion, then demands a file-by-file report, so you finish with an app a keyboard-only user can actually operate.
Last updated
Audit every screen in this project for accessibility and fix what you find, without changing the visual design more than necessary. Keyboard: make each interactive element reachable and operable with tab plus enter or space, add a skip-to-content link as the first focusable element, and confirm shadcn dialogs and sheets trap focus while open and return it to the trigger on close. Semantics: replace clickable divs with buttons or links, give every icon-only button an aria-label naming its action, associate every input with a label element, and structure each screen with main, nav, and one h1, with heading levels that never skip. Announcements: connect form errors to their fields with aria-describedby, announce async results like saves and deletions through a polite live region, and name loading spinners for screen readers instead of leaving them silent. Color and motion: fix any Tailwind text and background pairs that fall below readable contrast, stop using color alone to convey status by adding an icon or text, and wrap non-essential animation in a prefers-reduced-motion check. Focus visibility: keep a visible focus ring on every interactive element, and never remove an outline without providing a replacement. Acceptance: I can complete signup, the primary create and delete flows, and navigation using only the keyboard, every image has meaningful alt text or an empty alt when decorative, and no interactive control remains a bare div. List each file you changed and the rule it violated.
Same task in other tools
Questions about this prompt
Can Lovable audit screens it did not originally generate?
It works on whatever code is in the project, so imported or hand-edited components get the same pass. For a large app, run it screen by screen and restate the acceptance list each time.
How do I stop future prompts from reintroducing violations?
Add the core rules, labeled icon buttons, no clickable divs, visible focus rings, to your project knowledge so every later generation inherits them. Re-run this audit after any big UI change.
Dialogs still lose focus after the fix. What now?
Custom wrappers around shadcn dialogs sometimes bypass the built-in focus trap. Tell Lovable to use the library's dialog primitives directly instead of reimplementing open and close state around them.