A11ySentinel

security-layer
dataflow
web-delivery-architecture
sequential-diagram-agent
diagram_architecture

Inspiration

Digital accessibility is a legal obligation (ADA, EAA, RGAA), yet manual audits are slow and expensive. Furthermore, frontend developers need precise code fixes scoped to their specific components (React, Tailwind, Next.js)—not a rewritten HTML dump or an ineffective overlay widget.

What it does

A11ySentinel is an autonomous background agent that discovers, audits, and generates targeted fixes for non-compliant websites. It evaluates both the code structure and the visual rendering, generates granular code diffs, and deploys a live proxy to prove the remediation works directly on the client's site.

How we built it

Built natively on Google Cloud, the system uses Google ADK (Python) to orchestrate a pipeline of 7 distinct agents.

Infrastructure: Cloud Run Jobs and Pub/Sub handle the asynchronous heavy lifting of headless browser capture (Playwright).
Audit: axe-core establishes a deterministic ground truth, while Gemini 3.5 Flash handles multimodal visual auditing for issues structural analysis misses.
Remediation: Gemini generates framework-aware patches isolated by CSS selectors, stored in Firestore.
Verification: The agent re-runs the rule engine against the patched DOM to verify the fix before human approval.

Challenges & Accomplishments

Combining a deterministic rule engine with a probabilistic LLM was a major challenge. We successfully built a verification loop where the agent proves its own fix works before flagging it as complete. We are incredibly proud of the live proxy service (TypeScript/Node), which allows users to see their own site patched in real-time without modifying their actual codebase.