AriaLens: WebMCP Accessibility Studio

Inspiration

Over 96% of the world's top one million websites fail basic WCAG accessibility tests. For developers, retrofitting unsemantic <div> elements with complex ARIA attributes (aria-expanded, aria-controls, role="combobox", keyboard focus traps) is tedious, manual, and error-prone.

With the advent of the Web Model Context Protocol (WebMCP), web applications can finally expose structured tools directly to AI agents. But giving an autonomous LLM write access to a live DOM is inherently dangerous:

1. Hallucination & Prompt Injection: Agents might apply unvetted, destructive mutations across the entire page.
2. Race Conditions (TOCTOU): If an agent takes 10 seconds to analyze a component while a user is actively clicking and mutating the DOM, applying the patch blindly will corrupt UI state.

We built AriaLens to solve this: an agent-native developer studio where humans and AI agents collaborate safely on live DOM accessibility remediation with strict Human-in-the-Loop Authority Boundaries, Optimistic Concurrency Locks, and Adversarial Honeypots.

What it does

AriaLens turns the browser into an interactive, agent-guided accessibility workbench:

• Live Accessibility Introspection: Using WebMCP, the agent inspects computed accessibility trees, AccName 1.1 calculations, and keyboard focus trap boundaries directly through audit_accessibility_tree.
• Human-in-the-Loop Authority Boundary: Destructive mutation tools (commit_a11y_fix) are never exposed upfront. The agent can only stage speculative changes via stage_aria_remediation. Staged changes render in an IDE-style visual code diff awaiting human sign-off.
• Optimistic Concurrency Lock (W3C § 6.3): Patches are cryptographically bound to an Epoch Lock recorded at audit time. If a user interacts with or mutates the DOM before commit, the epoch advances and the patch is safely rejected with a STALE_EPOCH_CONFLICT.
• The Honeypot Gauntlet (W3C § 6.4): To guard against rogue or jailbroken behavior, AriaLens mounts hidden bypass tools (bulk_apply_all_fixes). Any agent attempting to bypass human approval is intercepted, blocked, and flagged in the live audit log.
• Export as Git Patch: Staged remediations can be downloaded with one click as standard unified .patch files, enabling developers to review in browser and commit directly to their local Git repositories.

How we built it

• WebMCP Protocol Integration: Built directly against the emerging W3C WebMCP draft specification using document.modelContext.registerTool(). We implemented ephemeral capability mounting via AbortController lifecycles to dynamically attach and detach tools based on human gate approval.
• Architecture & State Machine: Powered by React 19, TypeScript, and Vite, with Zustand orchestrating the optimistic concurrency state machine and telemetry logs.
• Accessibility Evaluation: Backed by axe-core 4.10, AccName 1.1 computation models, and automated WCAG 2.2 AA heuristics.
• Developer Interface: Designed with a high-density, dark-mode developer experience inspired by Linear and Vercel, featuring real-time latency badges, sub-pixel antialiasing, and structured code diff views.

Challenges we ran into

• Solving TOCTOU Concurrency: Bridging the gap between asynchronous LLM inference (5–15 seconds) and synchronous DOM events required architecting a zero-overhead optimistic locking protocol (Epoch Locks) that cleanly rejects stale mutations without freezing the browser.
• Ephemeral Tool Lifecycle: Designing tool registration so that commit capabilities remain invisible to LLM tool discovery until explicitly authorized by a human, and immediately unregister after single execution.
• Clean Agent Steering: Calibrating tool descriptions and input schemas so that models prioritize structured attribute staging rather than attempting raw HTML string rewrites.

Accomplishments that we're proud of

• Strict W3C WebMCP Compliance: Directly implemented and validated Sections 6.3 (Concurrency) and 6.4 (Untrusted Content) of the WebMCP draft specification.
• Enterprise-Grade Utility: Going beyond a toy demo by enabling instant .patch unified diff generation for real-world engineering workflows.
• Security-First Agent Design: Proving that agent-native web applications can grant high-level reasoning capabilities to AI without ever compromising runtime safety or human authority.

What we learned

• Agents perform exponentially better when constrained by formal capability state machines rather than natural language prompt boundaries.
• WebMCP represents a paradigm shift: websites are no longer passive documents for LLMs to scrape, but active APIs where humans and agents co-operate with cryptographic guarantees.

What's next for AriaLens

• Headless CI/CD WebMCP Runner: An automated GitHub Action that spins up headless Chrome with WebMCP enabled to audit staging deployments and open pull requests automatically.
• Support for Complex APG Patterns: Expanding fixture coverage to ARIA 1.3 TreeGrids, MenuBars, and complex multi-select comboboxes.
• Framework Code Generators: Generating native JSX/TSX component patches for Tailwind, Radix UI, and Shadcn components.

Built With

• accessibility
• ai-agents
• axe-core
• openai
• react
• tailwind-css
• typescript
• vite
• wcag
• web-standards
• webmcp
• zustand