InclusivePatch

Repair accessibility barriers with an agent, approve every change, and prove the keyboard journey works.

Comment

InclusivePatch

Inspiration

Accessibility testing often ends with a report. A scanner finds missing labels, broken keyboard navigation, poor contrast, or inaccessible form behavior. Then the real work begins: a developer must understand each issue, choose a fix, modify the interface, and test the entire journey again.

I wanted to explore a different question:

What if an AI agent could work directly with the developer on the live web experience, not just explain an accessibility report?

That idea became InclusivePatch.

InclusivePatch is a human-and-AI accessibility remediation workspace powered by WebMCP. Instead of giving ChatGPT screenshots or copying errors into a conversation, it exposes structured tools that let an agent understand and interact with the same live page the developer is reviewing.

What it does

InclusivePatch demonstrates the complete accessibility repair lifecycle:

Scan → Review → Fix → Replay

The demo contains a checkout with six intentionally planted accessibility issues, including missing form labels, incorrect focus order, a keyboard trap, validation messages that are not announced, low-contrast text, and an ambiguous accessible name.

Using WebMCP, an AI agent can scan the checkout, inspect evidence, retrieve allowed remediation options, and stage bounded fixes. The agent never silently modifies the page. Every proposal is visible for human review, and the developer can approve it, reject it, or revise subjective wording before anything is applied.

After approved fixes are applied, InclusivePatch replays an 11-step keyboard-only journey and deterministically verifies whether the experience is now usable. It also shows a before-and-after comparison and preserves a history of agent actions, human decisions, patches, and verification results.

How we built it

InclusivePatch is a React 19 and TypeScript application built with Vite and deployed using Cloudflare Workers Static Assets. The visible interface and the WebMCP executors share one typed workspace engine, so both operate on exactly the same application state.

The application exposes ten narrow, phase-aware tools through document.modelContext.registerTool. Zod validates every tool input. The accessibility layer combines axe-core with deterministic fixture probes, while browser localStorage preserves the synthetic workspace state. JSON and Markdown remediation manifests are generated locally.

There is no embedded chatbot, unrestricted selector input, arbitrary JavaScript execution, or generic DOM mutation tool. Available tools change with the workspace phase, and every mutation creates visible, version-bound evidence.

How WebMCP is used

InclusivePatch exposes structured tools to:

  • Scan the current checkout
  • Read the workspace state
  • Inspect an accessibility issue
  • Retrieve allowed remediation options
  • Stage a fix
  • Apply approved fixes
  • Replay the keyboard journey
  • Compare the original and repaired versions
  • Undo a change
  • Export the remediation manifest

When the agent stages a fix, the developer sees it immediately in the UI. If the developer rejects a proposal, the agent can read the updated state and adapt. That shared live state makes WebMCP fundamental to the experience rather than an API added beside it.

Challenges we ran into

The hardest design question was how much authority the AI agent should have. A broad modify_page tool would be flexible but difficult to constrain, audit, or trust. InclusivePatch instead exposes small actions with predefined remediation options. Every write is validated, versioned, recorded, and—where judgment is involved—subject to explicit human approval.

Another challenge was proving that a fix actually improved accessibility. InclusivePatch does not stop after changing the page. It executes the same deterministic keyboard journey before and after remediation, so improvement is verified rather than assumed.

Accomplishments that we're proud of

  • A complete human-in-the-loop remediation lifecycle in one shared interface
  • Six deterministic accessibility findings backed by axe-supported and fixture-specific probes
  • Ten strictly validated, phase-aware WebMCP tools
  • Bounded and reversible proposals instead of arbitrary page mutation
  • Human rejection and linked revision of subjective accessible wording
  • An 11-step deterministic keyboard journey with before-and-after evidence
  • An auditable activity history and portable remediation manifest
  • 43 unit, integration, and contract tests plus five Chromium end-to-end tests
  • A 20/20 Codex CLI first-tool-selection evaluation

What we learned

The most useful agent experience is not necessarily an autonomous agent that replaces the interface. A stronger pattern is:

Human controls the intent. AI coordinates the work. Deterministic software verifies the result.

WebMCP makes that collaboration possible inside the web application. We also learned that small tools with clear inputs, predictable side effects, and verifiable outputs are substantially more reliable than broad generic tools.

What's next for InclusivePatch

InclusivePatch currently focuses on one controlled checkout so the human-agent workflow can be demonstrated clearly and reliably. Future versions could scan larger applications, support multiple accessibility journeys, connect fixes to source components, generate implementation patches and pull requests, integrate with CI accessibility testing, and build remediation histories across releases.

The larger vision is not another accessibility scanner. It is an accessibility engineering workflow in which an AI agent helps developers move from finding a problem to proving that the user experience has actually been repaired.

Try it

No account or credentials are required. The checkout and all entered data are synthetic.

Built with

WebMCP, React, TypeScript, Vite, Zod, axe-core, Playwright, Vitest, and Cloudflare Workers.

Built With

Share this project:

Updates

Submission history