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)
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: