Skip to main content

Machine-readable accessibility patterns

Accessibility patterns built for AI coding agents.

Retrieve per-component accessibility specs at the moment your agent generates UI code — so the code is born accessible.

Get startedBrowse components
  • WCAG 2.2 AA
  • ARIA APG
  • MCP + RAG ready
AccordionReact (Web)WCAG 2.2 AA

Accessibility Rules

  • Each header is a real <button> at the section’s heading level.
  • Header carries aria-expanded and aria-controls.
  • Panel uses role="region" with aria-labelledby.
  • Toggling never moves focus — it stays on the header.

Retrieved at generation time · one call per component

63% 90%

Manual accessibility pass rate

−84%

axe-core violations

vs. unassisted generation (six enforced variants, n per the study).

Without accessibility instructions, AI-generated UI code passed accessibility checks just 12% of the time across eight frontier models.

— Microsoft A11y LLM Eval

How it works

Three steps, run inside the agent’s own loop — no change to how your team writes code.

  1. Identify

    The agent looks at what it’s about to build and lists the components.

  2. Retrieve

    It pulls only those patterns plus the global rules.

  3. Apply

    It builds to each pattern’s rules and golden pattern.

Frameworks

One corpus, per-framework golden patterns.

React (Web)

Available

Browse patterns →

SwiftUI (iOS)

Beta

Compose (Android)

Coming soon

UIKit (iOS)

Coming soon

Views (Android)

Coming soon

Vanilla JS (Web)

Coming soon