Making AI-Generated Code Accessible

The AI Accessibility Gap

AI-generated web code consistently underperforms on accessibility. Models learn from the web's existing codebase — which is overwhelmingly inaccessible. Only 3% of the web meets WCAG AA standards, so AI's training data teaches it to build inaccessible interfaces by default.

Common Accessibility Failures

• Missing alt text: AI generates <img src="..."> without alt attributes. Every image needs descriptive text for screen readers.
• Div buttons: AI often creates clickable divs instead of semantic <button> elements, breaking keyboard navigation.
• Color-only indicators: Error messages shown only in red text are invisible to colorblind users.
• Missing form labels: Placeholder text is not a label. Screen readers need explicit <label> associations.
• No skip navigation: Long pages without skip-to-content links force screen reader users to listen to the full navigation on every page.

Prompting for Accessibility

Include accessibility requirements explicitly in every UI prompt:

• "All interactive elements must be keyboard accessible"
• "Include ARIA labels on custom components"
• "Use semantic HTML (nav, main, section, article, aside)"
• "Ensure color contrast meets WCAG AA (4.5:1 for text)"
• "Add skip-to-content link as the first focusable element"

Testing Tools

Integrate automated accessibility testing into your development workflow:

• axe DevTools: Browser extension for quick manual checks.
• Lighthouse: Built into Chrome DevTools, includes accessibility auditing.
• pa11y-ci: Automated accessibility testing in CI/CD pipelines.