Bolt prompt to improve accessibility (a11y)
Accessibility retrofits fail when they arrive as one enormous diff nobody can review. This prompt makes Bolt work in four labeled passes, semantics, keyboard, forms, contrast, each with its own file list, so you can check the preview between passes and stop at any point with the app better than you found it.
Last updated
Audit and fix accessibility in this Bolt project without changing visual design or breaking existing behavior. Work in passes and show me a diff summary per pass instead of one giant rewrite. Pass 1, semantics: replace clickable divs with button or anchor elements, ensure exactly one h1 per route, heading levels never skip, lists use ul and li, and nav, main, and footer landmarks exist. Pass 2, keyboard: everything interactive reachable with Tab in a sensible order, a visible focus ring using outline-offset so layout never shifts, Escape closes any modal or dropdown, and focus returns to the trigger element on close. Add a skip-to-content link as the first focusable element. Pass 3, forms and labels: every input gets a label element or aria-label, errors are announced by wiring aria-describedby to the error text, required fields carry aria-required, and no placeholder-as-label pattern survives. Pass 4, contrast and motion: flag any text below 4.5:1 against its background and propose the nearest passing shade from the existing palette, then wrap animations in a prefers-reduced-motion media query. Rules: no accessibility overlay library, no aria roles on elements that already carry them implicitly, and never remove an existing test id. Acceptance: I will tab through the app in Bolt's preview pane with the mouse untouched, so when you finish, state the expected focus order per screen and list every file changed, grouped by pass.
Same task in other tools
Questions about this prompt
Why passes instead of asking for everything at once?
A single sweeping a11y rewrite tends to change markup that styling depended on, and in Bolt you only find out when the preview looks wrong with no obvious cause. Scoped passes keep each diff reviewable, and the per-pass file list tells you exactly where to look when something regresses.
Can I run only the keyboard pass?
Yes. Delete the other passes from the prompt or tell Bolt to run pass 2 only. Keyboard and focus work stands alone well, and the contrast pass is similarly independent. Keep the semantics pass if you can, because native buttons and landmarks shrink every pass that follows.
Bolt added role and aria attributes everywhere. Is that better?
No. Redundant roles on semantic elements are noise and sometimes actively wrong, which is why the prompt forbids them. If you see role="button" on a button element, or an aria-label duplicating visible text, ask it to remove every attribute restating an implicit semantic and re-list the changed files.