A11yFix

Inspiration

Years of advocating for strict WCAG compliance and building specialized testing wrappers revealed a persistent gap in the industry: static analysis tools catch syntax errors, but developers still struggle to implement complex WAI-ARIA patterns accurately. The WebMCP challenge sparked the idea for an active, contextual assistant. Rather than just flagging a missing focus trap or a target size failure, the goal was to build a system that understands the active DOM state and proposes exact, compliant remediations while keeping the developer firmly in control.

What it does

A11yFix is a Web QA Workbench that acts as an intelligent copilot for accessibility. It audits web pages in real-time against strict WCAG 2.2 Level AA and WAI-ARIA APG standards. When it detects a barrier (like an invalid heading order or insufficient target size), it uses a WebMCP agent to deeply analyze the semantic context. It then proposes specific, compliant code patches and automatically generates a Playwright regression test to verify the fix. Crucially, it operates with strict "human-in-the-loop" execution—no DOM mutation happens without developer approval.

How we built it

The architecture follows a Spec-Driven Development (SDD) approach. The client interface is a React-based QA Workbench deployed on Vercel that intercepts the active page state and isolates the accessibility tree. The backend is a Node.js WebMCP Server that exposes eight granular tools categorized by permissions (READ, PROPOSE, WRITE) using robust Zod schemas. This setup creates an automated QA loop: the agent audits, proposes patches, and invokes tools to generate automated Playwright regression tests, closing the development cycle seamlessly.

Challenges we ran into

The primary hurdle was context window saturation. Raw DOM structures contain massive amounts of CSS and visual noise that easily confuse LLMs. To solve this, the application parses and purifies the tree before sending it to the model, stripping away everything except pure semantic accessibility data. This extreme DOM reduction was critical to prevent hallucinations and drastically reduce latency.

Additionally, we had to guarantee security. Establishing a strict "human-in-the-loop" barrier for the apply_remediation tool required meticulous state management, ensuring the WebMCP agent could never autonomously mutate the live page without explicit developer consent.

Accomplishments that we're proud of

We are incredibly proud of bridging the gap between theoretical accessibility guidelines and practical developer workflows. Successfully implementing a robust "human-in-the-loop" safeguard within the WebMCP framework ensures that the tool is both powerful and secure. Furthermore, automatically generating ready-to-use Playwright regression tests directly from an AI's remediation proposal transforms a traditionally tedious QA task into a fast, one-click experience.

What we learned

Integrating the Model Context Protocol within a live browser environment proved that agents are drastically more effective when constrained by strict schemas and pure semantic data. The development process reinforced that AI should not act as a black box that bypasses the developer, but rather as a high-precision instrument that amplifies their ability to ship inclusive, accessible software.

What's next for A11yFix

The next step is to integrate A11yFix directly into CI/CD pipelines and popular IDEs via a dedicated extension. We also plan to expand the test generation engine to support other frameworks like Vitest and Playwright, building upon our previous research in automated accessibility testing. Ultimately, we want to evolve A11yFix into the definitive open-source standard for autonomous, yet developer-guided, web accessibility remediation.

Built With

• angular.js
• axe-core
• css3
• docker
• nestjs
• playwright
• sdd
• storybook
• typescript