AI code-generation tools produce visually polished but fundamentally inaccessible components, leaving screen reader and keyboard users unable to interact with them—and systematic enforcement across five layers is required to fix it.

What happened

General-purpose AI tools like ChatGPT, Claude, Copilot, and Cursor consistently generate React components with severe accessibility failures—missing landmarks, no semantic HTML roles, no keyboard support, unlabeled icons, and interactive elements built as generic divs instead of buttons or links. Testing across multiple tools over the past two months found <div onClick> patterns and missing ARIA attributes in the vast majority of outputs; the accessibility tree these components produce is flat, unstructured, and unusable for assistive technology users.

What to watch

The article presents a five-layer enforcement system—prompt constraints (via .cursorrules files), static analysis, runtime testing, CI integration, and accessible component abstractions—to make semantic correctness automatic rather than aspirational. Notably, Vercel's v0 has begun hardcoding accessible primitives into its generation pipeline by outputting shadcn/ui components built on Radix, which inherit accessibility contracts by default; this architectural approach is described as the right one, though even v0 benefits from verification layers, because no generation pipeline eliminates the need to confirm that what ships actually works.