A vibe coded app can look finished in a screenshot and still be difficult to use with a keyboard, screen reader, magnification, or a small phone. An accessibility pass gives you a practical way to find common problems before sharing a prototype. Automated checks help, but they do not replace trying the interface the way a person will use it.
Start with the path a user must complete
Pick the main task in the app, such as creating an account, searching, adding an item, or checking out. Complete it without a mouse. Use Tab and Shift plus Tab to move through controls, Enter or Space to activate them, and Escape to close a menu or dialog when appropriate.
Keep an eye on the visible focus indicator. A focused control should be easy to locate, and the order should follow the way the page is organized. If the agent has replaced a native button or link with a clickable div, ask it to restore the correct semantic element before adding custom behavior.
Check forms, errors, and visual clarity
Every input needs a clear label. Test what happens when a required field is empty, a value is invalid, or a request fails. The message should explain the problem and how to correct it, and it should be available to assistive technology rather than appearing only as a color change.
Check text contrast, zoom, and narrow screen layouts. Make sure content does not disappear when text is enlarged and that controls remain reachable without horizontal scrolling. An automated checker can identify some contrast and markup issues, but a person still needs to follow the workflow and hear or inspect the important feedback.
- Can the main task be completed with only a keyboard?
- Is focus visible and in a sensible order?
- Do form fields have persistent labels and useful error messages?
- Does the layout remain readable at zoom and mobile widths?
- Do dialogs, menus, and status updates work with assistive technology?
Ask the coding agent for a narrow accessibility fix
Give the agent the page and the exact barrier you found. Ask it to preserve the visual design where possible, use native semantic controls, and add a test for the interaction. Review the resulting markup instead of accepting an accessibility claim from the agent at face value.
A useful task is “the search form error is only indicated by a red border. Add a clear message tied to the input and make sure the message is announced when the form is submitted.” This gives the agent an observable change to make and gives you a behavior to test.
Use guidance and a manual review together
The W3C WCAG quick reference helps you find the current success criteria and techniques. It is a useful map, not an automatic certification. Test the main user journeys with a keyboard and at mobile widths, then use automated tools to catch additional issues.
Before calling a vibe coded app production ready, also review privacy, security, data handling, and maintenance. Accessibility is one part of readiness, not a substitute for those checks.