Built-in Accessibility
Build accessibility into AI-generated UI by defining ARIA contracts, keyboard behavior, focus management, validation checks, and design-system defaults.
Key takeaways
- Build accessibility into AI-generated UI by defining ARIA contracts, keyboard behavior, focus management, validation checks, and design-system defaults.
- Use this chapter as a first-pass operating checklist before changing systems, data, permissions, or customer-facing workflows.
- Validate platform-specific details against current official docs or internal policy before rollout.
Accessibility should be the default behavior of the system, not an afterthought in generated code. Agents need ARIA contracts, keyboard rules, focus management, and validation checks built into the component layer.
Accessibility Contract
| Area | Required definition |
|---|---|
| Role | Native element or ARIA role. |
| Name | Label source and fallback behavior. |
| Keyboard | Supported keys and focus movement. |
| Focus | Initial focus, return focus, trap rules. |
| State | aria-expanded, aria-invalid, aria-busy, and related attributes. |
| Error | How errors are announced and associated with fields. |
Component-Level Defaults
type DialogSpec = {
role: 'dialog'
requiresLabel: true
focusTrap: true
escapeCloses: true
returnFocus: true
}AI should not need to remember these rules. The primitive should enforce them.
Agent Prompt Rules
- Prefer native elements before ARIA.
- Do not create clickable
divelements. - Every icon-only control needs an accessible name.
- Every form error needs programmatic association.
- Every modal, popover, and menu needs a keyboard interaction contract.
Common Failure Modes
| Failure | Prevention |
|---|---|
| Icon button without label | Require aria-label or visible text. |
| Focus lost after modal close | Component returns focus automatically. |
| Error text not announced | Use aria-describedby and live regions where needed. |
| Custom select without keyboard support | Use tested primitives. |
Verification Pipeline
- Static linting for accessibility rules.
- Runtime checks with Playwright and axe-compatible tooling.
- Keyboard-only smoke tests for core flows.
- Visual focus-ring snapshots.
- Review any generated component that bypasses primitives.