Missing Accessibility in Vibecoded Apps

Put your mouse away and navigate the entire app using only the keyboard. Press Tab to move between interactive elements and Enter or Space to activate them. If you cannot reach a button, open a dropdown, or close a modal with the keyboard alone, the app has critical accessibility barriers.

Run an automated accessibility audit using the browser's built-in Lighthouse tool or the axe DevTools extension. These tools catch missing alt text, low color contrast, missing form labels, and incorrect ARIA attributes. However, they only catch about 30% of accessibility issues — manual keyboard and screen reader testing is essential.

Test every interactive component with keyboard-only navigation. Open every modal and verify you can close it with Escape. Navigate every dropdown, tab panel, and accordion with arrow keys. Check that focus is trapped inside modals and returned to the trigger element when the modal closes.

Enable a screen reader (VoiceOver on Mac, NVDA on Windows) and navigate through the app. Listen for unlabeled buttons announced as just "button," images announced as their filename, and form fields with no associated label. These are the most common accessibility failures in AI-generated code.

Start with semantic HTML. Use button for clickable actions, a for navigation, heading tags for hierarchy, and native form elements instead of styled divs. Semantic HTML provides keyboard and screen reader support for free.

Add ARIA labels to all interactive elements that lack visible text labels. Implement focus management for modals, drawers, and dynamic content. Ensure color contrast meets WCAG 2.1 AA standards — at least 4.5:1 for normal text and 3:1 for large text. Use a component library like Radix UI or Headless UI that handles accessibility patterns correctly out of the box.