Mendable

"AI that mends broken websites — for real, not with a script overlay."

Comment

Inspiration

Traditional web accessibility overlays offer temporary fixes that often break, fail automated testing, or fail to resolve core accessibility issues. Mendable was created to replace superficial overlays with real, production-ready code patches by utilizing an autonomous multi-agent pipeline

What it does

Mendable scans web applications using four dedicated AI agents to crawl, detect, remediate, and verify WCAG compliance violations:

  1. Crawl & Detect: The CrawlerAgent captures DOM structures, CSS, and screenshots using Playwright, while the DetectorAgent runs axe-core JS and custom WCAG validation checks.
  2. Automated Fixing: The FixerAgent generates real code fixes, using Gemini Vision for visual alt text and algorithmic calculations for CSS contrast adjustments.
  3. Verification & Routing: The VerifierAgent re-runs axe-core on the live patched DOM. Fixes satisfying the logical criteria $\text{Apply} = (\text{Confidence} \ge 0.7) \land \text{Verified}$ are automatically applied, while unverified or low-confidence fixes are routed to a human review queue.
  4. Visual Evidence: Side-by-side split views showcase before and after screenshots alongside inline code diffs.

How we built it

Mendable is structured around an asynchronous agent backend and a high-contrast frontend dashboard:

  1. Backend Pipeline: Built with Python 3.11 and FastAPI, orchestrating CrawlerAgent, DetectorAgent, FixerAgent, and VerifierAgent. 2.AI & Mathematics: Combines Gemini Vision for visual context understanding with programmatic CSS color algorithms to compute WCAG-compliant contrast ratios. 3.Data & Storage: Powered by Supabase PostgreSQL (scans, violations, fixes, review_queue tables) and Supabase Storage (autofix-screenshots bucket) 4.Frontend: Developed with React (Vite), TypeScript, and Tailwind CSS using a custom high-contrast design system featuring Ink, Canvas, and Mend color tokens.

Challenges we ran into

1.Environment & Runtime Restrictions: Compatibility issues with dependencies such as lxml and greenlet required strictly enforcing a Python 3.11 environment to prevent build failures on newer versions like Python 3.14. 2.Live DOM Verification: Re-testing generated patches accurately required running axe-core dynamically against a live patched DOM instance rather than static string representations.
3.Mathematical Confidence Thresholds: Balancing automated fixing against human oversight meant defining precision rules where auto-apply requires $\text{Confidence} \ge 0.7$ combined with successful live re-verification.

Accomplishments that we're proud of

1.Developed a 4-agent remediation engine that outputs genuine code patches instead of front-end overlays 2.Built an interactive sample demo containing 9 pre-planted WCAG violations to demonstrate real-time remediation 3.Designed an accessible UI token system where colors like Ink provide a 14:1 contrast ratio against background elements. 4.Created a complete human-in-the-loop workflow with automated state updates when pending review items are approved or rejected.

What we learned

1.Leveraging multimodal vision models (Gemini Vision) alongside deterministic programmatic logic produces more reliable code patches.Leveraging multimodal vision models (Gemini Vision) alongside deterministic programmatic logic produces more reliable code patches. 2.Orchestrating headless browser agents with Playwright requires isolated execution environments to prevent race conditions during verification. 3.Designing for accessibility requires applying strict WCAG standard contrast rules to the developer tools themselves.

What's next for Mendable

1.Enabling direct integration with GitHub to convert verified fixes into automated Pull Requests. 2.Expanding support for multi-page site crawling and site-wide accessibility auditing. 3.Enhancing the confidence scoring model across complex custom UI component libraries.

Built With

Share this project:

Updates

Submission history