AI code generation tools like Claude, Copilot, and Cursor consistently produce inaccessible React components — using div soup instead of semantic HTML, missing ARIA attributes, and lacking keyboard support. A five-layer enforcement system is presented to combat this: (1) prompt constraints baked into workspace config files, (2) static analysis with eslint-plugin-jsx-a11y, (3) runtime testing with jest-axe and axe-core/playwright, (4) CI integration via GitHub Actions to block inaccessible PRs, and (5) accessible component abstractions using Headless UI, Radix UI, or React Aria. Common failure patterns are dissected — invisible modals, icon-only buttons, and custom selects — with before/after code examples. The two highest-leverage fixes are setting eslint-plugin-jsx-a11y to error in CI and defaulting to headless accessible libraries for interactive components.
Table of contents
The Problem, DemonstratedWhy This Happens: The Accessibility TreeWhy AI Gets This WrongLayer 1: Prompt ConstraintsLayer 2: Static AnalysisLayer 3: Runtime TestingLayer 4: CI IntegrationLayer 5: Accessible Component AbstractionsCommon AI Failure PatternsCosts and LimitsSort: